test: Swap e2e tests improvements

.circleci/config.yml

@@ -236,6 +236,9 @@ workflows:
       - test-e2e-mmi-playwright - OPTIONAL:
           requires:
             - prep-build-test-mmi-playwright
+      - test-e2e-swap-playwright - OPTIONAL:
+          requires:
+            - prep-build
       - test-e2e-chrome-rpc-mmi:
           requires:
             - prep-build-test-mmi

playwright.config.ts

@@ -71,6 +71,7 @@ const config: PlaywrightTestConfig = {
         ...devices['Desktop Chrome'],
         headless: true,
       },
+      fullyParallel: false,
     },
     // Global: universal, common, shared, and non feature related tests
     {

test/e2e/playwright/shared/pageObjects/network-controller-page.ts

@@ -1,4 +1,5 @@
 import { type Locator, type Page } from '@playwright/test';
+import { Tenderly } from '../../swap/tenderly-network';
 
 export class NetworkController {
   readonly page: Page;
@@ -7,18 +8,12 @@ export class NetworkController {
 
   readonly addNetworkButton: Locator;
 
-  readonly addNetworkManuallyButton: Locator;
-
   readonly approveBtn: Locator;
 
   readonly saveBtn: Locator;
 
-  readonly switchToNetworkBtn: Locator;
-
   readonly gotItBtn: Locator;
 
-  readonly networkSearch: Locator;
-
   readonly networkName: Locator;
 
   readonly networkRpc: Locator;
@@ -27,43 +22,72 @@ export class NetworkController {
 
   readonly networkTicker: Locator;
 
+  readonly dismissBtn: Locator;
+
+  readonly networkList: Locator;
+
+  readonly networkListEdit: Locator;
+
+  readonly rpcName: Locator;
+
+  readonly addRpcDropDown: Locator;
+
+  readonly addRpcURLBtn: Locator;
+
+  readonly addURLBtn: Locator;
+
   constructor(page: Page) {
     this.page = page;
     this.networkDisplay = this.page.getByTestId('network-display');
-    this.addNetworkButton = this.page.getByText('Add network');
-    this.addNetworkManuallyButton = this.page.getByTestId(
-      'add-network-manually',
+    this.networkList = this.page.getByTestId(
+      'network-list-item-options-button-0x1',
+    );
+    this.networkListEdit = this.page.getByTestId(
+      'network-list-item-options-edit',
     );
+    this.addNetworkButton = this.page.getByText('Add a custom network');
+    this.addRpcDropDown = this.page.getByTestId('test-add-rpc-drop-down');
+    this.addRpcURLBtn = this.page.getByRole('button', { name: 'Add RPC URL' });
+    this.addURLBtn = this.page.getByRole('button', { name: 'Add URL' });
     this.saveBtn = this.page.getByRole('button', { name: 'Save' });
     this.approveBtn = this.page.getByTestId('confirmation-submit-button');
-    this.switchToNetworkBtn = this.page.locator('button', {
-      hasText: 'Switch to',
-    });
     this.gotItBtn = this.page.getByRole('button', { name: 'Got it' });
-    this.networkSearch = this.page.locator('input[type="search"]');
     this.networkName = this.page.getByTestId('network-form-network-name');
-    this.networkRpc = this.page.getByTestId('network-form-rpc-url');
+    this.rpcName = this.page.getByTestId('rpc-name-input-test');
+    this.networkRpc = this.page.getByTestId('rpc-url-input-test');
     this.networkChainId = this.page.getByTestId('network-form-chain-id');
     this.networkTicker = this.page.getByTestId('network-form-ticker-input');
+    this.dismissBtn = this.page.getByRole('button', { name: 'Dismiss' });
   }
 
   async addCustomNetwork(options: {
     name: string;
+    rpcName: string;
     url: string;
     chainID: string;
     symbol: string;
   }) {
+    let rpcName = options.name;
     await this.networkDisplay.click();
-    await this.addNetworkButton.click();
-    await this.addNetworkManuallyButton.click();
-
-    await this.networkName.waitFor();
-    await this.networkName.fill(options.name);
+    if (options.name === Tenderly.Mainnet.name) {
+      rpcName = options.rpcName;
+      await this.networkList.click();
+      await this.networkListEdit.click();
+    } else {
+      await this.addNetworkButton.click();
+      await this.networkName.fill(rpcName);
+    }
+    await this.addRpcDropDown.click();
+    await this.addRpcURLBtn.click();
     await this.networkRpc.fill(options.url);
-    await this.networkChainId.fill(options.chainID);
+    await this.rpcName.fill(rpcName);
+    await this.addURLBtn.click();
+    if (options.name !== Tenderly.Mainnet.name) {
+      await this.networkChainId.fill(options.chainID);
+    }
     await this.networkTicker.fill(options.symbol);
-    await this.saveBtn.click();
-    await this.switchToNetworkBtn.click();
+    await this.saveBtn.waitFor({ state: 'visible' });
+    await this.saveBtn.click({ timeout: 60000 });
   }
 
   async addPopularNetwork(options: { networkName: string }) {
@@ -72,13 +96,38 @@ export class NetworkController {
     const addBtn = this.page.getByTestId(`add-network-${options.networkName}`);
     await addBtn.click();
     await this.approveBtn.click();
-    await this.switchToNetworkBtn.click();
     await this.gotItBtn.click();
   }
 
-  async selectNetwork(options: { networkName: string }) {
-    await this.networkDisplay.click();
-    await this.networkSearch.fill(options.networkName);
-    await this.page.getByText(options.networkName).click();
+  async selectNetwork(options: {
+    name: string;
+    rpcName: string;
+    url: string;
+    chainID: string;
+    symbol: string;
+  }) {
+    const currentNetwork = await this.networkDisplay.textContent();
+    if (currentNetwork !== options.name) {
+      await this.networkDisplay.click();
+      if (options.name === Tenderly.Mainnet.name) {
+        await this.page.getByText(options.rpcName).click();
+        await this.page.getByText(options.rpcName).click();
+      } else {
+        await this.page.getByTestId(options.name).click();
+      }
+      await this.waitForNetworkToSwitch(options.name);
+      await this.page.waitForTimeout(5000);
+    }
+  }
+
+  async waitForNetworkToSwitch(networkName: string) {
+    let currentNetwork;
+    do {
+      currentNetwork = await this.networkDisplay.textContent();
+      if (currentNetwork === networkName) {
+        break;
+      }
+      await this.page.waitForTimeout(1000);
+    } while (currentNetwork);
   }
 }

test/e2e/playwright/shared/pageObjects/signup-page.ts

@@ -11,6 +11,10 @@ export class SignUpPage {
 
   readonly importWalletBtn: Locator;
 
+  readonly createWalletBtn: Locator;
+
+  readonly metametricsBtn: Locator;
+
   readonly confirmSecretBtn: Locator;
 
   readonly agreeBtn: Locator;
@@ -21,6 +25,8 @@ export class SignUpPage {
 
   readonly passwordConfirmTxt: Locator;
 
+  readonly createPasswordBtn: Locator;
+
   readonly agreeCheck: Locator;
 
   readonly agreeTandCCheck: Locator;
@@ -35,30 +41,42 @@ export class SignUpPage {
 
   readonly nextBtn: Locator;
 
-  readonly enableButton: Locator;
+  readonly enableBtn: Locator;
+
+  readonly secureWalletBtn: Locator;
+
+  readonly skipBackupBtn: Locator;
+
+  readonly skipSrpBackupBtn: Locator;
 
   constructor(page: Page) {
     this.page = page;
     this.getStartedBtn = page.locator('button:has-text("Get started")');
+    this.createWalletBtn = page.getByTestId('onboarding-create-wallet');
     this.importWalletBtn = page.locator(
       'button:has-text("Import an existing wallet")',
     );
     this.confirmSecretBtn = page.locator(
       'button:has-text("Confirm Secret Recovery Phrase")',
     );
+    this.metametricsBtn = page.getByTestId('metametrics-no-thanks');
     this.agreeBtn = page.locator('button:has-text("I agree")');
+    this.createPasswordBtn = page.getByTestId('create-password-wallet');
     this.noThanksBtn = page.locator('button:has-text("No thanks")');
     this.passwordTxt = page.getByTestId('create-password-new');
     this.passwordConfirmTxt = page.getByTestId('create-password-confirm');
     this.agreeCheck = page.getByTestId('create-new-vault__terms-checkbox');
     this.agreeTandCCheck = page.getByTestId('onboarding-terms-checkbox');
     this.agreePasswordTermsCheck = page.getByTestId('create-password-terms');
+    this.secureWalletBtn = page.getByTestId('secure-wallet-later');
+    this.skipBackupBtn = page.getByTestId('skip-srp-backup-popover-checkbox');
+    this.skipSrpBackupBtn = page.getByTestId('skip-srp-backup');
     this.importBtn = page.getByTestId('create-password-import');
     this.doneBtn = page.getByTestId('pin-extension-done');
     this.gotItBtn = page.getByTestId('onboarding-complete-done');
     this.nextBtn = page.getByTestId('pin-extension-next');
     this.agreeBtn = page.locator('button:has-text("I agree")');
-    this.enableButton = page.locator('button:has-text("Enable")');
+    this.enableBtn = page.locator('button:has-text("Enable")');
   }
 
   async importWallet() {
@@ -81,4 +99,20 @@ export class SignUpPage {
     await this.nextBtn.click();
     await this.doneBtn.click();
   }
+
+  async createWallet() {
+    await this.agreeTandCCheck.click();
+    await this.createWalletBtn.click();
+    await this.metametricsBtn.click();
+    await this.passwordTxt.fill(ACCOUNT_PASSWORD as string);
+    await this.passwordConfirmTxt.fill(ACCOUNT_PASSWORD as string);
+    await this.agreePasswordTermsCheck.click();
+    await this.createPasswordBtn.click();
+    await this.secureWalletBtn.click();
+    await this.skipBackupBtn.click();
+    await this.skipSrpBackupBtn.click();
+    await this.gotItBtn.click();
+    await this.nextBtn.click();
+    await this.doneBtn.click();
+  }
 }

test/e2e/playwright/shared/pageObjects/wallet-page.ts

@@ -13,15 +13,31 @@ export class WalletPage {
 
   readonly tokenTab: Locator;
 
+  readonly accountMenu: Locator;
+
+  readonly addAccountButton: Locator;
+
+  readonly importAccountButton: Locator;
+
+  readonly importAccountConfirmBtn: Locator;
+
   constructor(page: Page) {
     this.page = page;
     this.swapButton = this.page.getByTestId('token-overview-button-swap');
     this.importTokensButton = this.page.getByText('Import tokens').first();
+    this.accountMenu = this.page.getByTestId('account-menu-icon');
+    this.importAccountButton = this.page.getByText('Import account');
     this.importButton = this.page.getByText('Import (');
     this.tokenTab = this.page.getByTestId('account-overview__asset-tab');
+    this.addAccountButton = this.page.getByTestId(
+      'multichain-account-menu-popover-action-button',
+    );
     this.activityListTab = this.page.getByTestId(
       'account-overview__activity-tab',
     );
+    this.importAccountConfirmBtn = this.page.getByTestId(
+      'import-account-confirm-button',
+    );
   }
 
   async importTokens() {
@@ -31,11 +47,21 @@ export class WalletPage {
     await this.importButton.click();
   }
 
+  async importAccount(accountPK: string) {
+    await this.accountMenu.waitFor({ state: 'visible' });
+    await this.accountMenu.click();
+    await this.addAccountButton.click();
+    await this.importAccountButton.click();
+    await this.page.fill('#private-key-box', accountPK);
+    await this.importAccountConfirmBtn.click();
+  }
+
   async selectTokenWallet() {
     await this.tokenTab.click();
   }
 
   async selectSwapAction() {
+    await this.swapButton.waitFor({ state: 'visible' });
     await this.swapButton.click();
   }