Playwright - AddNewAccount & RenameAccount

Author: zgz2020

wallets/phantom/src/playwright/Phantom.ts

@@ -94,15 +94,8 @@ export class Phantom extends PhantomAbstract {
    *
    * @param seedPhrase - The seed phrase to import.
    */
-  async importWallet(
-    seedPhrase: string
-    // keepOpened?: "keepOpened"
-  ): Promise<void> {
-    await this.onboardingPage.importWallet(
-      seedPhrase,
-      this.password
-      //keepOpened
-    )
+  async importWallet(seedPhrase: string): Promise<void> {
+    await this.onboardingPage.importWallet(seedPhrase, this.password)
   }
 
   /**

wallets/phantom/src/playwright/pages/HomePage/actions/addNewAccount.ts

@@ -10,7 +10,8 @@ export async function addNewAccount(page: Page, accountName: string) {
   await page.locator(Selectors.accountMenu.accountButton).click()
 
   await page.locator(Selectors.accountMenu.addAccountMenu.addAccountButton).click()
-  await page.locator(Selectors.accountMenu.addAccountMenu.addNewAccountButton).click()
+
+  await page.locator(Selectors.accountMenu.addAccountMenu.createNewAccountButton).click()
 
   await page.locator(Selectors.accountMenu.addAccountMenu.addNewAccountMenu.accountNameInput).fill(accountName)
 

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

@@ -1,8 +1,13 @@
-import type { Page } from '@playwright/test'
+import { type Page, expect } from '@playwright/test'
 import Selectors from '../../../../selectors/pages/HomePage'
 import { allTextContents } from '../../../utils/allTextContents'
 
 export async function renameAccount(page: Page, currentAccountName: string, newAccountName: string) {
+  // TODO: Use zod to validate this.
+  if (newAccountName.length === 0) {
+    throw new Error('[RenameAccount] Account name cannot be an empty string')
+  }
+
   await page.locator(Selectors.accountMenu.accountButton).click()
 
   const accountNamesLocators = await page.locator(Selectors.accountMenu.accountNames).all()
@@ -17,12 +22,16 @@ export async function renameAccount(page: Page, currentAccountName: string, newA
     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.manageAccountsButton).click()
+
+  await page.locator(Selectors.manageAccountButton(currentAccountName)).click()
+
+  await page.locator(Selectors.editAccountMenu.accountNameButton).click()
+
+  await page.locator(Selectors.accountMenu.addAccountMenu.addNewAccountMenu.accountNameInput).fill(newAccountName)
+
+  await page.locator(Selectors.accountMenu.renameAccountMenu.saveButton).click()
 
-  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)
-  await page.locator(Selectors.accountMenu.renameAccountMenu.confirmRenameButton).click()
+  // Verify that account has been renamed
+  await expect(page.locator(Selectors.editAccountMenu.accountNameButton)).toContainText(newAccountName)
 }

wallets/phantom/src/playwright/pages/OnboardingPage/actions/importWallet.ts

@@ -7,12 +7,7 @@ import Selectors from '../../../../selectors/pages/OnboardingPage'
 // import { closePopover } from "../../HomePage/actions";
 import { confirmSecretRecoveryPhrase, createPassword } from './helpers'
 
-export async function importWallet(
-  page: Page,
-  seedPhrase: string,
-  password: string
-  // keepOpened?: "keepOpened"
-) {
+export async function importWallet(page: Page, seedPhrase: string, password: string) {
   await page.locator(Selectors.GetStartedPageSelectors.importWallet).click()
 
   await page.locator(Selectors.GetStartedPageSelectors.importRecoveryPhraseButton).click()
@@ -33,13 +28,6 @@ export async function importWallet(
     'All Done success screen should be visible'
   ).toBeVisible({ timeout: 10_000 })
 
-  // TESTING WITHOUT HIS
-  // if (!keepOpened) {
-  //   await page
-  //     .locator(Selectors.SecretRecoveryPhrasePageSelectors.continueButton)
-  //     .click();
-  // }
-
   // TO DO !!!!!!
   // await verifyImportedWallet(page);
 }

wallets/phantom/src/playwright/pages/OnboardingPage/page.ts

@@ -12,12 +12,7 @@ export class OnboardingPage {
     this.page = page
   }
 
-  async importWallet(
-    seedPhrase: string,
-    password: string
-    // keepOpened?: "keepOpened"
-  ) {
-    // return await importWallet(this.page, seedPhrase, password, keepOpened);
+  async importWallet(seedPhrase: string, password: string) {
     return await importWallet(this.page, seedPhrase, password)
   }
 }

wallets/phantom/src/selectors/pages/HomePage/index.ts

@@ -1,16 +1,13 @@
 import { createDataTestSelector } from '../../createDataTestSelector'
 import settings from './settings'
 
-const accountMenuContainer = '.multichain-account-menu-popover'
-
 const addNewAccountMenu = {
-  accountNameInput: `${accountMenuContainer} input`,
-  createButton: `${accountMenuContainer} button.mm-button-primary`
+  accountNameInput: `input[placeholder="Name"]`,
+  createButton: `button${createDataTestSelector('primary-button')}:has-text("Create")`
 }
 
 const renameAccountMenu = {
-  listItemButton: `${accountMenuContainer} ${createDataTestSelector('account-list-item-menu-button')}`,
-  renameButton: `${createDataTestSelector('editable-label-button')}`,
+  saveButton: `button${createDataTestSelector('primary-button')}:has-text("Save")`,
   confirmRenameButton: 'div.editable-label button.mm-button-icon',
   renameInput: '.mm-text-field .mm-box--padding-right-4'
 }
@@ -22,38 +19,34 @@ const importAccountMenu = {
   polygonNetwork: `[data-label="Polygon"]`,
   bitcoinNetwork: `[data-label="Bitcoin"]`,
   nameInput: `input[name="name"]`,
-  // privateKeyInput: `${accountMenuContainer} input#private-key-box`,
   privateKeyInput: `textarea[placeholder="Private key"]`,
-  // importButton: `${accountMenuContainer} ${createDataTestSelector(
-  //   "import-account-confirm-button"
-  // )}`,
-  importButton: `button:has-text("Import")`,
-  error: `${accountMenuContainer} p.mm-form-text-field__help-text`
+  importButton: `button:has-text("Import")`
 }
 
 const addAccountMenu = {
-  //data-testid="sidebar_menu-button-add_account"
-  // addAccountButton: `${accountMenuContainer} ${createDataTestSelector(
-  //   "multichain-account-menu-popover-action-button"
-  // )}`,
   addAccountButton: createDataTestSelector('sidebar_menu-button-add_account'),
-  addNewAccountButton: `${accountMenuContainer} ${createDataTestSelector(
-    'multichain-account-menu-popover-add-account'
-  )}`,
-  importAccountButton: `${accountMenuContainer} div.mm-box.mm-box--padding-4:nth-child(2) > div.mm-box:nth-child(2) > button`,
+  createNewAccountButton: createDataTestSelector('add-account-create-new-wallet-button'),
   importAccountPrivateKeyButton: 'text=Import Private Key',
   addNewAccountMenu,
   importAccountMenu
 }
 
+const editAccountMenu = {
+  accountNameButton: `button:has-text("Account Name")`
+}
+
 const accountMenu = {
-  // accountButton: createDataTestSelector('account-menu-icon'),
+  accountName: createDataTestSelector('home-header-account-name'),
   accountButton: createDataTestSelector('settings-menu-open-button'),
-  accountNames: `${accountMenuContainer} .multichain-account-menu-popover__list .multichain-account-list-item__account-name__button`,
+  accountNames: `#accounts [role="button"] > p`,
+  manageAccountsButton: createDataTestSelector('sidebar_menu-button-manage_accounts'),
   addAccountMenu,
   renameAccountMenu
 }
 
+const manageAccountButton = (accountName: string) =>
+  `[role="button"][data-testid="manage-accounts-sortable-${accountName}"]`
+
 const threeDotsMenu = {
   threeDotsButton: createDataTestSelector('account-options-menu-button'),
   settingsButton: createDataTestSelector('global-menu-settings'),
@@ -67,16 +60,6 @@ const popover = {
   closeButton: `${popoverContainer} ${createDataTestSelector('popover-close')}`
 }
 
-const networkAddedPopover = {
-  switchToNetworkButton: '.home__new-network-added__switch-to-button',
-  dismissButton: '.home__new-network-added button.btn-secondary',
-  switchCompleteCloseButton: '.popover-header .box.popover-header__title button.mm-box.mm-button-icon'
-}
-
-const newNetworkInfoPopover = {
-  gotItButton: '.new-network-info__wrapper button.btn-primary'
-}
-
 const recoveryPhraseReminder = {
   gotItButton: '.recovery-phrase-reminder button.btn-primary'
 }
@@ -115,11 +98,11 @@ export default {
   activityTab,
   networkDropdown,
   accountMenu,
+  editAccountMenu,
   recoveryPhraseReminder,
   popover,
-  networkAddedPopover,
-  newNetworkInfoPopover,
   portfolio: {
     singleToken
-  }
+  },
+  manageAccountButton
 }

wallets/phantom/test/playwright/e2e/addNewAccount.spec.ts

@@ -0,0 +1,23 @@
+import { testWithSynpress } from '@synthetixio/synpress-core'
+import { Phantom, phantomFixtures } from '../../../src/playwright'
+
+import basicSetup from '../wallet-setup/basic.setup'
+
+const test = testWithSynpress(phantomFixtures(basicSetup))
+
+const { expect } = test
+
+test('should add a new account with specified name', async ({ context, phantomPage }) => {
+  const phantom = new Phantom(context, phantomPage, basicSetup.walletPassword)
+
+  const accountName = 'Test Account'
+  await phantom.addNewAccount(accountName)
+
+  await expect(phantomPage.locator(phantom.homePage.selectors.accountMenu.accountName)).toHaveText(accountName)
+})
+
+test('should throw an error if an empty account name is passed', async ({ context, phantomPage }) => {
+  const phantom = new Phantom(context, phantomPage, basicSetup.walletPassword)
+
+  await expect(phantom.addNewAccount('')).rejects.toThrowError('[AddNewAccount] Account name cannot be an empty string')
+})

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

@@ -0,0 +1,19 @@
+import { testWithSynpress } from '@synthetixio/synpress-core'
+import { Phantom, phantomFixtures } from '../../../src/playwright'
+
+import basicSetup from '../wallet-setup/basic.setup'
+
+const test = testWithSynpress(phantomFixtures(basicSetup))
+
+const { expect } = test
+
+test('should rename current account with specified name', async ({ context, phantomPage }) => {
+  const phantom = new Phantom(context, phantomPage, basicSetup.walletPassword)
+
+  const accountName = 'Test Account'
+  await phantom.renameAccount('Account 1', accountName)
+
+  await phantomPage.reload()
+
+  await expect(phantomPage.locator(phantom.homePage.selectors.accountMenu.accountName)).toHaveText(accountName)
+})