fix: Switch networks

examples/metamask/test/playwright/addNetwork.spec.ts

@@ -0,0 +1,19 @@
+import { testWithSynpress } from '@synthetixio/synpress'
+import { metaMaskFixtures } from '@synthetixio/synpress/playwright'
+import basicSetup from '../wallet-setup/basic.setup'
+
+const test = testWithSynpress(metaMaskFixtures(basicSetup))
+
+const { expect } = test
+
+test('should add a custom network to MetaMask', async ({ metamask, page }) => {
+  // Add the custom network
+  await metamask.addNetwork({
+    name: 'Optimism',
+    rpcUrl: 'https://mainnet.optimism.io',
+    chainId: 10,
+    symbol: 'ETH'
+  })
+
+  await expect(page.locator('#chainId')).toHaveText('0xa')
+})

wallets/metamask/src/playwright/pages/HomePage/actions/popups/closeNetworkAddedPopover.ts

@@ -8,4 +8,12 @@ export async function closeNetworkAddedPopover(page: Page) {
 
   // TODO: Extract & make configurable
   await clickLocatorIfCondition(switchNetworkButtonLocator, () => switchNetworkButtonLocator.isVisible(), 1_000)
+
+  const switchCompleteCloseButtonLocator = page.locator(Selectors.networkAddedPopover.switchCompleteCloseButton)
+
+  await clickLocatorIfCondition(
+    switchCompleteCloseButtonLocator,
+    () => switchCompleteCloseButtonLocator.isVisible(),
+    1_000
+  )
 }

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

@@ -8,4 +8,6 @@ export async function toggleShowTestNetworks(page: Page) {
   await page.locator(Selectors.networkDropdown.dropdownButton).click()
 
   await toggle(page.locator(Selectors.networkDropdown.showTestNetworksToggle))
+
+  await page.locator(Selectors.networkDropdown.closeNetworkPopupButton).click()
 }

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

@@ -55,7 +55,8 @@ const popover = {
 
 const networkAddedPopover = {
   switchToNetworkButton: '.home__new-network-added__switch-to-button',
-  dismissButton: '.home__new-network-added button.btn-secondary'
+  dismissButton: '.home__new-network-added button.btn-secondary',
+  switchCompleteCloseButton: '.popover-header .box.popover-header__title button.mm-box.mm-button-icon'
 }
 
 const newNetworkInfoPopover = {
@@ -75,7 +76,9 @@ const networkDropdown = {
   showTestNetworksToggle: `${networkDropdownContainer} > section > div > label.toggle-button`,
   addNetworkButton: `${networkDropdownContainer} div.mm-box.mm-box--padding-4 > button`,
   toggleOff: `${networkDropdownContainer} label.toggle-button.toggle-button--off`,
-  toggleOn: `${networkDropdownContainer} label.toggle-button.toggle-button--on`
+  toggleOn: `${networkDropdownContainer} label.toggle-button.toggle-button--on`,
+  closeNetworkPopupButton:
+    '.mm-modal-header button.mm-button-icon.mm-box--color-icon-default.mm-box--background-color-transparent.mm-box--rounded-lg'
 }
 
 const tabContainer = '.tabs__content'

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

@@ -19,6 +19,8 @@ test('should toggle the "Show test networks" option from the networks dropdown',
 
   await metamask.toggleShowTestNetworks()
 
+  await metamaskPage.locator(Selectors.networkDropdown.dropdownButton).click()
+
   // We have to wait for the toggle to be "toggled". This is a hacky workaround, unfortunately.
   await expect(metamaskPage.locator(Selectors.networkDropdown.showTestNetworksToggle)).toHaveClass(/toggle-button--on/)