✨ feat: Cypress: switchNetwork and switchAccount functions (#1185)

* feat: MetaMask setup in Cypress part 1

* feat: wallet setup is working as expected

* fix: gitignore cleanup

* fix: clean imports

* fix: export from metamask package

* fix: dependencies issues

* fix: cleanup

* fix: test scripts

* fix: format

* fix: renamed configureBeforeSynpress.ts to configureSynpress.ts

* fix: improve metamask/cypress stability

* fix: format

* fix: cleanup

* feat: Implemented getPlaywrightMetamask and addNewAccount

* fix: cleanup

* feat: Implemented switchNetwork and switchAccount for Cypress

* feat: Added renameAccount for Cypress (#1187)

wallets/metamask/src/cypress/configureSynpress.ts

@@ -1,6 +1,7 @@
 import type { BrowserContext, Page } from '@playwright/test'
 import { expect } from '@playwright/test'
 import { ensureRdpPort } from '@synthetixio/synpress-core'
+import Selectors from '../selectors/pages/HomePage'
 import getPlaywrightMetamask from './getPlaywrightMetamask'
 import importMetaMaskWallet from './support/importMetaMaskWallet'
 import { initMetaMask } from './support/initMetaMask'
@@ -61,11 +62,23 @@ export default function configureSynpress(on: Cypress.PluginEvents, config: Cypr
 
   on('task', {
     // Synpress API
-    async connectToDapp() {
+    async getAccount() {
+      const metamask = getPlaywrightMetamask(context, metamaskExtensionPage, metamaskExtensionId)
+
+      return await metamaskExtensionPage.locator(metamask.homePage.selectors.accountMenu.accountButton).innerText()
+    },
+
+    async getNetwork() {
+      const metamask = getPlaywrightMetamask(context, metamaskExtensionPage, metamaskExtensionId)
+
+      return await metamaskExtensionPage.locator(metamask.homePage.selectors.currentNetwork).innerText()
+    },
+
+    async connectToDapp(accounts?: string[]) {
       const metamask = getPlaywrightMetamask(context, metamaskExtensionPage, metamaskExtensionId)
 
       return metamask
-        .connectToDapp()
+        .connectToDapp(accounts)
         .then(() => true)
         .catch(() => false)
     },
@@ -82,10 +95,55 @@ export default function configureSynpress(on: Cypress.PluginEvents, config: Cypr
       return true
     },
 
-    async getAccount() {
+    async switchAccount(accountName: string) {
       const metamask = getPlaywrightMetamask(context, metamaskExtensionPage, metamaskExtensionId)
 
-      return await metamaskExtensionPage.locator(metamask.homePage.selectors.accountMenu.accountButton).innerText()
+      await metamask.switchAccount(accountName)
+
+      await expect(metamaskExtensionPage.locator(metamask.homePage.selectors.accountMenu.accountButton)).toHaveText(
+        accountName
+      )
+
+      return true
+    },
+
+    async renameAccount({
+      currentAccountName,
+      newAccountName
+    }: {
+      currentAccountName: string
+      newAccountName: string
+    }) {
+      const metamask = getPlaywrightMetamask(context, metamaskExtensionPage, metamaskExtensionId)
+
+      await metamask.renameAccount(currentAccountName, newAccountName)
+
+      await metamaskExtensionPage.locator(Selectors.threeDotsMenu.accountDetailsCloseButton).click()
+
+      await expect(metamaskExtensionPage.locator(metamask.homePage.selectors.accountMenu.accountButton)).toHaveText(
+        newAccountName
+      )
+
+      return true
+    },
+
+    async switchNetwork({
+      networkName,
+      isTestnet
+    }: {
+      networkName: string
+      isTestnet?: boolean
+    }) {
+      const metamask = getPlaywrightMetamask(context, metamaskExtensionPage, metamaskExtensionId)
+
+      return await metamask
+        .switchNetwork(networkName, isTestnet)
+        .then(() => {
+          return true
+        })
+        .catch(() => {
+          return false
+        })
     }
   })
 

wallets/metamask/src/cypress/constans.ts

@@ -0,0 +1 @@
+export const defaultAccount = 'Account 1'

wallets/metamask/src/cypress/support/synpressCommands.ts

@@ -12,21 +12,41 @@
 declare global {
   namespace Cypress {
     interface Chainable {
-      connectToDapp(): Chainable<void>
-      addNewAccount(accountName: string): Chainable<void>
       getAccount(): Chainable<string>
+      getNetwork(): Chainable<string>
+
+      connectToDapp(accounts?: string[]): Chainable<void>
+
+      addNewAccount(accountName: string): Chainable<void>
+      switchAccount(accountName: string): Chainable<void>
+      renameAccount(currentAccountName: string, newAccountName: string): Chainable<void>
+
+      switchNetwork(networkName: string, isTestnet?: boolean): Chainable<void>
     }
   }
 }
 
 export default function synpressCommands() {
+  Cypress.Commands.add('getAccount', () => {
+    return cy.task('getAccount')
+  })
+  Cypress.Commands.add('getNetwork', () => {
+    return cy.task('getNetwork')
+  })
+
   Cypress.Commands.add('connectToDapp', () => {
     return cy.task('connectToDapp')
   })
   Cypress.Commands.add('addNewAccount', (accountName: string) => {
     return cy.task('addNewAccount', accountName)
   })
-  Cypress.Commands.add('getAccount', () => {
-    return cy.task('getAccount')
+  Cypress.Commands.add('switchAccount', (accountName: string) => {
+    return cy.task('switchAccount', accountName)
+  })
+  Cypress.Commands.add('renameAccount', (currentAccountName: string, newAccountName: string) => {
+    return cy.task('renameAccount', { currentAccountName, newAccountName })
+  })
+  Cypress.Commands.add('switchNetwork', (networkName: string, isTestnet = false) => {
+    return cy.task('switchNetwork', { networkName, isTestnet })
   })
 }

wallets/metamask/src/playwright/MetaMask.ts

@@ -81,10 +81,11 @@ export class MetaMask extends MetaMaskAbstract {
   /**
    * Renames the currently selected account.
    *
+   * @param currentAccountName - The current account name.
    * @param newAccountName - The new name for the account.
    */
-  async renameAccount(newAccountName: string) {
-    await this.homePage.renameAccount(newAccountName)
+  async renameAccount(currentAccountName: string, newAccountName: string) {
+    await this.homePage.renameAccount(currentAccountName, newAccountName)
   }
 
   /**

wallets/metamask/src/playwright/pages/HomePage/actions/renameAccount.ts

@@ -1,9 +1,26 @@
 import type { Page } from '@playwright/test'
 import Selectors from '../../../../selectors/pages/HomePage'
+import { allTextContents } from '../../../utils/allTextContents'
 
-export async function renameAccount(page: Page, newAccountName: string) {
+export async function renameAccount(page: Page, currentAccountName: string, newAccountName: string) {
   await page.locator(Selectors.accountMenu.accountButton).click()
-  await page.locator(Selectors.accountMenu.renameAccountMenu.listItemButton).nth(0).click()
+
+  const accountNamesLocators = await page.locator(Selectors.accountMenu.accountNames).all()
+
+  const accountNames = await allTextContents(accountNamesLocators)
+
+  const seekedAccountNames = accountNames.filter(
+    (name) => name.toLocaleLowerCase() === currentAccountName.toLocaleLowerCase()
+  )
+
+  if (seekedAccountNames.length === 0) {
+    throw new Error(`[SwitchAccount] Account with name ${currentAccountName} not found`)
+  }
+
+  // biome-ignore lint/style/noNonNullAssertion: this non-null assertion is intentional
+  const accountIndex = accountNames.indexOf(seekedAccountNames[0]!)
+
+  await page.locator(Selectors.accountMenu.renameAccountMenu.listItemButton).nth(accountIndex).click()
   await page.locator(Selectors.threeDotsMenu.accountDetailsButton).click()
   await page.locator(Selectors.accountMenu.renameAccountMenu.renameButton).click()
   await page.locator(Selectors.accountMenu.renameAccountMenu.renameInput).fill(newAccountName)

wallets/metamask/src/playwright/pages/HomePage/page.ts

@@ -38,8 +38,8 @@ export class HomePage {
     await addNewAccount(this.page, accountName)
   }
 
-  async renameAccount(newAccountName: string) {
-    await renameAccount(this.page, newAccountName)
+  async renameAccount(currentAccountName: string, newAccountName: string) {
+    await renameAccount(this.page, currentAccountName, newAccountName)
   }
 
   async getAccountAddress() {

wallets/metamask/test/cypress/renameAccount.cy.ts

@@ -0,0 +1,15 @@
+import { defaultAccount } from '../../src/cypress/constans'
+
+const newAccountName = 'New Test Account Name'
+
+it('should rename currently connected account with specified name', () => {
+  cy.addNewAccount(newAccountName).then(() => {
+    cy.renameAccount(newAccountName, 'Renaming test').then(() => {
+      cy.getAccount().should('eq', 'Renaming test')
+    })
+  })
+})
+
+after(() => {
+  cy.switchAccount(defaultAccount)
+})

wallets/metamask/test/cypress/switchAccount.cy.ts

@@ -0,0 +1,13 @@
+import { defaultAccount } from '../../src/cypress/constans'
+
+it('should switch back to the `Account 1` account', () => {
+  const accountName = 'New Account to test switch'
+
+  cy.addNewAccount(accountName).then(() => {
+    cy.getAccount().should('eq', accountName)
+  })
+})
+
+after(() => {
+  cy.switchAccount(defaultAccount)
+})

wallets/metamask/test/cypress/switchNetwork.cy.ts

@@ -0,0 +1,21 @@
+it('should switch network', () => {
+  cy.getNetwork().should('eq', 'Ethereum Mainnet')
+
+  const targetNetwork = 'Linea Mainnet'
+  cy.switchNetwork(targetNetwork).then(() => {
+    cy.getNetwork().should('eq', targetNetwork)
+  })
+})
+
+it('should switch network to the testnet', () => {
+  cy.getNetwork().should('eq', 'Ethereum Mainnet')
+
+  const targetNetwork = 'Sepolia'
+  cy.switchNetwork(targetNetwork, true).then(() => {
+    cy.getNetwork().should('eq', targetNetwork)
+  })
+})
+
+afterEach(() => {
+  cy.switchNetwork('Ethereum Mainnet')
+})

wallets/metamask/test/playwright/e2e/renameAccount.spec.ts

@@ -11,7 +11,7 @@ test('should rename current account with specified name', async ({ context, meta
   const metamask = new MetaMask(context, metamaskPage, basicSetup.walletPassword)
 
   const accountName = 'Test Account'
-  await metamask.renameAccount(accountName)
+  await metamask.renameAccount('Account 1', accountName)
 
   await expect(metamaskPage.locator(metamask.homePage.selectors.accountMenu.accountButton)).toHaveText(accountName)
 })