✨ feat(metamask): Close all new network popovers (#1018)

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

@@ -1,9 +1,8 @@
 import type { Page } from '@playwright/test'
 import { z } from 'zod'
-import { clickLocatorIfCondition } from '../../../utils/clickLocatorIfCondition'
 import { waitFor } from '../../../utils/waitFor'
 import Selectors from '../selectors'
-import { closePopover } from './popups'
+import { closeNetworkAddedPopover, closeNewNetworkInfoPopover } from './popups'
 
 const Network = z.object({
   name: z.string(),
@@ -51,11 +50,7 @@ export async function addNetwork(page: Page, network: Network) {
 
   await page.locator(Selectors.settings.networks.newNetworkForm.saveButton).click()
 
-  // Closes the "Network added successfully!" popup.
-  // Note: The "Dismiss" button does NOTHING and the network is ALWAYS automatically switched.
-  const switchToNetworkButtonLocator = page.locator(Selectors.networkAddedPopover.switchToNetworkButton)
-  await clickLocatorIfCondition(switchToNetworkButtonLocator, () => switchToNetworkButtonLocator.isVisible(), 1_000)
+  await closeNetworkAddedPopover(page)
 
-  // Closes the "You have switched to X. Things to keep in mind..." popup.
-  await closePopover(page)
+  await closeNewNetworkInfoPopover(page)
 }

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

@@ -0,0 +1,11 @@
+import type { Page } from '@playwright/test'
+import { clickLocatorIfCondition } from '../../../../utils/clickLocatorIfCondition'
+import Selectors from '../../selectors'
+
+// Note: The "Dismiss" button does NOTHING and the network is ALWAYS automatically switched.
+export async function closeNetworkAddedPopover(page: Page) {
+  const switchNetworkButtonLocator = page.locator(Selectors.networkAddedPopover.switchToNetworkButton)
+
+  // TODO: Extract & make configurable
+  await clickLocatorIfCondition(switchNetworkButtonLocator, () => switchNetworkButtonLocator.isVisible(), 1_000)
+}

wallets/metamask/src/pages/HomePage/actions/popups/closeNewNetworkInfoPopover.ts

@@ -0,0 +1,10 @@
+import type { Page } from '@playwright/test'
+import { clickLocatorIfCondition } from '../../../../utils/clickLocatorIfCondition'
+import Selectors from '../../selectors'
+
+export async function closeNewNetworkInfoPopover(page: Page) {
+  const gotItButtonLocator = page.locator(Selectors.newNetworkInfoPopover.gotItButton)
+
+  // TODO: Extract & make configurable
+  await clickLocatorIfCondition(gotItButtonLocator, () => gotItButtonLocator.isVisible(), 1_000)
+}

wallets/metamask/src/pages/HomePage/actions/popups/closePopover.ts

@@ -4,7 +4,8 @@ import Selectors from '../../selectors'
 
 // Closes the popover with news, rainbows, unicorns, and other stuff.
 export async function closePopover(page: Page) {
-  const closeButtonLocator = page.locator(Selectors.popover.closeButton)
+  // We're using `first()` here just in case there are multiple popovers, which happens sometimes.
+  const closeButtonLocator = page.locator(Selectors.popover.closeButton).first()
 
   // TODO: Extract & make configurable
   await clickLocatorIfCondition(closeButtonLocator, () => closeButtonLocator.isVisible(), 1_000)

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

@@ -1,2 +1,4 @@
 export * from './closePopover'
 export * from './closeRecoveryPhraseReminder'
+export * from './closeNewNetworkInfoPopover'
+export * from './closeNetworkAddedPopover'

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

@@ -38,8 +38,12 @@ const popover = {
 }
 
 const networkAddedPopover = {
-  switchToNetworkButton: `${popoverContainer} button.btn-primary`,
-  dismissButton: `${popoverContainer} button.btn-secondary`
+  switchToNetworkButton: '.home__new-network-added button.btn-primary',
+  dismissButton: '.home__new-network-added button.btn-secondary'
+}
+
+const newNetworkInfoPopover = {
+  gotItButton: '.new-network-info__wrapper button.btn-primary'
 }
 
 const recoveryPhraseReminder = {
@@ -81,5 +85,6 @@ export default {
   accountMenu,
   recoveryPhraseReminder,
   popover,
-  networkAddedPopover
+  networkAddedPopover,
+  newNetworkInfoPopover
 }