diff --git a/examples/metamask/test/playwright/addNetwork.spec.ts b/examples/metamask/test/playwright/addNetwork.spec.ts new file mode 100644 index 000000000..51e9e907c --- /dev/null +++ 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 index b107b411c..1ceb46d61 100644 --- 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 index 9e48c1527..b6bde5537 100644 --- 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 index 61e04cf29..8149bd735 100644 --- 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 index 6361fbaf4..5140a5109 100644 --- 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/)