fix(e2e): fix mobile browser e2e test failures and race conditions

src/components/Nav/MobileMenu/MobileMenuClient.tsx

@@ -10,6 +10,7 @@ import { cn } from "@/lib/utils/cn"
 import HamburgerButton from "./HamburgerButton"
 
 import { useCloseOnNavigate } from "@/hooks/useCloseOnNavigate"
+import { useTranslation } from "@/hooks/useTranslation"
 
 type MobileMenuClientProps = {
   className?: string
@@ -22,6 +23,7 @@ const MobileMenuClient = ({
   side,
   children,
 }: MobileMenuClientProps) => {
+  const { t } = useTranslation("common")
   const [open, setOpen] = useCloseOnNavigate()
   const triggerRef = React.useRef<HTMLButtonElement>(null)
 
@@ -41,6 +43,8 @@ const MobileMenuClient = ({
         className="flex flex-col"
         onOpenChange={setOpen}
         triggerRef={triggerRef}
+        aria-label={t("site-title")}
+        data-testid="mobile-menu-dialog"
       >
         {children}
       </PersistentPanel>

src/components/ui/persistent-panel.tsx

@@ -12,6 +12,10 @@ interface PersistentPanelProps {
   onOpenChange?: (open: boolean) => void
   /** Ref to the trigger element - focus returns here on close */
   triggerRef?: React.RefObject<HTMLElement | null>
+  /** Accessible label for the dialog */
+  "aria-label"?: string
+  /** Test ID for the dialog */
+  "data-testid"?: string
 }
 
 /**
@@ -34,6 +38,8 @@ const PersistentPanel = ({
   children,
   onOpenChange,
   triggerRef,
+  "aria-label": ariaLabel,
+  "data-testid": dataTestId,
 }: PersistentPanelProps) => {
   // Track if component should be in DOM (lazy mount, stays mounted after first open)
   const [isMounted, setIsMounted] = React.useState(false)
@@ -161,6 +167,8 @@ const PersistentPanel = ({
           className={contentClasses}
           role="dialog"
           aria-modal="true"
+          aria-label={ariaLabel}
+          data-testid={dataTestId}
         >
           {children}
         </div>

tests/e2e/pages/BasePage.ts

@@ -26,7 +26,7 @@ export class BasePage {
     this.mobileMenuButton = this.primaryNav.getByRole("button", {
       name: /toggle menu button/i,
     })
-    this.mobileSidebar = page.getByRole("dialog", { name: /ethereum.org/i })
+    this.mobileSidebar = page.getByRole("dialog")
   }
 
   /**
@@ -118,6 +118,8 @@ export class BasePage {
    */
   async openLanguagePickerMobile(): Promise<void> {
     await this.mobileMenuButton.click()
+    // Wait for the dialog to be visible before trying to find elements inside it
+    await expect(this.mobileSidebar).toBeVisible()
     await this.mobileSidebar.getByTestId("mobile-menu-language-picker").click()
   }
 

tests/e2e/pages/FindWalletPage.ts

@@ -134,11 +134,12 @@ export class FindWalletPage extends BasePage {
     const desktopCheckbox = desktopLabelParent.locator("button")
     await desktopCheckbox.click()
 
+    const itemContainer = desktopLabelParent.locator("..")
+    const osOptionLabels = itemContainer.locator("label span.select-none")
+    await expect(osOptionLabels.first()).toBeVisible()
+
     // Get OS options
-    const osOptions = await desktopLabelParent
-      .locator("..")
-      .locator("label span.select-none")
-      .allTextContents()
+    const osOptions = await osOptionLabels.allTextContents()
 
     return { initialCount, osOptions }
   }
@@ -168,11 +169,12 @@ export class FindWalletPage extends BasePage {
     const mobileCheckbox = mobileLabelParent.locator("button")
     await mobileCheckbox.click()
 
+    const itemContainer = mobileLabelParent.locator("..")
+    const osOptionLabels = itemContainer.locator("label span.select-none")
+    await expect(osOptionLabels.first()).toBeVisible()
+
     // Get OS options
-    const osOptions = await mobileLabelParent
-      .locator("..")
-      .locator("label span.select-none")
-      .allTextContents()
+    const osOptions = await osOptionLabels.allTextContents()
 
     // Close filters
     await this.mobileFiltersSubmitButton.click()
@@ -219,9 +221,9 @@ export class FindWalletPage extends BasePage {
    * Verify the row counter displays the provided expected count
    */
   async verifyRowCounterEquals(expectedCount: number) {
-    const counterText = await this.rowCounter.textContent()
-
-    expect(counterText).toBe(`Showing all wallets (${expectedCount})`)
+    await expect(this.rowCounter).toHaveText(
+      `Showing all wallets (${expectedCount})`
+    )
   }
 
   /**

tests/e2e/start.spec.ts

@@ -19,7 +19,7 @@ test.describe("Start Page", () => {
     const walletModal = page.getByRole("dialog")
     await expect(walletModal.getByText("Connect a Wallet")).toBeVisible()
     await expect(walletModal.getByText("MetaMask")).toBeVisible()
-    await expect(walletModal.getByText("Coinbase Wallet")).toBeVisible()
+    await expect(walletModal.getByText("Coinbase")).toBeVisible()
     await expect(walletModal.getByText("Rainbow")).toBeVisible()
   })
 })