1294 close multiple popovers

wallets/metamask/src/playwright/fixture-actions/unlockForFixture.ts

@@ -2,7 +2,7 @@ import type { Page } from '@playwright/test'
 import { errors as playwrightErrors } from '@playwright/test'
 import { MetaMask } from '..'
 import { CrashPage, HomePage } from '../pages'
-import { closePopover, closeRecoveryPhraseReminder } from '../pages/HomePage/actions'
+import { closePopover, closeRecoveryPhraseReminder, closeNewNetworkInfoPopover } from '../pages/HomePage/actions'
 import { waitForSpinnerToVanish } from '../utils/waitForSpinnerToVanish'
 
 /**
@@ -20,6 +20,7 @@ export async function unlockForFixture(page: Page, password: string) {
   await retryIfMetaMaskCrashAfterUnlock(page)
 
   await closePopover(page)
+  await closeNewNetworkInfoPopover(page)
   await closeRecoveryPhraseReminder(page)
 }
 
@@ -44,7 +45,7 @@ async function retryIfMetaMaskCrashAfterUnlock(page: Page) {
   const homePageLogoLocator = page.locator(HomePage.selectors.logo)
 
   const isHomePageLogoVisible = await homePageLogoLocator.isVisible()
-  const isPopoverVisible = await page.locator(HomePage.selectors.popover.closeButton).isVisible()
+  const isPopoverVisible = await page.locator(HomePage.selectors.popover.closeButton).first().isVisible()
 
   if (!isHomePageLogoVisible && !isPopoverVisible) {
     if (await page.locator(CrashPage.selectors.header).isVisible()) {

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

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

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

@@ -3,7 +3,7 @@ import Selectors from '../../../../../selectors/pages/HomePage'
 import { clickLocatorIfCondition } from '../../../../utils/clickLocatorIfCondition'
 
 export async function closeRecoveryPhraseReminder(page: Page) {
-  const closeButtonLocator = page.locator(Selectors.recoveryPhraseReminder.gotItButton)
+  const closeButtonLocator = page.locator(Selectors.recoveryPhraseReminder.gotItButton).first()
 
   // TODO: Extract & make configurable
   await clickLocatorIfCondition(closeButtonLocator, () => closeButtonLocator.isVisible(), 1_000)

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

@@ -0,0 +1,10 @@
+import type { Page } from '@playwright/test'
+import { clickLocatorIfCondition } from '../../../../utils/clickLocatorIfCondition'
+
+export async function closeWhatsNewPopover(page: Page) {
+  // The "What's new" popover has an X button with aria-label="Close"
+  const closeButtonLocator = page.locator('[aria-label="Close"]').first()
+
+  // TODO: Extract & make configurable
+  await clickLocatorIfCondition(closeButtonLocator, () => closeButtonLocator.isVisible(), 1_000)
+}

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

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

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

@@ -1,7 +1,7 @@
 import type { Page } from '@playwright/test'
 import Selectors from '../../../../selectors/pages/HomePage'
 import { allTextContents } from '../../../utils/allTextContents'
-import { closeRecoveryPhraseReminder } from './popups'
+import { closeRecoveryPhraseReminder, closeNewNetworkInfoPopover, closeWhatsNewPopover } from './popups'
 
 async function openTestnetSection(page: Page) {
   const toggleButtonLocator = page.locator(Selectors.networkDropdown.showTestNetworksToggle)
@@ -34,6 +34,10 @@ export async function switchNetwork(page: Page, networkName: string, includeTest
 
   await seekedNetworkLocator.click()
 
+  // Handle network switch popovers (close network info first as it's on top)
+  await closeNewNetworkInfoPopover(page)
+  await closeWhatsNewPopover(page)
+
   // TODO: This is not really needed if we do `metamask.toggleDismissSecretRecoveryPhraseReminder()` by default. Figure this out!
   await closeRecoveryPhraseReminder(page)
 }

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

@@ -16,11 +16,11 @@ const openTransactionDetails = async (page: Page, txIndex: number) => {
   await page.locator(Selectors.activityTab.completedTransactions).nth(txIndex).click()
 
   // TODO: Extract timeout.
-  await waitFor(() => page.locator(Selectors.popover.closeButton).isVisible(), 3_000)
+  await waitFor(() => page.locator(Selectors.popover.closeButton).first().isVisible(), 3_000)
 }
 
 const closeTransactionDetails = async (page: Page) => {
-  await page.locator(Selectors.popover.closeButton).click()
+  await page.locator(Selectors.popover.closeButton).first().click()
 }
 
 export const transactionDetails = {

wallets/metamask/src/playwright/pages/OnboardingPage/actions/importWallet.ts

@@ -4,7 +4,7 @@ import type { Page } from '@playwright/test'
 import HomePageSelectors from '../../../../selectors/pages/HomePage'
 import Selectors from '../../../../selectors/pages/OnboardingPage'
 
-import { closePopover } from '../../HomePage/actions'
+import { closePopover, closeNewNetworkInfoPopover, closeWhatsNewPopover } from '../../HomePage/actions'
 import { confirmSecretRecoveryPhrase, createPassword } from './helpers'
 
 export async function importWallet(page: Page, seedPhrase: string, password: string) {
@@ -22,7 +22,10 @@ export async function importWallet(page: Page, seedPhrase: string, password: str
   await page.locator(Selectors.PinExtensionPageSelectors.nextButton).click()
   await page.locator(Selectors.PinExtensionPageSelectors.confirmButton).click()
 
+  // Close popovers in order from top to bottom (z-index order)
+  await closeNewNetworkInfoPopover(page)
   await closePopover(page)
+  await closeWhatsNewPopover(page)
 
   await verifyImportedWallet(page)
 }

wallets/metamask/src/playwright/utils/clickLocatorIfCondition.ts

@@ -5,6 +5,7 @@ import { waitFor } from './waitFor'
 export async function clickLocatorIfCondition(locator: Locator, condition: () => Promise<boolean>, timeout = 3_000) {
   const shouldClick = await waitFor(condition, timeout, false)
   if (shouldClick) {
-    await locator.click()
+    // Use force: true to bypass interception from popover background
+    await locator.click({ force: true })
   }
 }