test: Added e2e for switch network

privacy-snapshot.json

@@ -62,5 +62,6 @@
   "unresponsive-rpc.test",
   "unresponsive-rpc.url",
   "user-storage.api.cx.metamask.io",
-  "www.4byte.directory"
+  "www.4byte.directory",
+  "sepolia.infura.io"
 ]

test/e2e/page-objects/pages/dialog/notification.ts

@@ -0,0 +1,19 @@
+import { Driver } from '../../../webdriver/driver';
+
+class Notification {
+  private driver: Driver;
+
+  private submitButton: string;
+
+  constructor(driver: Driver) {
+    this.driver = driver;
+    this.submitButton = '[data-testid="confirmation-submit-button"]';
+  }
+
+  async clickApproveButton(): Promise<void> {
+    console.log('Click Approve Button');
+    await this.driver.clickElement(this.submitButton);
+  }
+}
+
+export default Notification;

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

@@ -0,0 +1,59 @@
+import { Driver } from '../../../webdriver/driver';
+
+class SelectNetwork {
+  private driver: Driver;
+
+  private networkName: string | undefined;
+
+  private addNetworkButton: object;
+
+  private closeButton: string;
+
+  private toggleButton: string;
+
+  private searchInput: string;
+
+  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> {
+    console.log(`Click ${networkName}`);
+    this.networkName = `[data-testid="${networkName}"]`;
+    await this.driver.clickElement(this.networkName);
+  }
+
+  async addNewNetwork(): Promise<void> {
+    console.log('Click Add network');
+    await this.driver.clickElement(this.addNetworkButton);
+  }
+
+  async clickCloseButton(): Promise<void> {
+    console.log('Click Close Button');
+    await this.driver.clickElement(this.closeButton);
+  }
+
+  async clickToggleButton(): Promise<void> {
+    console.log('Click Toggle Button');
+    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');
+    await this.driver.clickElement('[data-testid="test-add-button"]');
+  }
+}
+
+export default SelectNetwork;

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

@@ -17,6 +17,8 @@ class HeaderNavbar {
 
   private readonly settingsButton = '[data-testid="global-menu-settings"]';
 
+  private readonly switchNetworkDropDown = '[data-testid="network-display"]';
+
   constructor(driver: Driver) {
     this.driver = driver;
   }
@@ -63,6 +65,20 @@ class HeaderNavbar {
     await this.driver.clickElement(this.settingsButton);
   }
 
+  async clickSwitchNetworkDropDown(): Promise<void> {
+    console.log(`Click switch network menu`);
+    await this.driver.clickElement(this.switchNetworkDropDown);
+  }
+
+  async check_networkNameSwitchDropDown(networkName: string): Promise<boolean> {
+    console.log(`Validate the Switch network to ${networkName}`);
+    const switchNetworkName = await this.driver.findElements({
+      tag: 'span',
+      text: networkName,
+    });
+    return switchNetworkName.length === 1;
+  }
+
   /**
    * Verifies that the displayed account label in header matches the expected label.
    *

test/e2e/tests/network/switch-network.spec.ts

@@ -0,0 +1,66 @@
+import { Suite } from 'mocha';
+import { Driver } from '../../webdriver/driver';
+import { withFixtures, defaultGanacheOptions } from '../../helpers';
+import FixtureBuilder from '../../fixture-builder';
+import { Ganache } from '../../seeder/ganache';
+import { loginWithBalanceValidation } from '../../page-objects/flows/login.flow';
+import HomePage from '../../page-objects/pages/homepage';
+import Notification from '../../page-objects/pages/dialog/notification';
+import HeaderNavbar from '../../page-objects/pages/header-navbar';
+import SelectNetwork from '../../page-objects/pages/dialog/select-network';
+
+describe('Switch network - ', function (this: Suite) {
+  it('Ethereum Mainnet and Sepolia', async function () {
+    await withFixtures(
+      {
+        fixtures: new FixtureBuilder().build(),
+        ganacheOptions: defaultGanacheOptions,
+        title: this.test?.fullTitle(),
+      },
+      async ({
+        driver,
+        ganacheServer,
+      }: {
+        driver: Driver;
+        ganacheServer?: Ganache;
+      }) => {
+        await loginWithBalanceValidation(driver, ganacheServer);
+        const homePage = new HomePage(driver);
+        const headerNavbar = new HeaderNavbar(driver);
+        const selectNetwork = new SelectNetwork(driver);
+        const notification = new Notification(driver);
+
+        // Validate the default network is Localhost 8545
+        await headerNavbar.check_networkNameSwitchDropDown('Localhost 8545');
+
+        // Validate the switch network functionality to Ethereum Mainnet
+        await headerNavbar.clickSwitchNetworkDropDown();
+        await selectNetwork.clickNetworkName('Ethereum Mainnet');
+        await homePage.check_expectedBalanceIsDisplayed('25');
+        await headerNavbar.check_networkNameSwitchDropDown('Ethereum Mainnet');
+        // Validate the switch network functionality to test network Sepolia
+        await headerNavbar.clickSwitchNetworkDropDown();
+        await selectNetwork.clickToggleButton();
+        await selectNetwork.clickNetworkName('Sepolia');
+        await homePage.check_expectedBalanceIsDisplayed('25 Sepolia');
+        await headerNavbar.check_networkNameSwitchDropDown('Sepolia');
+
+        // Add Aribtrum network and perform the switch network functionality
+        await headerNavbar.clickSwitchNetworkDropDown();
+        await selectNetwork.fillNetworkSearchInput('Arbitrum One');
+        await selectNetwork.clickAddButton();
+        await notification.clickApproveButton();
+        await headerNavbar.clickSwitchNetworkDropDown();
+        await selectNetwork.clickNetworkName('Arbitrum One');
+        await homePage.check_expectedBalanceIsDisplayed('25');
+        await headerNavbar.check_networkNameSwitchDropDown('Arbitrum One');
+
+        // Validate the switch network functionality back to Ethereum Mainnet
+        await headerNavbar.clickSwitchNetworkDropDown();
+        await selectNetwork.clickNetworkName('Ethereum Mainnet');
+        await homePage.check_expectedBalanceIsDisplayed('25');
+        await headerNavbar.check_networkNameSwitchDropDown('Ethereum Mainnet');
+      },
+    );
+  });
+});