Cherry pick E2E changes

test/e2e/page-objects/pages/account-list-page.ts

@@ -7,6 +7,9 @@ class AccountListPage {
   private readonly accountListBalance =
     '[data-testid="second-currency-display"]';
 
+  private readonly accountValueAndSuffix =
+    '[data-testid="account-value-and-suffix"]';
+
   private readonly accountListItem =
     '.multichain-account-menu-popover__list--menu-item';
 
@@ -313,6 +316,23 @@ class AccountListPage {
     await this.driver.clickElement(this.pinUnpinAccountButton);
   }
 
+  /**
+   * Checks that the account value and suffix is displayed in the account list.
+   *
+   * @param expectedValueAndSuffix - The expected value and suffix to check.
+   */
+  async check_accountValueAndSuffixDisplayed(
+    expectedValueAndSuffix: string,
+  ): Promise<void> {
+    console.log(
+      `Check that account value and suffix ${expectedValueAndSuffix} is displayed in account list`,
+    );
+    await this.driver.waitForSelector({
+      css: this.accountValueAndSuffix,
+      text: expectedValueAndSuffix,
+    });
+  }
+
   /**
    * Checks that the account balance is displayed in the account list.
    *

test/e2e/page-objects/pages/asset-list.ts

@@ -0,0 +1,158 @@
+import { Driver } from '../../webdriver/driver';
+
+class AssetListPage {
+  private readonly driver: Driver;
+
+  // Selectors
+
+  private readonly networksToggle = '[data-testid="network-filter"]';
+
+  private readonly allNetworksOption = '[data-testid="all-networks__button"]';
+
+  private readonly currentNetworkOption =
+    '[data-testid="current-network__button"]';
+
+  private readonly allNetworksTotal =
+    '[data-testid="network-filter-all__total"]';
+
+  private readonly currentNetworksTotal = `${this.currentNetworkOption} [data-testid="account-value-and-suffix"]`;
+
+  constructor(driver: Driver) {
+    this.driver = driver;
+  }
+
+  async openNetworksFilter(): Promise<void> {
+    console.log(`Opening the network filter`);
+    await this.driver.clickElement(this.networksToggle);
+
+    await this.driver.waitForSelector(this.allNetworksOption, {
+      timeout: 5000,
+    });
+  }
+
+  async getNetworksFilterLabel(): Promise<string> {
+    console.log(`Retrieving the network filter label`);
+    const toggle = await this.driver.findElement(this.networksToggle);
+    const text = await toggle.getText();
+    return text;
+  }
+
+  async clickCurrentNetworkOption(): Promise<void> {
+    console.log(`Clicking on the current network option`);
+    await this.driver.clickElement(this.currentNetworkOption);
+
+    await this.driver.waitUntil(
+      async () => {
+        const label = await this.getNetworksFilterLabel();
+        return label !== 'All networks';
+      },
+      { timeout: 5000, interval: 100 },
+    );
+  }
+
+  async waitUntilAssetListHasItems(expectedItemsCount: number): Promise<void> {
+    console.log(`Waiting until the asset list has ${expectedItemsCount} items`);
+    await this.driver.waitUntil(
+      async () => {
+        const items = await this.getNumberOfAssets();
+        return items === expectedItemsCount;
+      },
+      { timeout: 5000, interval: 100 },
+    );
+  }
+
+  async waitUntilFilterLabelIs(label: string): Promise<void> {
+    console.log(`Waiting until the filter label is ${label}`);
+    await this.driver.waitUntil(
+      async () => {
+        const currentLabel = await this.getNetworksFilterLabel();
+        return currentLabel === label;
+      },
+      { timeout: 5000, interval: 100 },
+    );
+  }
+
+  async getAllNetworksOptionTotal(): Promise<string> {
+    console.log(`Retrieving the "All networks" option fiat value`);
+    const allNetworksValueElement = await this.driver.findElement(
+      this.allNetworksTotal,
+    );
+    const value = await allNetworksValueElement.getText();
+    return value;
+  }
+
+  async clickOnAsset(assetName: string): Promise<void> {
+    const buttons = await this.driver.findElements(
+      '[data-testid="multichain-token-list-button"]',
+    );
+
+    for (const button of buttons) {
+      const text = await button.getText();
+      if (text.includes(assetName)) {
+        await button.click();
+        return;
+      }
+    }
+
+    throw new Error(`${assetName} button not found`);
+  }
+
+  async getCurrentNetworksOptionTotal(): Promise<string> {
+    console.log(`Retrieving the "Current network" option fiat value`);
+    const allNetworksValueElement = await this.driver.findElement(
+      this.currentNetworksTotal,
+    );
+    const value = await allNetworksValueElement.getText();
+    return value;
+  }
+
+  async selectNetworkFilterAllNetworks(): Promise<void> {
+    console.log(`Selecting "All networks" from the network filter`);
+    await this.driver.clickElement(this.allNetworksOption);
+
+    await this.driver.waitUntil(
+      async () => {
+        const label = await this.getNetworksFilterLabel();
+        return label === 'All networks';
+      },
+      { timeout: 5000, interval: 100 },
+    );
+  }
+
+  async selectNetworkFilterCurrentNetwork(): Promise<void> {
+    console.log(`Selecting "Current network" from the network filter`);
+    await this.driver.clickElement(this.currentNetworkOption);
+
+    await this.driver.waitUntil(
+      async () => {
+        const label = await this.getNetworksFilterLabel();
+        return label !== 'All networks';
+      },
+      { timeout: 5000, interval: 100 },
+    );
+  }
+
+  async getNumberOfAssets(): Promise<number> {
+    console.log(`Returning the total number of asset items in the token list`);
+    const assets = await this.driver.findElements(
+      '.multichain-token-list-item',
+    );
+    return assets.length;
+  }
+
+  // Added method to check if an asset is visible
+  async isAssetVisible(assetName: string): Promise<boolean> {
+    const assets = await this.driver.findElements(
+      '[data-testid="multichain-token-list-button"]',
+    );
+    for (const asset of assets) {
+      const text = await asset.getText();
+      if (text.includes(assetName)) {
+        return true;
+      }
+    }
+    return false;
+  }
+}
+
+export default AssetListPage;

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

@@ -19,6 +19,8 @@ class HeaderNavbar {
 
   private readonly switchNetworkDropDown = '[data-testid="network-display"]';
 
+  private readonly networkFilter = '[data-testid="network-filter"]';
+
   constructor(driver: Driver) {
     this.driver = driver;
   }
@@ -36,6 +38,16 @@ class HeaderNavbar {
     console.log('Header navbar is loaded');
   }
 
+  async checkNetworkFilterText(expectedText: string): Promise<void> {
+    console.log(
+      `Verify the displayed account label in header is: ${expectedText}`,
+    );
+    await this.driver.waitForSelector({
+      css: this.networkFilter,
+      text: expectedText,
+    });
+  }
+
   async lockMetaMask(): Promise<void> {
     await this.openThreeDotMenu();
     await this.driver.clickElement(this.lockMetaMaskButton);

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

@@ -60,6 +60,8 @@ class HomePage {
 
   private readonly nftTab = '[data-testid="account-overview__nfts-tab"]';
 
+  private readonly popoverCloseButton = '[data-testid="popover-close"]';
+
   private readonly successImportNftMessage = {
     text: 'NFT was successfully added!',
     tag: 'h6',
@@ -70,6 +72,11 @@ class HomePage {
     this.headerNavbar = new HeaderNavbar(driver);
   }
 
+  async closePopover(): Promise<void> {
+    console.log('Closing popover');
+    await this.driver.clickElement(this.popoverCloseButton);
+  }
+
   async check_pageIsLoaded(): Promise<void> {
     try {
       await this.driver.waitForMultipleSelectors([
@@ -239,24 +246,27 @@ class HomePage {
    * Checks if the expected balance is displayed on homepage.
    *
    * @param expectedBalance - The expected balance to be displayed. Defaults to '0'.
+   * @param symbol - The symbol of the currency or token. Defaults to 'ETH'.
+   *
    */
   async check_expectedBalanceIsDisplayed(
     expectedBalance: string = '0',
+    symbol: string = 'ETH',
   ): Promise<void> {
     try {
       await this.driver.waitForSelector({
         css: this.balance,
-        text: `${expectedBalance} ETH`,
+        text: expectedBalance,
       });
     } catch (e) {
       const balance = await this.driver.waitForSelector(this.balance);
       const currentBalance = parseFloat(await balance.getText());
-      const errorMessage = `Expected balance ${expectedBalance} ETH, got balance ${currentBalance} ETH`;
+      const errorMessage = `Expected balance ${expectedBalance} ${symbol}, got balance ${currentBalance} ${symbol}`;
       console.log(errorMessage, e);
       throw e;
     }
     console.log(
-      `Expected balance ${expectedBalance} ETH is displayed on homepage`,
+      `Expected balance ${expectedBalance} ${symbol} is displayed on homepage`,
     );
   }
 

test/e2e/page-objects/pages/send/send-token-page.ts

@@ -1,4 +1,5 @@
 import { strict as assert } from 'assert';
+import { WebElement } from 'selenium-webdriver';
 import { Driver } from '../../../webdriver/driver';
 
 class SendTokenPage {
@@ -11,6 +12,13 @@ class SendTokenPage {
     tag: 'button',
   };
 
+  private readonly cancelButton = {
+    text: 'Cancel',
+    tag: 'button',
+  };
+
+  private readonly assetValue = '[data-testid="account-value-and-suffix"]';
+
   private readonly ensAddressAsRecipient = '[data-testid="ens-input-selected"]';
 
   private readonly ensResolvedName =
@@ -30,10 +38,22 @@ class SendTokenPage {
   private readonly tokenListButton =
     '[data-testid="multichain-token-list-button"]';
 
+  private readonly toastText = '.toast-text';
+
   constructor(driver: Driver) {
     this.driver = driver;
   }
 
+  async check_networkChange(networkName: string): Promise<void> {
+    const toastTextElement = await this.driver.findElement(this.toastText);
+    const toastText = await toastTextElement.getText();
+    assert.equal(
+      toastText,
+      `You're now using ${networkName}`,
+      'Toast text is correct',
+    );
+  }
+
   async check_pageIsLoaded(): Promise<void> {
     try {
       await this.driver.waitForMultipleSelectors([
@@ -50,6 +70,27 @@ class SendTokenPage {
     console.log('Send token screen is loaded');
   }
 
+  async getAssetPickerItems(): Promise<WebElement[]> {
+    console.log('Retrieving asset picker items');
+    return this.driver.findElements(this.tokenListButton);
+  }
+
+  async checkAccountValueAndSuffix(value: string): Promise<void> {
+    console.log(`Checking if account value and suffix is ${value}`);
+    const element = await this.driver.waitForSelector(this.assetValue);
+    const text = await element.getText();
+    assert.equal(
+      text,
+      value,
+      `Expected account value and suffix to be ${value}, got ${text}`,
+    );
+    console.log(`Account value and suffix is ${value}`);
+  }
+
+  async clickCancelButton(): Promise<void> {
+    await this.driver.clickElement(this.cancelButton);
+  }
+
   async clickAssetPickerButton() {
     await this.driver.clickElement(this.assetPickerButton);
   }