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'
@@ -73,11 +74,11 @@ export default function configureSynpress(on: Cypress.PluginEvents, config: Cypr
       return await metamaskExtensionPage.locator(metamask.homePage.selectors.currentNetwork).innerText()
     },
 
-    async connectToDapp() {
+    async connectToDapp(accounts?: string[]) {
       const metamask = getPlaywrightMetamask(context, metamaskExtensionPage, metamaskExtensionId)
 
       return metamask
-        .connectToDapp()
+        .connectToDapp(accounts)
         .then(() => true)
         .catch(() => false)
     },
@@ -106,6 +107,26 @@ export default function configureSynpress(on: Cypress.PluginEvents, config: Cypr
       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

wallets/metamask/src/cypress/constans.ts

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

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

@@ -15,9 +15,12 @@ declare global {
       getAccount(): Chainable<string>
       getNetwork(): Chainable<string>
 
-      connectToDapp(): Chainable<void>
+      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>
     }
   }
@@ -40,6 +43,9 @@ export default function synpressCommands() {
   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

@@ -1,11 +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)
-
-    cy.switchAccount('Account 1').then(() => {
-      cy.getAccount().should('eq', 'Account 1')
-    })
   })
 })
+
+after(() => {
+  cy.switchAccount(defaultAccount)
+})

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

@@ -8,10 +8,14 @@ it('should switch network', () => {
 })
 
 it('should switch network to the testnet', () => {
-  cy.getNetwork().should('eq', 'Linea Mainnet')
+  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)
 })