Merge pull request #191 from lidofinance/add-network-to-wallet

QA-2690 Fixes to L2 unsupported banner testing

packages/wallets/src/metamask/metamask.page.ts

@@ -7,7 +7,6 @@ import {
   OnboardingPage,
   WalletOperationPage,
   Header,
-  NetworkList,
   OptionsMenu,
   PopoverElements,
   AccountMenu,
@@ -21,7 +20,6 @@ export class MetamaskPage implements WalletPage {
   loginPage: LoginPage;
   walletOperation: WalletOperationPage;
   onboardingPage: OnboardingPage;
-  networkList: NetworkList;
   optionsMenu: OptionsMenu;
   popoverElements: PopoverElements;
   accountMenu: AccountMenu;
@@ -44,7 +42,6 @@ export class MetamaskPage implements WalletPage {
     this.loginPage = new LoginPage(this.page, this.config);
     this.walletOperation = new WalletOperationPage(this.page);
     this.onboardingPage = new OnboardingPage(this.page, this.config);
-    this.networkList = new NetworkList(this.page);
     this.optionsMenu = new OptionsMenu(this.page);
     this.popoverElements = new PopoverElements(this.page);
     this.accountMenu = new AccountMenu(this.page);
@@ -80,7 +77,7 @@ export class MetamaskPage implements WalletPage {
     await test.step(`Change Metamask network to ${networkName}`, async () => {
       await this.navigate();
       await this.header.networkListButton.click();
-      await this.networkList.clickToNetwork(networkName);
+      await this.header.networkList.clickToNetwork(networkName);
       if (networkName === 'Linea Mainnet') {
         await this.popoverElements.closePopover(); //Linea network require additional confirmation
       }
@@ -91,24 +88,26 @@ export class MetamaskPage implements WalletPage {
   async switchNetwork(networkName = 'Linea Mainnet') {
     await test.step(`Switch network to "${networkName}"`, async () => {
       await this.navigate();
-      await this.header.networkSetting.switchNetwork(networkName);
+      await this.header.networkList.switchNetwork(networkName);
       await this.page.close();
     });
   }
 
   async setupNetwork(standConfig: Record<string, any>) {
     await test.step(`Setup "${standConfig.chainName}" Network`, async () => {
-      await this.header.networkSetting.networkListButton.click();
+      await this.header.networkListButton.click();
       if (
-        await this.header.networkSetting.isNetworkExist(
+        await this.header.networkList.isNetworkExist(
           standConfig.chainName,
           standConfig.rpcUrl,
           standConfig.chainId,
         )
       ) {
-        await this.networkList.clickToNetworkItemButton(standConfig.chainName);
+        await this.header.networkList.clickToNetworkItemButton(
+          standConfig.chainName,
+        );
       } else {
-        await this.networkList.networkDisplayCloseBtn.click();
+        await this.header.networkList.networkDisplayCloseBtn.click();
         await this.addNetwork(
           standConfig.chainName,
           standConfig.rpcUrl,
@@ -126,18 +125,36 @@ export class MetamaskPage implements WalletPage {
     chainId: number,
     tokenSymbol: string,
     blockExplorer = '',
+    isClosePage = false,
   ) {
     await test.step(`Add new network "${networkName}"`, async () => {
-      await this.header.networkSetting.addNetworkManually(
+      await this.navigate();
+      await this.header.networkList.addNetworkManually(
         networkName,
         networkUrl,
         chainId,
         tokenSymbol,
         blockExplorer,
       );
+      if (isClosePage) await this.page.close();
     });
   }
 
+  async addPopularNetwork(networkName: string) {
+    await this.navigate();
+    await this.header.networkListButton.click();
+    const networkListText = await this.header.networkList.getNetworkListText();
+    if (networkListText.includes(networkName)) {
+      await this.header.networkList.clickToNetworkItemButton(networkName);
+    } else {
+      await test.step(`Add popular network "${networkName}"`, async () => {
+        await this.header.networkList.networkDisplayCloseBtn.click();
+        await this.header.networkList.addPopularNetwork(networkName);
+      });
+    }
+    await this.page.close();
+  }
+
   async importKey(key: string) {
     await test.step('Import key', async () => {
       await this.navigate();

packages/wallets/src/metamask/pages/elements/header.element.ts

@@ -1,8 +1,10 @@
 import { Locator, Page, test } from '@playwright/test';
 import { NetworkSetting } from './networkSetting.element';
+import { NetworkList } from './networkList.element';
 
 export class Header {
   page: Page;
+  networkList: NetworkList;
   networkSetting: NetworkSetting;
   accountMenuButton: Locator;
   networkListButton: Locator;
@@ -11,7 +13,8 @@ export class Header {
 
   constructor(page: Page) {
     this.page = page;
-    this.networkSetting = new NetworkSetting(page);
+    this.networkList = new NetworkList(this.page);
+    this.networkSetting = new NetworkSetting(this.page);
     this.accountMenuButton = this.page.getByTestId('account-menu-icon');
     this.networkListButton = this.page.getByTestId('network-display');
     this.optionsMenuButton = this.page.getByTestId(

packages/wallets/src/metamask/pages/elements/networkList.element.ts

@@ -1,29 +1,52 @@
 import { Locator, Page, test } from '@playwright/test';
+import { NetworkSetting } from './networkSetting.element';
 
 export class NetworkList {
   page: Page;
-  networkDisplayDialog: Locator;
+  networkSetting: NetworkSetting;
+
+  networkListButton: Locator;
+  dialogSection: Locator;
+  addCustomNetworkButton: Locator;
   networkDisplayCloseBtn: Locator;
   networkItemBtn: Locator;
   networkItemText: Locator;
+  editNetworkButton: Locator;
+  approveAddNetworkButton: Locator;
 
   constructor(page: Page) {
     this.page = page;
-    this.networkDisplayDialog = this.page.getByRole('dialog');
-    this.networkDisplayCloseBtn = this.networkDisplayDialog
+    this.networkSetting = new NetworkSetting(this.page);
+
+    this.networkListButton = this.page.getByTestId('network-display');
+    this.dialogSection = this.page.getByRole('dialog');
+    this.addCustomNetworkButton = this.dialogSection
+      .getByRole('button')
+      .getByText('Add a custom network');
+    this.networkDisplayCloseBtn = this.dialogSection
       .locator('[aria-label="Close"]')
       .first();
-    this.networkItemBtn =
-      this.networkDisplayDialog.locator('div[role="button"]');
+    this.networkItemBtn = this.dialogSection.locator('div[role="button"]');
     this.networkItemText = this.networkItemBtn.locator('p');
+    this.editNetworkButton = this.page.getByTestId(
+      'network-list-item-options-edit',
+    );
+    this.approveAddNetworkButton = this.page.getByTestId(
+      'confirmation-submit-button',
+    );
   }
 
   async clickToNetwork(networkName: string) {
     await test.step(`Click to "${networkName}" network`, async () => {
-      await this.networkDisplayDialog.getByText(networkName).click();
+      await this.dialogSection.getByText(networkName).click();
     });
   }
 
+  async switchNetwork(networkName: string) {
+    await this.networkListButton.click();
+    await this.dialogSection.getByText(networkName).click();
+  }
+
   async getNetworkListText() {
     return await test.step('Get network list', async () => {
       const networkList = await this.networkItemText.all();
@@ -40,4 +63,84 @@ export class NetworkList {
       await this.networkItemBtn.getByText(chainName).click();
     });
   }
+
+  async openModalNetworkEdit(chainId: any) {
+    await this.dialogSection
+      .getByTestId(`network-list-item-options-button-0x${chainId.toString(16)}`)
+      .click();
+    await this.editNetworkButton.click();
+  }
+
+  async isNetworkExist(
+    networkName: string,
+    rpcUrl: string,
+    chainId: number,
+  ): Promise<boolean> {
+    const existNetworkByName = this.dialogSection.getByTestId(networkName);
+    if (await existNetworkByName.isHidden()) {
+      return false;
+    }
+    // that locator exists only for added networks
+    const elements = this.page.getByTestId(
+      `network-rpc-name-button-0x${chainId.toString(16)}`,
+    );
+    const rpcUrlsFound = await elements.filter({ hasText: rpcUrl }).count();
+
+    if (rpcUrlsFound == 0) return false;
+    return true;
+  }
+
+  async addNetworkManually(
+    networkName: string,
+    networkUrl: string,
+    chainId: number,
+    tokenSymbol: string,
+    blockExplorer = '',
+  ) {
+    await test.step('Open the form to add network manually', async () => {
+      await this.networkListButton.click();
+    });
+
+    if (await this.dialogSection.getByText(networkName).isVisible()) {
+      await this.openModalNetworkEdit(chainId);
+      await this.networkSetting.addRpcForNetwork(networkUrl, blockExplorer);
+    } else {
+      await test.step('Add custom network', async () => {
+        await this.addCustomNetworkButton.click();
+      });
+      await this.networkSetting.addCustomNetwork(
+        networkName,
+        networkUrl,
+        chainId,
+        tokenSymbol,
+        blockExplorer,
+      );
+    }
+  }
+
+  async addPopularNetwork(networkName: string) {
+    await test.step(`Open the form to add the popular network (${networkName})`, async () => {
+      await this.networkListButton.click();
+    });
+    await test.step(`Add the "${networkName}" network`, async () => {
+      await this.dialogSection
+        .getByText(networkName)
+        .locator('../../..')
+        .locator('button:has-text("Add")')
+        .click();
+      // Without awaiting the button is not clickable
+      await this.page.waitForTimeout(500);
+      await this.approveAddNetworkButton.click();
+      await this.dialogSection.waitFor({ state: 'hidden' });
+      // Need to wait while the network to be added to the wallet
+      try {
+        await this.page
+          .getByText('Connecting to')
+          .waitFor({ state: 'visible', timeout: 5000 });
+        await this.page.getByText('Connecting to').waitFor({ state: 'hidden' });
+      } catch {
+        console.error('Connecting network was without loader');
+      }
+    });
+  }
 }