test: [POM] Migrate onboarding infura call privacy e2e tests (#28079)

## **Description** - Migrate onboarding infura call privacy e2e tests to TypeScript and Page Object Model (POM) pattern. - Improve onboarding related page object modals implementation. - Improve switch network page object modals implementation. - Handle mmi build in `openAccountOptionMenu` method to reduce flakiness - Objective of this PR is to improve test stability and maintainability, it also reduced flakiness. [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27155?quickstart=1) ## **Related issues** Fixes: #28080 ## **Manual testing steps** Check code readability, make sure tests pass. ## **Screenshots/Recordings**  ### **Before**  ### **After**  ## **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: Harika <153644847+hjetpoluru@users.noreply.github.com>
MetaMask · Oct 28, 2024 · b6639fc · b6639fc
1 parent 4be7b4a
commit b6639fc
Show file tree

Hide file tree

Showing 13 changed files with 383 additions and 432 deletions.
diff --git a/test/e2e/helpers.js b/test/e2e/helpers.js
@@ -697,45 +697,6 @@ const completeCreateNewWalletOnboardingFlow = async (driver, password) => {
   await onboardingPinExtension(driver);
 };
 
-const importWrongSRPOnboardingFlow = async (driver, seedPhrase) => {
-  // agree to terms of use
-  await driver.clickElement('[data-testid="onboarding-terms-checkbox"]');
-
-  // welcome
-  await driver.clickElement('[data-testid="onboarding-import-wallet"]');
-
-  // metrics
-  await driver.clickElement('[data-testid="metametrics-no-thanks"]');
-
-  // import with recovery phrase
-  await driver.pasteIntoField(
-    '[data-testid="import-srp__srp-word-0"]',
-    seedPhrase,
-  );
-
-  const warningText = 'Invalid Secret Recovery Phrase';
-  const warnings = await driver.findElements('.import-srp__banner-alert-text');
-  const warning = warnings[1];
-
-  assert.equal(await warning.getText(), warningText);
-};
-
-const selectDropdownByNum = async (elements, index) => {
-  await elements[index].click();
-};
-
-const testSRPDropdownIterations = async (options, driver, iterations) => {
-  for (let i = 0; i < iterations; i++) {
-    await selectDropdownByNum(options, i);
-    await new Promise((resolve) => setTimeout(resolve, 1000));
-
-    const formFields = await driver.findElements('.import-srp__srp-word-label');
-    const expectedNumFields = 12 + i * 3;
-    const actualNumFields = formFields.length;
-    assert.equal(actualNumFields, expectedNumFields);
-  }
-};
-
 const openSRPRevealQuiz = async (driver) => {
   // navigate settings to reveal SRP
   await driver.clickElement('[data-testid="account-options-menu-button"]');
@@ -1358,8 +1319,6 @@ module.exports = {
   closeSRPReveal,
   tapAndHoldToRevealSRP,
   createDownloadFolder,
-  importWrongSRPOnboardingFlow,
-  testSRPDropdownIterations,
   openDapp,
   openDappConnectionsPage,
   createDappTransaction,

diff --git a/test/e2e/page-objects/flows/network.flow.ts b/test/e2e/page-objects/flows/network.flow.ts
@@ -0,0 +1,60 @@
+import { Driver } from '../../webdriver/driver';
+import HeaderNavbar from '../pages/header-navbar';
+import SelectNetwork from '../pages/dialog/select-network';
+import NetworkSwitchModalConfirmation from '../pages/dialog/network-switch-modal-confirmation';
+
+/**
+ * Switches to a specified network in the header bar.
+ *
+ * @param driver
+ * @param networkName - The name of the network to switch to.
+ * @param toggleShowTestNetwork - A boolean indicating whether to toggle the display of test networks. Defaults to false.
+ */
+export const switchToNetworkFlow = async (
+  driver: Driver,
+  networkName: string,
+  toggleShowTestNetwork: boolean = false,
+) => {
+  console.log(`Switch to network ${networkName} in header bar`);
+  const headerNavbar = new HeaderNavbar(driver);
+  await headerNavbar.check_pageIsLoaded();
+  await headerNavbar.clickSwitchNetworkDropDown();
+
+  const selectNetworkDialog = new SelectNetwork(driver);
+  await selectNetworkDialog.check_pageIsLoaded();
+  if (toggleShowTestNetwork) {
+    await selectNetworkDialog.toggleShowTestNetwork();
+  }
+  await selectNetworkDialog.selectNetworkName(networkName);
+  await headerNavbar.check_currentSelectedNetwork(networkName);
+};
+
+/**
+ * Search for a network in the select network dialog and switches to it.
+ *
+ * @param driver
+ * @param networkName - The name of the network to search for and switch to.
+ */
+export const searchAndSwitchToNetworkFlow = async (
+  driver: Driver,
+  networkName: string,
+) => {
+  console.log(
+    `Search in select network dialog and switch to network ${networkName}`,
+  );
+  const headerNavbar = new HeaderNavbar(driver);
+  await headerNavbar.check_pageIsLoaded();
+  await headerNavbar.clickSwitchNetworkDropDown();
+
+  const selectNetworkDialog = new SelectNetwork(driver);
+  await selectNetworkDialog.check_pageIsLoaded();
+  await selectNetworkDialog.fillNetworkSearchInput(networkName);
+  await selectNetworkDialog.clickAddButton();
+
+  const networkSwitchModalConfirmation = new NetworkSwitchModalConfirmation(
+    driver,
+  );
+  await networkSwitchModalConfirmation.check_pageIsLoaded();
+  await networkSwitchModalConfirmation.clickApproveButton();
+  await headerNavbar.check_currentSelectedNetwork(networkName);
+};
diff --git a/test/e2e/page-objects/flows/onboarding.flow.ts b/test/e2e/page-objects/flows/onboarding.flow.ts
@@ -6,48 +6,52 @@ 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 ');
+export const createNewWalletOnboardingFlow = async (driver: Driver) => {
+  console.log('Starting the creation of a new wallet onboarding flow');
   await driver.navigate();
   const startOnboardingPage = new StartOnboardingPage(driver);
   await startOnboardingPage.check_pageIsLoaded();
   await startOnboardingPage.checkTermsCheckbox();
-  await startOnboardingPage.clickImportWalletButton();
+  await startOnboardingPage.clickCreateWalletButton();
 
   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();
+  await onboardingPasswordPage.createWalletPassword();
+
+  const secureWalletPage = new SecureWalletPage(driver);
+  await secureWalletPage.check_pageIsLoaded();
+  await secureWalletPage.revealAndConfirmSRP();
 };
 
-export const completeCreateNewWalletOnboardingFlow = async (driver: Driver) => {
-  console.log('start to complete create new wallet onboarding flow ');
+export const importSRPOnboardingFlow = async (driver: Driver) => {
+  console.log('Starting the import of SRP onboarding flow');
   await driver.navigate();
   const startOnboardingPage = new StartOnboardingPage(driver);
   await startOnboardingPage.check_pageIsLoaded();
   await startOnboardingPage.checkTermsCheckbox();
-  await startOnboardingPage.clickCreateWalletButton();
+  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.createWalletPassword();
-
-  const secureWalletPage = new SecureWalletPage(driver);
-  await secureWalletPage.check_pageIsLoaded();
-  await secureWalletPage.revealAndConfirmSRP();
+  await onboardingPasswordPage.createImportedWalletPassword();
+};
 
+export const completeCreateNewWalletOnboardingFlow = async (driver: Driver) => {
+  console.log('start to complete create new wallet onboarding flow ');
+  await createNewWalletOnboardingFlow(driver);
   const onboardingCompletePage = new OnboardingCompletePage(driver);
   await onboardingCompletePage.check_pageIsLoaded();
   await onboardingCompletePage.check_congratulationsMessageIsDisplayed();

diff --git a/test/e2e/page-objects/pages/dialog/network-switch-modal-confirmation.ts b/test/e2e/page-objects/pages/dialog/network-switch-modal-confirmation.ts
@@ -1,13 +1,33 @@
 import { Driver } from '../../../webdriver/driver';
 
-class networkSwitchModalConfirmation {
+class NetworkSwitchModalConfirmation {
   private driver: Driver;
 
-  private submitButton: string;
+  private readonly submitButton = '[data-testid="confirmation-submit-button"]';
+
+  private readonly addNetworkMessage = {
+    text: 'Want to add this network?',
+    tag: 'h3',
+  };
 
   constructor(driver: Driver) {
     this.driver = driver;
-    this.submitButton = '[data-testid="confirmation-submit-button"]';
+  }
+
+  async check_pageIsLoaded(): Promise<void> {
+    try {
+      await this.driver.waitForMultipleSelectors([
+        this.addNetworkMessage,
+        this.submitButton,
+      ]);
+    } catch (e) {
+      console.log(
+        'Timeout while waiting for add network confirmation modal to be loaded',
+        e,
+      );
+      throw e;
+    }
+    console.log('Add network confirmation modal is loaded');
   }
 
   async clickApproveButton(): Promise<void> {
@@ -16,4 +36,4 @@ class networkSwitchModalConfirmation {
   }
 }
 
-export default networkSwitchModalConfirmation;
+export default NetworkSwitchModalConfirmation;
diff --git a/test/e2e/page-objects/pages/dialog/select-network.ts b/test/e2e/page-objects/pages/dialog/select-network.ts
@@ -5,29 +5,47 @@ class SelectNetwork {
 
   private networkName: string | undefined;
 
-  private addNetworkButton: object;
+  private readonly addNetworkButton = {
+    tag: 'button',
+    text: 'Add a custom network',
+  };
 
-  private closeButton: string;
+  private readonly closeButton = 'button[aria-label="Close"]';
 
-  private toggleButton: string;
+  private readonly searchInput =
+    '[data-testid="network-redesign-modal-search-input"]';
 
-  private searchInput: string;
+  private readonly selectNetworkMessage = {
+    text: 'Select a network',
+    tag: 'h4',
+  };
+
+  private readonly toggleButton = '.toggle-button > div';
 
   constructor(driver: Driver) {
     this.driver = driver;
-    this.addNetworkButton = {
-      tag: 'button',
-      text: 'Add a custom network',
-    };
-    this.closeButton = 'button[aria-label="Close"]';
-    this.toggleButton = '.toggle-button > div';
-    this.searchInput = '[data-testid="network-redesign-modal-search-input"]';
   }
 
-  async clickNetworkName(networkName: string): Promise<void> {
+  async check_pageIsLoaded(): Promise<void> {
+    try {
+      await this.driver.waitForMultipleSelectors([
+        this.selectNetworkMessage,
+        this.searchInput,
+      ]);
+    } catch (e) {
+      console.log(
+        'Timeout while waiting for select network dialog to be loaded',
+        e,
+      );
+      throw e;
+    }
+    console.log('Select network dialog is loaded');
+  }
+
+  async selectNetworkName(networkName: string): Promise<void> {
     console.log(`Click ${networkName}`);
     this.networkName = `[data-testid="${networkName}"]`;
-    await this.driver.clickElement(this.networkName);
+    await this.driver.clickElementAndWaitToDisappear(this.networkName);
   }
 
   async addNewNetwork(): Promise<void> {
@@ -40,8 +58,8 @@ class SelectNetwork {
     await this.driver.clickElementAndWaitToDisappear(this.closeButton);
   }
 
-  async clickToggleButton(): Promise<void> {
-    console.log('Click Toggle Button');
+  async toggleShowTestNetwork(): Promise<void> {
+    console.log('Toggle show test network in select network dialog');
     await this.driver.clickElement(this.toggleButton);
   }