fix: Switch networks (#1232)

* feat: New documentation * fix: format * chore: API documentation * fix: build * fix: build v2 * fix: minor fixes * fix: switch networks
Synthetixio · Oct 15, 2024 · 4f73823 · 4f73823
1 parent 5973755
commit 4f73823
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 2 deletions.
diff --git a/examples/metamask/test/playwright/addNetwork.spec.ts b/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')
+})
diff --git a/wallets/metamask/src/playwright/pages/HomePage/actions/popups/closeNetworkAddedPopover.ts b/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
+ )
 }
diff --git a/wallets/metamask/src/playwright/pages/HomePage/actions/toggleShowTestNetworks.ts b/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()
 }
diff --git a/wallets/metamask/src/selectors/pages/HomePage/index.ts b/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'

diff --git a/wallets/metamask/test/playwright/e2e/toggleShowTestNetworks.spec.ts b/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/)