test: [POM] Refactor e2e tests to use onboarding flows defined in Pag…

…e Object Models (#28202)

## **Description**

- Refactor e2e tests to use onboarding flows defined in Page Object
Models, as the new onboarding functions are more stable, and have
removed unnecessary delays
- Deprecate old onboarding functions
- Correct the logic in test
`test/e2e/tests/notifications/account-syncing/onboarding-with-opt-out.spec.ts`
to make it more clear, we only need to toggle the basic functionality
off during onboarding, it will also toggle off sync account option.
- Removed ganache server in e2e tests when the ganache is not necessary

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27155?quickstart=1)

## **Related issues**

Fixes: #28226 

## **Manual testing steps**
Check code readability, make sure tests pass.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

---------

Co-authored-by: Danica Shen <zhaodanica@gmail.com>

test/e2e/helpers.js

@@ -382,6 +382,12 @@ const getWindowHandles = async (driver, handlesCount) => {
   return { extension, dapp, popup };
 };
 
+/**
+ * @deprecated Please use page object functions in `onboarding.flow.ts` and in `pages/onboarding/*`.
+ * @param driver
+ * @param seedPhrase
+ * @param password
+ */
 const importSRPOnboardingFlow = async (driver, seedPhrase, password) => {
   // agree to terms of use
   await driver.clickElement('[data-testid="onboarding-terms-checkbox"]');
@@ -408,6 +414,12 @@ const importSRPOnboardingFlow = async (driver, seedPhrase, password) => {
   await driver.assertElementNotPresent('.loading-overlay');
 };
 
+/**
+ * @deprecated Please use page object functions in `onboarding.flow.ts` and in `pages/onboarding/*`.
+ * @param driver
+ * @param seedPhrase
+ * @param password
+ */
 const completeImportSRPOnboardingFlow = async (
   driver,
   seedPhrase,
@@ -423,6 +435,12 @@ const completeImportSRPOnboardingFlow = async (
   await driver.clickElement('[data-testid="pin-extension-done"]');
 };
 
+/**
+ * @deprecated Please use page object functions in `onboarding.flow.ts` and in `pages/onboarding/*`.
+ * @param driver
+ * @param seedPhrase
+ * @param password
+ */
 const completeImportSRPOnboardingFlowWordByWord = async (
   driver,
   seedPhrase,
@@ -466,8 +484,8 @@ const completeImportSRPOnboardingFlowWordByWord = async (
 };
 
 /**
+ * @deprecated Please use page object functions in `onboarding.flow.ts` and in `pages/onboarding/*`.
  * Begin the create new wallet flow on onboarding screen.
- *
  * @param {WebDriver} driver
  */
 const onboardingBeginCreateNewWallet = async (driver) => {
@@ -479,8 +497,8 @@ const onboardingBeginCreateNewWallet = async (driver) => {
 };
 
 /**
+ * @deprecated Please use page object functions in `onboarding.flow.ts` and in `pages/onboarding/*`.
  * Choose either "I Agree" or "No Thanks" on the MetaMetrics onboarding screen
- *
  * @param {WebDriver} driver
  * @param {boolean} option - true to opt into metrics, default is false
  */
@@ -491,8 +509,8 @@ const onboardingChooseMetametricsOption = async (driver, option = false) => {
 };
 
 /**
+ * @deprecated Please use page object functions in `onboarding.flow.ts` and in `pages/onboarding/*`.
  * Set a password for MetaMask during onboarding
- *
  * @param {WebDriver} driver
  * @param {string} password - Password to set
  */
@@ -505,9 +523,9 @@ const onboardingCreatePassword = async (driver, password) => {
 };
 
 /**
+ * @deprecated Please use page object functions in `onboarding.flow.ts` and in `pages/onboarding/*`.
  * Choose to secure wallet, and then get recovery phrase and confirm the SRP
  * during onboarding flow.
- *
  * @param {WebDriver} driver
  */
 const onboardingRevealAndConfirmSRP = async (driver) => {
@@ -543,9 +561,9 @@ const onboardingRevealAndConfirmSRP = async (driver) => {
 };
 
 /**
+ * @deprecated Please use page object functions in `onboarding.flow.ts` and in `pages/onboarding/*`.
  * Complete the onboarding flow by confirming completion. Final step before the
  * reminder to pin the extension.
- *
  * @param {WebDriver} driver
  */
 const onboardingCompleteWalletCreation = async (driver) => {
@@ -555,8 +573,8 @@ const onboardingCompleteWalletCreation = async (driver) => {
 };
 
 /**
+ * @deprecated Please use page object functions in `onboarding.flow.ts` and in `pages/onboarding/*`.
  * Move through the steps of pinning extension after successful onboarding
- *
  * @param {WebDriver} driver
  */
 const onboardingPinExtension = async (driver) => {
@@ -566,12 +584,12 @@ const onboardingPinExtension = async (driver) => {
 };
 
 /**
+ * @deprecated Please use page object functions in `onboarding.flow.ts` and in `pages/onboarding/*`.
  * Completes the onboarding flow with optional opt-out settings for wallet creation.
  *
  * This function navigates through the onboarding process, allowing for opt-out of certain features.
  * It waits for the appropriate heading to appear, then proceeds to opt-out of third-party API
  * integration for general and assets sections if specified in the optOutOptions.
- *
  * @param {WebDriver} driver - The Selenium WebDriver instance.
  * @param {object} optOutOptions - Optional. An object specifying which features to opt-out of.
  * @param {boolean} optOutOptions.basicFunctionality - Optional. Defaults to true. Opt-out of basic functionality.
@@ -663,11 +681,11 @@ const onboardingCompleteWalletCreationWithOptOut = async (
 };
 
 /**
+ * @deprecated Please use page object functions in `onboarding.flow.ts` and in `pages/onboarding/*`.
  * Completes the onboarding flow for creating a new wallet with opt-out options.
  *
  * This function guides the user through the onboarding process of creating a new wallet,
  * including opting out of certain features as specified by the `optOutOptions` parameter.
- *
  * @param {object} driver - The Selenium driver instance.
  * @param {string} password - The password to use for the new wallet.
  * @param {object} optOutOptions - An object specifying the features to opt out of.
@@ -688,6 +706,11 @@ const completeCreateNewWalletOnboardingFlowWithOptOut = async (
   await onboardingCompleteWalletCreationWithOptOut(driver, optOutOptions);
 };
 
+/**
+ * @deprecated Please use page object functions in `onboarding.flow.ts` and in `pages/onboarding/*`.
+ * @param driver
+ * @param password
+ */
 const completeCreateNewWalletOnboardingFlow = async (driver, password) => {
   await onboardingBeginCreateNewWallet(driver);
   await onboardingChooseMetametricsOption(driver, false);

test/e2e/page-objects/flows/onboarding.flow.ts

@@ -5,8 +5,19 @@ import OnboardingSrpPage from '../pages/onboarding/onboarding-srp-page';
 import StartOnboardingPage from '../pages/onboarding/start-onboarding-page';
 import SecureWalletPage from '../pages/onboarding/secure-wallet-page';
 import OnboardingCompletePage from '../pages/onboarding/onboarding-complete-page';
+import { WALLET_PASSWORD } from '../../helpers';
+import { E2E_SRP } from '../../default-fixture';
 
-export const createNewWalletOnboardingFlow = async (driver: Driver) => {
+/**
+ * Create new wallet onboarding flow
+ *
+ * @param driver - The WebDriver instance.
+ * @param password - The password to create. Defaults to WALLET_PASSWORD.
+ */
+export const createNewWalletOnboardingFlow = async (
+  driver: Driver,
+  password: string = WALLET_PASSWORD,
+) => {
   console.log('Starting the creation of a new wallet onboarding flow');
   await driver.navigate();
   const startOnboardingPage = new StartOnboardingPage(driver);
@@ -20,16 +31,33 @@ export const createNewWalletOnboardingFlow = async (driver: Driver) => {
 
   const onboardingPasswordPage = new OnboardingPasswordPage(driver);
   await onboardingPasswordPage.check_pageIsLoaded();
-  await onboardingPasswordPage.createWalletPassword();
+  await onboardingPasswordPage.createWalletPassword(password);
 
   const secureWalletPage = new SecureWalletPage(driver);
   await secureWalletPage.check_pageIsLoaded();
   await secureWalletPage.revealAndConfirmSRP();
 };
 
-export const importSRPOnboardingFlow = async (driver: Driver) => {
+/**
+ * Import SRP onboarding flow
+ *
+ * @param options - The options object.
+ * @param options.driver - The WebDriver instance.
+ * @param [options.seedPhrase] - The seed phrase to import.
+ * @param [options.password] - The password to use.
+ */
+export const importSRPOnboardingFlow = async ({
+  driver,
+  seedPhrase = E2E_SRP,
+  password = WALLET_PASSWORD,
+}: {
+  driver: Driver;
+  seedPhrase?: string;
+  password?: string;
+}): Promise<void> => {
   console.log('Starting the import of SRP onboarding flow');
   await driver.navigate();
+
   const startOnboardingPage = new StartOnboardingPage(driver);
   await startOnboardingPage.check_pageIsLoaded();
   await startOnboardingPage.checkTermsCheckbox();
@@ -41,26 +69,53 @@ export const importSRPOnboardingFlow = async (driver: Driver) => {
 
   const onboardingSrpPage = new OnboardingSrpPage(driver);
   await onboardingSrpPage.check_pageIsLoaded();
-  await onboardingSrpPage.fillSrp();
+  await onboardingSrpPage.fillSrp(seedPhrase);
   await onboardingSrpPage.clickConfirmButton();
 
   const onboardingPasswordPage = new OnboardingPasswordPage(driver);
   await onboardingPasswordPage.check_pageIsLoaded();
-  await onboardingPasswordPage.createImportedWalletPassword();
+  await onboardingPasswordPage.createImportedWalletPassword(password);
 };
 
-export const completeCreateNewWalletOnboardingFlow = async (driver: Driver) => {
+/**
+ * Complete create new wallet onboarding flow
+ *
+ * @param driver - The WebDriver instance.
+ * @param password - The password to use. Defaults to WALLET_PASSWORD.
+ */
+export const completeCreateNewWalletOnboardingFlow = async (
+  driver: Driver,
+  password: string = WALLET_PASSWORD,
+) => {
   console.log('start to complete create new wallet onboarding flow ');
-  await createNewWalletOnboardingFlow(driver);
+  await createNewWalletOnboardingFlow(driver, password);
   const onboardingCompletePage = new OnboardingCompletePage(driver);
   await onboardingCompletePage.check_pageIsLoaded();
   await onboardingCompletePage.check_congratulationsMessageIsDisplayed();
   await onboardingCompletePage.completeOnboarding();
 };
 
-export const completeImportSRPOnboardingFlow = async (driver: Driver) => {
-  console.log('start to complete import srp onboarding flow ');
-  await importSRPOnboardingFlow(driver);
+/**
+ * Complete import SRP onboarding flow
+ *
+ * @param options - The options object.
+ * @param options.driver - The WebDriver instance.
+ * @param [options.seedPhrase] - The seed phrase to import. Defaults to E2E_SRP.
+ * @param [options.password] - The password to use. Defaults to WALLET_PASSWORD.
+ * @returns A promise that resolves when the onboarding flow is complete.
+ */
+export const completeImportSRPOnboardingFlow = async ({
+  driver,
+  seedPhrase = E2E_SRP,
+  password = WALLET_PASSWORD,
+}: {
+  driver: Driver;
+  seedPhrase?: string;
+  password?: string;
+}): Promise<void> => {
+  console.log('Starting to complete import SRP onboarding flow');
+  await importSRPOnboardingFlow({ driver, seedPhrase, password });
+
   const onboardingCompletePage = new OnboardingCompletePage(driver);
   await onboardingCompletePage.check_pageIsLoaded();
   await onboardingCompletePage.check_walletReadyMessageIsDisplayed();

test/e2e/page-objects/pages/onboarding/onboarding-password-page.ts

@@ -52,30 +52,26 @@ class OnboardingPasswordPage {
   /**
    * Create a password for new imported wallet
    *
-   * @param newPassword - The new password to create. Defaults to WALLET_PASSWORD.
-   * @param confirmPassword - The confirm password to create. Defaults to WALLET_PASSWORD.
+   * @param password - The password to create. Defaults to WALLET_PASSWORD.
    */
   async createImportedWalletPassword(
-    newPassword: string = WALLET_PASSWORD,
-    confirmPassword: string = WALLET_PASSWORD,
+    password: string = WALLET_PASSWORD,
   ): Promise<void> {
     console.log('Create password for new imported wallet');
-    await this.fillWalletPassword(newPassword, confirmPassword);
+    await this.fillWalletPassword(password, password);
     await this.driver.clickElementAndWaitToDisappear(this.importWalletButton);
   }
 
   /**
    * Create a password for new created wallet
    *
-   * @param newPassword - The new password to create. Defaults to WALLET_PASSWORD.
-   * @param confirmPassword - The confirm password to create. Defaults to WALLET_PASSWORD.
+   * @param password - The new password to create. Defaults to WALLET_PASSWORD.
    */
   async createWalletPassword(
-    newPassword: string = WALLET_PASSWORD,
-    confirmPassword: string = WALLET_PASSWORD,
+    password: string = WALLET_PASSWORD,
   ): Promise<void> {
     console.log('Create password for new created wallet');
-    await this.fillWalletPassword(newPassword, confirmPassword);
+    await this.fillWalletPassword(password, password);
     await this.driver.clickElementAndWaitToDisappear(this.createWalletButton);
   }
 

test/e2e/page-objects/pages/onboarding/onboarding-srp-page.ts

@@ -1,6 +1,6 @@
 import { strict as assert } from 'assert';
 import { Driver } from '../../../webdriver/driver';
-import { TEST_SEED_PHRASE } from '../../../helpers';
+import { E2E_SRP } from '../../../default-fixture';
 
 class OnboardingSrpPage {
   private driver: Driver;
@@ -53,9 +53,9 @@ class OnboardingSrpPage {
   /**
    * Fill the SRP words with the provided seed phrase
    *
-   * @param seedPhrase - The seed phrase to fill. Defaults to TEST_SEED_PHRASE.
+   * @param seedPhrase - The seed phrase to fill. Defaults to E2E_SRP.
    */
-  async fillSrp(seedPhrase: string = TEST_SEED_PHRASE): Promise<void> {
+  async fillSrp(seedPhrase: string = E2E_SRP): Promise<void> {
     await this.driver.pasteIntoField(this.srpWord0, seedPhrase);
   }
 

test/e2e/tests/network/multi-rpc.spec.ts

@@ -79,11 +79,11 @@ describe('MultiRpc:', function (this: Suite) {
         testSpecificMock: mockRPCURLAndChainId,
       },
 
-      async ({ driver }: { driver: Driver }) => {
-        await completeImportSRPOnboardingFlow(driver);
+      async ({ driver, ganacheServer }) => {
+        await completeImportSRPOnboardingFlow({ driver });
         const homePage = new HomePage(driver);
         await homePage.check_pageIsLoaded();
-        await homePage.check_expectedBalanceIsDisplayed();
+        await homePage.check_ganacheBalanceIsDisplayed(ganacheServer);
 
         await new HeaderNavbar(driver).clickSwitchNetworkDropDown();
         const selectNetworkDialog = new SelectNetwork(driver);
@@ -348,7 +348,7 @@ describe('MultiRpc:', function (this: Suite) {
       },
 
       async ({ driver }: { driver: Driver }) => {
-        await importSRPOnboardingFlow(driver);
+        await importSRPOnboardingFlow({ driver });
         const onboardingCompletePage = new OnboardingCompletePage(driver);
         await onboardingCompletePage.check_pageIsLoaded();
         await onboardingCompletePage.navigateToDefaultPrivacySettings();