✨ feat(metamask): Add support for showing test networks (#1003)

wallets/metamask/src/metamask.ts

@@ -1,5 +1,6 @@
 import type { BrowserContext, Page } from '@playwright/test'
 import { CrashPage, HomePage, LockPage, NotificationPage, OnboardingPage } from './pages'
+import { SettingsSidebarMenus } from './pages/HomePage/selectors/settings'
 
 const NO_EXTENSION_ID_ERROR = new Error('MetaMask extensionId is not set')
 
@@ -131,4 +132,20 @@ export class MetaMask {
 
     await this.notificationPage.rejectPermission(this.extensionId)
   }
+
+  async goBackToHomePage() {
+    await this.homePage.goBackToHomePage()
+  }
+
+  async openSettings() {
+    await this.homePage.openSettings()
+  }
+
+  async openSidebarMenu(menu: SettingsSidebarMenus) {
+    await this.homePage.openSidebarMenu(menu)
+  }
+
+  async toggleShowTestNetworks() {
+    await this.homePage.toggleShowTestNetworks()
+  }
 }

wallets/metamask/src/pages/HomePage/actions/index.ts

@@ -1,3 +1,4 @@
 export * from './lock'
 export * from './importWalletFromPrivateKey'
 export * from './switchAccount'
+export * from './settings'

wallets/metamask/src/pages/HomePage/actions/settings.ts

@@ -0,0 +1,28 @@
+import type { Page } from '@playwright/test'
+import Selectors from '../selectors'
+import type { SettingsSidebarMenus } from '../selectors/settings'
+
+async function openSettings(page: Page) {
+  await page.locator(Selectors.accountMenu.accountMenuButton).click()
+  await page.locator(Selectors.accountMenu.settingsButton).click()
+}
+
+async function openSidebarMenu(page: Page, menu: SettingsSidebarMenus) {
+  await page.locator(Selectors.settings.sidebarMenu(menu)).click()
+}
+
+async function toggleShowTestNetworks(page: Page) {
+  // .nth(0) -> Show conversion on test networks
+  // .nth(1) -> Show test networks
+  await page.locator(Selectors.settings.advanced.showTestNetworksToggle).nth(1).click()
+}
+
+const advanced = {
+  toggleShowTestNetworks
+}
+
+export const settings = {
+  openSettings,
+  openSidebarMenu,
+  advanced
+}

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

@@ -1,6 +1,7 @@
 import type { Page } from '@playwright/test'
-import { importWalletFromPrivateKey, lock, switchAccount } from './actions'
+import { importWalletFromPrivateKey, lock, settings, switchAccount } from './actions'
 import Selectors from './selectors'
+import type { SettingsSidebarMenus } from './selectors/settings'
 
 export class HomePage {
   static readonly selectors = Selectors
@@ -12,6 +13,10 @@ export class HomePage {
     this.page = page
   }
 
+  async goBackToHomePage() {
+    await this.page.locator(Selectors.logo).click()
+  }
+
   async lock() {
     await lock(this.page)
   }
@@ -23,4 +28,16 @@ export class HomePage {
   async switchAccount(accountName: string) {
     await switchAccount(this.page, accountName)
   }
+
+  async openSettings() {
+    await settings.openSettings(this.page)
+  }
+
+  async openSidebarMenu(menu: SettingsSidebarMenus) {
+    await settings.openSidebarMenu(this.page, menu)
+  }
+
+  async toggleShowTestNetworks() {
+    await settings.advanced.toggleShowTestNetworks(this.page)
+  }
 }

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

@@ -1,10 +1,12 @@
 import { createDataTestSelector } from '../../../utils/selectors/createDataTestSelector'
+import settings from './settings'
 
 const container = '.account-menu'
 const accountMenu = {
   accountMenuButton: createDataTestSelector('account-menu-icon'),
   lockButton: `${container} .account-menu__lock-button`,
   importAccountButton: `${container} > .account-menu__item--clickable:nth-of-type(2)`,
+  settingsButton: `${container} > .account-menu__item--clickable:nth-of-type(5)`,
   accountNamesSelector: `${container} ${createDataTestSelector('account-menu__account')} .account-menu__name`
 }
 
@@ -18,9 +20,16 @@ const recoveryPhraseReminder = {
   gotItButton: '.recovery-phrase-reminder button.btn-primary'
 }
 
+const networkDropdown = {
+  dropdownButton: createDataTestSelector('network-display'),
+  networks: `${createDataTestSelector('network-droppo')} .network-dropdown-list li`
+}
+
 export default {
   logo: createDataTestSelector('app-header-logo'),
   account: createDataTestSelector('selected-account-click'),
+  settings,
+  networkDropdown,
   accountMenu,
   importAccountScreen,
   recoveryPhraseReminder

wallets/metamask/src/pages/HomePage/selectors/settings.ts

@@ -0,0 +1,24 @@
+import { createDataTestSelector } from '../../../utils/selectors/createDataTestSelector'
+
+export enum SettingsSidebarMenus {
+  General = 1,
+  Advanced = 2,
+  Contacts = 3,
+  SecurityAndPrivacy = 4,
+  Alerts = 5,
+  Networks = 6,
+  Experimental = 7,
+  About = 8
+}
+const sidebarMenu = (menu: SettingsSidebarMenus) =>
+  `.settings-page__content__tabs .tab-bar__tab.pointer:nth-of-type(${menu})`
+
+const advanced = {
+  showTestNetworksToggle: `${createDataTestSelector('advanced-setting-show-testnet-conversion')} .toggle-button`
+}
+
+export default {
+  SettingsSidebarMenus,
+  sidebarMenu,
+  advanced
+}

wallets/metamask/test/e2e/metamask/goBackToHomePage.spec.ts

@@ -0,0 +1,20 @@
+import { testWithSynpress } from 'fixtures'
+import { MetaMask, unlockForFixture } from '../../../src'
+
+import basicSetup from '../wallet-setup/basic.setup'
+
+const test = testWithSynpress(basicSetup, unlockForFixture)
+
+const { expect } = test
+
+test('should go back to the home page', async ({ context, metamaskPage }) => {
+  const metamask = new MetaMask(context, metamaskPage, basicSetup.walletPassword)
+
+  await metamask.openSettings()
+
+  await expect(metamaskPage.locator(metamask.homePage.selectors.account)).not.toBeVisible()
+
+  await metamask.goBackToHomePage()
+
+  await expect(metamaskPage.locator(metamask.homePage.selectors.account)).toBeVisible()
+})

wallets/metamask/test/e2e/metamask/openSettings.spec.ts

@@ -0,0 +1,19 @@
+import { testWithSynpress } from 'fixtures'
+import { MetaMask, unlockForFixture } from '../../../src'
+
+import basicSetup from '../wallet-setup/basic.setup'
+
+const test = testWithSynpress(basicSetup, unlockForFixture)
+
+const { expect } = test
+
+test('should open settings', async ({ context, metamaskPage }) => {
+  const metamask = new MetaMask(context, metamaskPage, basicSetup.walletPassword)
+
+  await metamask.openSettings()
+
+  const SidebarMenus = metamask.homePage.selectors.settings.SettingsSidebarMenus
+  await expect(
+    metamaskPage.locator(metamask.homePage.selectors.settings.sidebarMenu(SidebarMenus.General))
+  ).toBeVisible()
+})

wallets/metamask/test/e2e/metamask/openSidebarMenu.spec.ts

@@ -0,0 +1,25 @@
+import { testWithSynpress } from 'fixtures'
+import { MetaMask, unlockForFixture } from '../../../src'
+
+import basicSetup from '../wallet-setup/basic.setup'
+
+const test = testWithSynpress(basicSetup, unlockForFixture)
+
+const { expect } = test
+
+test('should open correct menu from the sidebar', async ({ context, metamaskPage }) => {
+  const metamask = new MetaMask(context, metamaskPage, basicSetup.walletPassword)
+
+  await metamask.openSettings()
+
+  await expect(
+    metamaskPage.locator(metamask.homePage.selectors.settings.advanced.showTestNetworksToggle).last()
+  ).not.toBeVisible()
+
+  const SidebarMenus = metamask.homePage.selectors.settings.SettingsSidebarMenus
+  await metamask.openSidebarMenu(SidebarMenus.Advanced)
+
+  await expect(
+    metamaskPage.locator(metamask.homePage.selectors.settings.advanced.showTestNetworksToggle).last()
+  ).toBeVisible()
+})

wallets/metamask/test/e2e/metamask/toggleShowTestNetworks.spec.ts

@@ -0,0 +1,38 @@
+import { testWithSynpress } from 'fixtures'
+import { MetaMask, unlockForFixture } from '../../../src'
+
+import Selectors from '../../../src/pages/HomePage/selectors'
+import basicSetup from '../wallet-setup/basic.setup'
+
+const test = testWithSynpress(basicSetup, unlockForFixture)
+
+const { expect } = test
+
+test('should toggle the "show test networks" option', async ({ context, metamaskPage }) => {
+  const metamask = new MetaMask(context, metamaskPage, basicSetup.walletPassword)
+
+  await metamaskPage.locator(metamask.homePage.selectors.networkDropdown.dropdownButton).click()
+
+  const networksCountBefore = await metamaskPage.locator(metamask.homePage.selectors.networkDropdown.networks).count()
+
+  // We're closing the network dropdown with this.
+  await metamask.goBackToHomePage()
+
+  await metamask.openSettings()
+
+  const SidebarMenus = metamask.homePage.selectors.settings.SettingsSidebarMenus
+  await metamask.openSidebarMenu(SidebarMenus.Advanced)
+
+  await metamask.toggleShowTestNetworks()
+
+  // We have to wait for the toggle to be "toggled". This is a hacky workaround, unfortunately.
+  await expect(metamaskPage.locator(Selectors.settings.advanced.showTestNetworksToggle).nth(1)).toHaveClass(
+    /toggle-button--on/
+  )
+
+  await metamaskPage.locator(metamask.homePage.selectors.networkDropdown.dropdownButton).click()
+
+  const networksCountAfter = await metamaskPage.locator(metamask.homePage.selectors.networkDropdown.networks).count()
+
+  expect(networksCountAfter).toBeGreaterThan(networksCountBefore)
+})

wallets/metamask/test/e2e/wallet-setup/basic.setup.ts

@@ -1,5 +1,6 @@
 import { defineWalletSetup } from 'core'
 import { MetaMask } from '../../../src'
+import { waitFor } from '../../../src/utils/waitFor'
 
 const SEED_PHRASE = 'test test test test test test test test test test test junk'
 
@@ -9,4 +10,11 @@ export default defineWalletSetup(PASSWORD, async (context, walletPage) => {
   const metamask = new MetaMask(context, walletPage, PASSWORD)
 
   await metamask.importWallet(SEED_PHRASE)
+
+  const recoveryPhraseReminder = walletPage.locator(metamask.homePage.selectors.recoveryPhraseReminder.gotItButton)
+
+  const isRecoveryPhraseReminderVisible = await waitFor(recoveryPhraseReminder, 'visible', 3_000, false)
+  if (isRecoveryPhraseReminderVisible) {
+    await recoveryPhraseReminder.click()
+  }
 })

wallets/metamask/test/e2e/wallet-setup/connected.setup.ts

@@ -1,6 +1,7 @@
 import { defineWalletSetup } from 'core'
 import { getExtensionId } from 'fixtures'
 import { MetaMask } from '../../../src'
+import { waitFor } from '../../../src/utils/waitFor'
 
 const SEED_PHRASE = 'test test test test test test test test test test test junk'
 
@@ -13,6 +14,13 @@ export default defineWalletSetup(PASSWORD, async (context, walletPage) => {
 
   await metamask.importWallet(SEED_PHRASE)
 
+  const recoveryPhraseReminder = walletPage.locator(metamask.homePage.selectors.recoveryPhraseReminder.gotItButton)
+
+  const isRecoveryPhraseReminderVisible = await waitFor(recoveryPhraseReminder, 'visible', 3_000, false)
+  if (isRecoveryPhraseReminderVisible) {
+    await recoveryPhraseReminder.click()
+  }
+
   const page = await context.newPage()
 
   await page.goto('https://metamask.github.io/test-dapp/')