test: [POM] Migrate edit network rpc e2e tests and create related page class functions

test/e2e/page-objects/pages/dialog/edit-network.ts

@@ -0,0 +1,54 @@
+import { Driver } from '../../../webdriver/driver';
+
+class EditNetworkModal {
+  private driver: Driver;
+
+  private readonly editModalNetworkNameInput =
+    '[data-testid="network-form-network-name"]';
+
+  private readonly editModalRpcDropDownButton =
+    '[data-testid="test-add-rpc-drop-down"]';
+
+  private readonly editModalSaveButton = {
+    text: 'Save',
+    tag: 'button',
+  };
+
+  constructor(driver: Driver) {
+    this.driver = driver;
+  }
+
+  async check_pageIsLoaded(): Promise<void> {
+    try {
+      await this.driver.waitForMultipleSelectors([
+        this.editModalNetworkNameInput,
+        this.editModalRpcDropDownButton,
+        this.editModalSaveButton,
+      ]);
+    } catch (e) {
+      console.log(
+        'Timeout while waiting for select network dialog to be loaded',
+        e,
+      );
+      throw e;
+    }
+    console.log('Edit network dialog is loaded');
+  }
+
+  /**
+   * Selects an RPC from the dropdown in the edit network modal.
+   *
+   * @param rpcName - The name of the RPC to select.
+   */
+  async selectRPCInEditNetworkModal(rpcName: string): Promise<void> {
+    console.log(`Select RPC ${rpcName} in edit network modal`);
+    await this.driver.clickElement(this.editModalRpcDropDownButton);
+    await this.driver.clickElement({
+      text: rpcName,
+      tag: 'button',
+    });
+    await this.driver.clickElementAndWaitToDisappear(this.editModalSaveButton);
+  }
+}
+
+export default EditNetworkModal;

test/e2e/page-objects/pages/dialog/select-network.ts

@@ -3,15 +3,15 @@ import { Driver } from '../../../webdriver/driver';
 class SelectNetwork {
   private driver: Driver;
 
-  private networkName: string | undefined;
-
-  private readonly addNetworkButton = {
-    tag: 'button',
-    text: 'Add a custom network',
-  };
+  private readonly addNetworkButton = '[data-testid="test-add-button"]';
 
   private readonly closeButton = 'button[aria-label="Close"]';
 
+  private readonly editNetworkButton =
+    '[data-testid="network-list-item-options-edit"]';
+
+  private readonly rpcUrlItem = '.select-rpc-url__item';
+
   private readonly searchInput =
     '[data-testid="network-redesign-modal-search-input"]';
 
@@ -20,6 +20,11 @@ class SelectNetwork {
     tag: 'h4',
   };
 
+  private readonly selectRpcMessage = {
+    text: 'Select RPC URL',
+    tag: 'h4',
+  };
+
   private readonly toggleButton = '.toggle-button > div';
 
   constructor(driver: Driver) {
@@ -42,37 +47,78 @@ class SelectNetwork {
     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.clickElementAndWaitToDisappear(this.networkName);
-  }
-
-  async addNewNetwork(): Promise<void> {
-    console.log('Click Add network');
-    await this.driver.clickElement(this.addNetworkButton);
+  async clickAddButton(): Promise<void> {
+    console.log('Click Add Button');
+    await this.driver.clickElementAndWaitToDisappear(this.addNetworkButton);
   }
 
   async clickCloseButton(): Promise<void> {
     console.log('Click Close Button');
     await this.driver.clickElementAndWaitToDisappear(this.closeButton);
   }
 
-  async toggleShowTestNetwork(): Promise<void> {
-    console.log('Toggle show test network in select network dialog');
-    await this.driver.clickElement(this.toggleButton);
-  }
-
   async fillNetworkSearchInput(networkName: string): Promise<void> {
     console.log(`Fill network search input with ${networkName}`);
     await this.driver.fill(this.searchInput, networkName);
   }
 
-  async clickAddButton(): Promise<void> {
-    console.log('Click Add Button');
+  async openEditNetworkModal(): Promise<void> {
+    console.log('Open edit network modal');
+    await this.driver.clickElementAndWaitToDisappear(this.editNetworkButton);
+  }
+
+  async openNetworkListOptions(chainId: string): Promise<void> {
+    console.log(`Open network options for ${chainId} in network dialog`);
+    await this.driver.clickElement(
+      `[data-testid="network-list-item-options-button-${chainId}"]`,
+    );
+  }
+
+  async openNetworkRPC(chainId: string): Promise<void> {
+    console.log(`Open network RPC ${chainId}`);
     await this.driver.clickElementAndWaitToDisappear(
-      '[data-testid="test-add-button"]',
+      `[data-testid="network-rpc-name-button-${chainId}"]`,
+    );
+    await this.driver.waitForSelector(this.selectRpcMessage);
+  }
+
+  async selectNetworkName(networkName: string): Promise<void> {
+    console.log(`Click ${networkName}`);
+    const networkNameItem = `[data-testid="${networkName}"]`;
+    await this.driver.clickElementAndWaitToDisappear(networkNameItem);
+  }
+
+  async selectRPC(rpcName: string): Promise<void> {
+    console.log(`Select RPC ${rpcName} for network`);
+    await this.driver.waitForSelector(this.selectRpcMessage);
+    await this.driver.clickElementAndWaitToDisappear({
+      text: rpcName,
+      tag: 'button',
+    });
+  }
+
+  async toggleShowTestNetwork(): Promise<void> {
+    console.log('Toggle show test network in select network dialog');
+    await this.driver.clickElement(this.toggleButton);
+  }
+
+  async check_networkRPCNumber(expectedNumber: number): Promise<void> {
+    console.log(
+      `Wait for ${expectedNumber} RPC URLs to be displayed in select network dialog`,
     );
+    await this.driver.wait(async () => {
+      const rpcNumber = await this.driver.findElements(this.rpcUrlItem);
+      return rpcNumber.length === expectedNumber;
+    }, 10000);
+    console.log(`${expectedNumber} RPC URLs found in select network dialog`);
+  }
+
+  async check_rpcIsSelected(rpcName: string): Promise<void> {
+    console.log(`Check RPC ${rpcName} is selected in network dialog`);
+    await this.driver.waitForSelector({
+      text: rpcName,
+      tag: 'button',
+    });
   }
 }
 

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

@@ -22,6 +22,11 @@ class HomePage {
     css: '.mm-banner-alert',
   };
 
+  private readonly closeUseNetworkNotificationModalButton = {
+    text: 'Got it',
+    tag: 'h6',
+  };
+
   private readonly completedTransactions = '[data-testid="activity-list-item"]';
 
   private readonly confirmedTransactions = {
@@ -34,6 +39,8 @@ class HomePage {
     css: '.transaction-status-label--failed',
   };
 
+  private readonly popoverBackground = '.popover-bg';
+
   private readonly sendButton = '[data-testid="eth-overview-send"]';
 
   private readonly tokensTab = '[data-testid="account-overview__asset-tab"]';
@@ -60,22 +67,23 @@ class HomePage {
     console.log('Home page is loaded');
   }
 
-  async startSendFlow(): Promise<void> {
-    await this.driver.clickElement(this.sendButton);
+  async closeUseNetworkNotificationModal(): Promise<void> {
+    // We need to use clickElementSafe + assertElementNotPresent as sometimes the network dialog doesn't appear, as per this issue (#25788)
+    // TODO: change the 2 actions for clickElementAndWaitToDisappear, once the issue is fixed
+    await this.driver.assertElementNotPresent(this.popoverBackground);
+    await this.driver.clickElementSafe(
+      this.closeUseNetworkNotificationModalButton,
+    );
+    await this.driver.assertElementNotPresent(
+      this.closeUseNetworkNotificationModalButton,
+    );
   }
 
   async goToActivityList(): Promise<void> {
     console.log(`Open activity tab on 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);
-  }
-
   async goToNFTList(): Promise<void> {
     console.log(`Open NFT tab on homepage`);
     await this.driver.clickElement(this.nftTab);
@@ -85,6 +93,10 @@ class HomePage {
     await this.driver.clickElement(this.nftIconOnActivityList);
   }
 
+  async startSendFlow(): Promise<void> {
+    await this.driver.clickElement(this.sendButton);
+  }
+
   /**
    * Checks if the toaster message for adding a network is displayed on the homepage.
    *
@@ -100,6 +112,37 @@ class HomePage {
     });
   }
 
+  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 the specified number of completed transactions are displayed in the activity list on the homepage.
+   * It waits up to 10 seconds for the expected number of completed transactions to be visible.
+   *
+   * @param expectedNumber - The number of completed transactions expected to be displayed in the activity list. Defaults to 1.
+   * @returns A promise that resolves if the expected number of completed transactions is displayed within the timeout period.
+   */
+  async check_completedTxNumberDisplayedInActivity(
+    expectedNumber: number = 1,
+  ): Promise<void> {
+    console.log(
+      `Wait for ${expectedNumber} completed transactions to be displayed in activity list`,
+    );
+    await this.driver.wait(async () => {
+      const completedTxs = await this.driver.findElements(
+        this.completedTransactions,
+      );
+      return completedTxs.length === expectedNumber;
+    }, 10000);
+    console.log(
+      `${expectedNumber} completed transactions found in activity list on homepage`,
+    );
+  }
+
   /**
    * 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.
@@ -125,27 +168,20 @@ class HomePage {
   }
 
   /**
-   * This function checks the specified number of completed transactions are displayed in the activity list on the homepage.
-   * It waits up to 10 seconds for the expected number of completed transactions to be visible.
+   * Checks if the toaster message for editing a network is displayed on the homepage.
    *
-   * @param expectedNumber - The number of completed transactions expected to be displayed in the activity list. Defaults to 1.
-   * @returns A promise that resolves if the expected number of completed transactions is displayed within the timeout period.
+   * @param networkName - The name of the network that was edited.
    */
-  async check_completedTxNumberDisplayedInActivity(
-    expectedNumber: number = 1,
+  async check_editNetworkMessageIsDisplayed(
+    networkName: string,
   ): Promise<void> {
     console.log(
-      `Wait for ${expectedNumber} completed transactions to be displayed in activity list`,
-    );
-    await this.driver.wait(async () => {
-      const completedTxs = await this.driver.findElements(
-        this.completedTransactions,
-      );
-      return completedTxs.length === expectedNumber;
-    }, 10000);
-    console.log(
-      `${expectedNumber} completed transactions found in activity list on homepage`,
+      `Check the toaster message for editing network ${networkName} is displayed on homepage`,
     );
+    await this.driver.waitForSelector({
+      tag: 'h6',
+      text: `“${networkName}” was successfully edited!`,
+    });
   }
 
   /**

test/e2e/page-objects/pages/onboarding/onboarding-privacy-settings-page.ts

@@ -134,8 +134,7 @@ class OnboardingPrivacySettingsPage {
       this.confirmAddCustomNetworkButton,
     );
     // Navigate back to default privacy settings
-    await this.driver.clickElement(this.categoryBackButton);
-    await this.driver.waitForElementToStopMoving(this.categoryBackButton);
+    await this.navigateBackToSettingsPage();
   }
 
   /**
@@ -152,13 +151,34 @@ class OnboardingPrivacySettingsPage {
     );
   }
 
+  /**
+   * Navigate back to the onboarding privacy settings page.
+   */
+  async navigateBackToSettingsPage(): Promise<void> {
+    console.log('Navigate back to onboarding privacy settings page');
+    // Wait until the onboarding carousel has stopped moving otherwise the click has no effect.
+    await this.driver.clickElement(this.categoryBackButton);
+    await this.driver.waitForElementToStopMoving(this.categoryBackButton);
+  }
+
   async navigateToGeneralSettings(): Promise<void> {
     console.log('Navigate to general settings');
     await this.check_pageIsLoaded();
     await this.driver.clickElement(this.generalSettings);
     await this.driver.waitForSelector(this.generalSettingsMessage);
   }
 
+  /**
+   * Open the edit network modal for a given network name.
+   *
+   * @param networkName - The name of the network to open the edit modal for.
+   */
+  async openEditNetworkModal(networkName: string): Promise<void> {
+    console.log(`Open edit network modal for ${networkName}`);
+    await this.driver.clickElement({ text: networkName, tag: 'p' });
+    await this.driver.waitForSelector(this.addRpcUrlDropDown);
+  }
+
   /**
    * Go to assets settings and toggle options, then navigate back.
    */
@@ -172,8 +192,7 @@ class OnboardingPrivacySettingsPage {
         await this.driver.findClickableElements(this.assetsPrivacyToggle)
       ).map((toggle) => toggle.click()),
     );
-    await this.driver.clickElement(this.categoryBackButton);
-    await this.driver.waitForElementToStopMoving(this.categoryBackButton);
+    await this.navigateBackToSettingsPage();
   }
 
   /**
@@ -186,8 +205,7 @@ class OnboardingPrivacySettingsPage {
     await this.driver.waitForSelector(this.basicFunctionalityTurnOffMessage);
     await this.driver.clickElement(this.basicFunctionalityCheckbox);
     await this.driver.clickElement(this.basicFunctionalityTurnOffButton);
-    await this.driver.clickElement(this.categoryBackButton);
-    await this.driver.waitForElementToStopMoving(this.categoryBackButton);
+    await this.navigateBackToSettingsPage();
   }
 }