test: [POM] Create onboarding related page object modal base pages an…

…d migrate e2e tests (#28036)

## **Description**
This PR migrates onboarding e2e tests to Page Object Model (POM)
pattern, improving test stability and maintainability.

Changes include:
- Migrate test `test/e2e/tests/onboarding/onboarding.spec.js` to POM
- Migrate test `test/e2e/tests/onboarding/onboarding.spec.js` to
TypeScript
- Created all onboarding-related pages and functions
- Avoided unnecessary delays
- Reduced flakiness 
- I will create follow-up PRs after this one is merged to avoid having a
very big PR.

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

## **Related issues**

Fixes: ##27989

## **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: devin-ai-integration[bot] <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: Chloe Gao <chloe.gao@consensys.net>
Co-authored-by: chloeYue <105063779+chloeYue@users.noreply.github.com>
Co-authored-by: seaona <54408225+seaona@users.noreply.github.com>

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

@@ -18,10 +18,6 @@ export const loginWithoutBalanceValidation = async (
   const loginPage = new LoginPage(driver);
   await loginPage.check_pageIsLoaded();
   await loginPage.loginToHomepage(password);
-
-  // user should land on homepage after successfully logging in with password
-  const homePage = new HomePage(driver);
-  await homePage.check_pageIsLoaded();
 };
 
 /**
@@ -37,10 +33,14 @@ export const loginWithBalanceValidation = async (
   password?: string,
 ) => {
   await loginWithoutBalanceValidation(driver, password);
+  // user should land on homepage after successfully logging in with password
+  const homePage = new HomePage(driver);
+  await homePage.check_pageIsLoaded();
+
   // Verify the expected balance on the homepage
   if (ganacheServer) {
-    await new HomePage(driver).check_ganacheBalanceIsDisplayed(ganacheServer);
+    await homePage.check_ganacheBalanceIsDisplayed(ganacheServer);
   } else {
-    await new HomePage(driver).check_expectedBalanceIsDisplayed();
+    await homePage.check_expectedBalanceIsDisplayed();
   }
 };

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

@@ -0,0 +1,64 @@
+import { Driver } from '../../webdriver/driver';
+import OnboardingMetricsPage from '../pages/onboarding/onboarding-metrics-page';
+import OnboardingPasswordPage from '../pages/onboarding/onboarding-password-page';
+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';
+
+export const importSRPOnboardingFlow = async (driver: Driver) => {
+  console.log('start import srp onboarding flow ');
+  await driver.navigate();
+  const startOnboardingPage = new StartOnboardingPage(driver);
+  await startOnboardingPage.check_pageIsLoaded();
+  await startOnboardingPage.checkTermsCheckbox();
+  await startOnboardingPage.clickImportWalletButton();
+
+  const onboardingMetricsPage = new OnboardingMetricsPage(driver);
+  await onboardingMetricsPage.check_pageIsLoaded();
+  await onboardingMetricsPage.clickNoThanksButton();
+
+  const onboardingSrpPage = new OnboardingSrpPage(driver);
+  await onboardingSrpPage.check_pageIsLoaded();
+  await onboardingSrpPage.fillSrp();
+  await onboardingSrpPage.clickConfirmButton();
+
+  const onboardingPasswordPage = new OnboardingPasswordPage(driver);
+  await onboardingPasswordPage.check_pageIsLoaded();
+  await onboardingPasswordPage.createImportedWalletPassword();
+};
+
+export const completeCreateNewWalletOnboardingFlow = async (driver: Driver) => {
+  console.log('start to complete create new wallet onboarding flow ');
+  await driver.navigate();
+  const startOnboardingPage = new StartOnboardingPage(driver);
+  await startOnboardingPage.check_pageIsLoaded();
+  await startOnboardingPage.checkTermsCheckbox();
+  await startOnboardingPage.clickCreateWalletButton();
+
+  const onboardingMetricsPage = new OnboardingMetricsPage(driver);
+  await onboardingMetricsPage.check_pageIsLoaded();
+  await onboardingMetricsPage.clickNoThanksButton();
+
+  const onboardingPasswordPage = new OnboardingPasswordPage(driver);
+  await onboardingPasswordPage.check_pageIsLoaded();
+  await onboardingPasswordPage.createWalletPassword();
+
+  const secureWalletPage = new SecureWalletPage(driver);
+  await secureWalletPage.check_pageIsLoaded();
+  await secureWalletPage.revealAndConfirmSRP();
+
+  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);
+  const onboardingCompletePage = new OnboardingCompletePage(driver);
+  await onboardingCompletePage.check_pageIsLoaded();
+  await onboardingCompletePage.check_walletReadyMessageIsDisplayed();
+  await onboardingCompletePage.completeOnboarding();
+};

test/e2e/page-objects/pages/header-navbar.ts

@@ -15,8 +15,16 @@ class HeaderNavbar {
   private readonly mmiPortfolioButton =
     '[data-testid="global-menu-mmi-portfolio"]';
 
+  private readonly selectNetworkMessage = {
+    text: 'Select a network',
+    tag: 'h4',
+  };
+
   private readonly settingsButton = '[data-testid="global-menu-settings"]';
 
+  private readonly switchNetworkDropDownButton =
+    '[data-testid="network-display"]';
+
   constructor(driver: Driver) {
     this.driver = driver;
   }
@@ -63,6 +71,28 @@ class HeaderNavbar {
     await this.driver.clickElement(this.settingsButton);
   }
 
+  /**
+   * Switches to the specified network.
+   *
+   * @param networkName - The name of the network to switch to.
+   */
+  async switchToNetwork(networkName: string): Promise<void> {
+    console.log(`Switch to network ${networkName} in header bar`);
+    await this.driver.clickElement(this.switchNetworkDropDownButton);
+    await this.driver.waitForSelector(this.selectNetworkMessage);
+    await this.driver.clickElementAndWaitToDisappear(
+      `[data-testid="${networkName}"]`,
+    );
+    // check the toaster message is displayed and the network is correctly selected
+    await this.driver.waitForSelector({
+      tag: 'h6',
+      text: `“${networkName}” was successfully added!`,
+    });
+    await this.driver.waitForSelector(
+      `${this.switchNetworkDropDownButton}[aria-label="Network Menu ${networkName}"]`,
+    );
+  }
+
   /**
    * Verifies that the displayed account label in header matches the expected label.
    *

test/e2e/page-objects/pages/homepage.ts

@@ -13,6 +13,11 @@ class HomePage {
 
   private readonly balance = '[data-testid="eth-overview__primary-currency"]';
 
+  private readonly basicFunctionalityOffWarningMessage = {
+    text: 'Basic functionality is off',
+    css: '.mm-banner-alert',
+  };
+
   private readonly completedTransactions = '[data-testid="activity-list-item"]';
 
   private readonly confirmedTransactions = {
@@ -60,6 +65,13 @@ class HomePage {
     await this.driver.clickElement(this.activityTab);
   }
 
+  async check_basicFunctionalityOffWarnigMessageIsDisplayed(): Promise<void> {
+    console.log(
+      'Check if basic functionality off warning message is displayed on homepage',
+    );
+    await this.driver.waitForSelector(this.basicFunctionalityOffWarningMessage);
+  }
+
   /**
    * This function checks if the specified number of confirmed transactions are displayed in the activity list on homepage.
    * It waits up to 10 seconds for the expected number of confirmed transactions to be visible.

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

@@ -0,0 +1,95 @@
+import { Driver } from '../../../webdriver/driver';
+
+class OnboardingCompletePage {
+  private driver: Driver;
+
+  private readonly congratulationsMessage = {
+    text: 'Congratulations!',
+    tag: 'h2',
+  };
+
+  private readonly defaultPrivacySettingsButton = {
+    text: 'Manage default privacy settings',
+    tag: 'button',
+  };
+
+  private readonly installCompleteMessage = {
+    text: 'Your MetaMask install is complete!',
+    tag: 'h2',
+  };
+
+  private readonly onboardingCompleteDoneButton =
+    '[data-testid="onboarding-complete-done"]';
+
+  private readonly pinExtensionDoneButton =
+    '[data-testid="pin-extension-done"]';
+
+  private readonly pinExtensionMessage = {
+    text: 'Click browser extension icon to access it instantly',
+    tag: 'p',
+  };
+
+  private readonly pinExtensionNextButton =
+    '[data-testid="pin-extension-next"]';
+
+  private readonly walletReadyMessage = {
+    text: 'Your wallet is ready',
+    tag: 'h2',
+  };
+
+  constructor(driver: Driver) {
+    this.driver = driver;
+  }
+
+  async check_pageIsLoaded(): Promise<void> {
+    try {
+      await this.driver.waitForMultipleSelectors([
+        this.defaultPrivacySettingsButton,
+        this.onboardingCompleteDoneButton,
+      ]);
+    } catch (e) {
+      console.log(
+        'Timeout while waiting for onboarding wallet creation complete page to be loaded',
+        e,
+      );
+      throw e;
+    }
+    console.log('Onboarding wallet creation complete page is loaded');
+  }
+
+  async clickCreateWalletDoneButton(): Promise<void> {
+    await this.driver.clickElementAndWaitToDisappear(
+      this.onboardingCompleteDoneButton,
+    );
+  }
+
+  async completeOnboarding(): Promise<void> {
+    console.log('Complete onboarding');
+    await this.clickCreateWalletDoneButton();
+    await this.driver.waitForSelector(this.installCompleteMessage);
+    await this.driver.clickElement(this.pinExtensionNextButton);
+
+    // Wait until the onboarding carousel has stopped moving otherwise the click has no effect.
+    await this.driver.waitForSelector(this.pinExtensionMessage);
+    await this.driver.waitForElementToStopMoving(this.pinExtensionDoneButton);
+    await this.driver.clickElementAndWaitToDisappear(
+      this.pinExtensionDoneButton,
+    );
+  }
+
+  async navigateToDefaultPrivacySettings(): Promise<void> {
+    await this.driver.clickElementAndWaitToDisappear(
+      this.defaultPrivacySettingsButton,
+    );
+  }
+
+  async check_congratulationsMessageIsDisplayed(): Promise<void> {
+    await this.driver.waitForSelector(this.congratulationsMessage);
+  }
+
+  async check_walletReadyMessageIsDisplayed(): Promise<void> {
+    await this.driver.waitForSelector(this.walletReadyMessage);
+  }
+}
+
+export default OnboardingCompletePage;

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

@@ -0,0 +1,38 @@
+import { Driver } from '../../../webdriver/driver';
+
+class OnboardingMetricsPage {
+  private driver: Driver;
+
+  private readonly metametricsMessage = {
+    text: 'Help us improve MetaMask',
+    tag: 'h2',
+  };
+
+  private readonly noThanksButton = '[data-testid="metametrics-no-thanks"]';
+
+  constructor(driver: Driver) {
+    this.driver = driver;
+  }
+
+  async check_pageIsLoaded(): Promise<void> {
+    try {
+      await this.driver.waitForMultipleSelectors([
+        this.metametricsMessage,
+        this.noThanksButton,
+      ]);
+    } catch (e) {
+      console.log(
+        'Timeout while waiting for onboarding metametrics page to be loaded',
+        e,
+      );
+      throw e;
+    }
+    console.log('Onboarding metametrics page is loaded');
+  }
+
+  async clickNoThanksButton(): Promise<void> {
+    await this.driver.clickElementAndWaitToDisappear(this.noThanksButton);
+  }
+}
+
+export default OnboardingMetricsPage;