From 292febab49f95f5d7fe581aaa11a78011b2969d8 Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Mon, 15 Dec 2025 17:42:53 +0100 Subject: [PATCH 1/4] fix(tests): fix mobile browser e2e test failures (wallet text, dialog aria-label) --- src/components/Nav/MobileMenu/MobileMenuClient.tsx | 3 +++ src/components/ui/persistent-panel.tsx | 4 ++++ tests/e2e/start.spec.ts | 2 +- 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/Nav/MobileMenu/MobileMenuClient.tsx b/src/components/Nav/MobileMenu/MobileMenuClient.tsx index 33d9b9b0d4d..941cad2132c 100644 --- a/src/components/Nav/MobileMenu/MobileMenuClient.tsx +++ b/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(null) @@ -41,6 +43,7 @@ const MobileMenuClient = ({ className="flex flex-col" onOpenChange={setOpen} triggerRef={triggerRef} + aria-label={t("site-title")} > {children} diff --git a/src/components/ui/persistent-panel.tsx b/src/components/ui/persistent-panel.tsx index dffdd8c8796..7b9d342a78b 100644 --- a/src/components/ui/persistent-panel.tsx +++ b/src/components/ui/persistent-panel.tsx @@ -12,6 +12,8 @@ interface PersistentPanelProps { onOpenChange?: (open: boolean) => void /** Ref to the trigger element - focus returns here on close */ triggerRef?: React.RefObject + /** Accessible label for the dialog */ + "aria-label"?: string } /** @@ -34,6 +36,7 @@ const PersistentPanel = ({ children, onOpenChange, triggerRef, + "aria-label": ariaLabel, }: PersistentPanelProps) => { // Track if component should be in DOM (lazy mount, stays mounted after first open) const [isMounted, setIsMounted] = React.useState(false) @@ -161,6 +164,7 @@ const PersistentPanel = ({ className={contentClasses} role="dialog" aria-modal="true" + aria-label={ariaLabel} > {children} diff --git a/tests/e2e/start.spec.ts b/tests/e2e/start.spec.ts index 1753ae3b450..77287a60831 100644 --- a/tests/e2e/start.spec.ts +++ b/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() }) }) From 37bb7bfcf24d2fa3ca6e4a3490ae3bd69189650f Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Mon, 15 Dec 2025 17:25:46 +0100 Subject: [PATCH 2/4] fix(e2e): use toHaveText assertion to fix race condition in persona filter test --- tests/e2e/pages/FindWalletPage.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/tests/e2e/pages/FindWalletPage.ts b/tests/e2e/pages/FindWalletPage.ts index cc4ce5da183..ef92e73264f 100644 --- a/tests/e2e/pages/FindWalletPage.ts +++ b/tests/e2e/pages/FindWalletPage.ts @@ -219,9 +219,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})` + ) } /** From e24014f08b6c3db466d5f5092d01b52b104de55d Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Mon, 15 Dec 2025 18:29:42 +0100 Subject: [PATCH 3/4] fix(e2e): wait for filter checkboxes to render before extracting text --- tests/e2e/pages/FindWalletPage.ts | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/tests/e2e/pages/FindWalletPage.ts b/tests/e2e/pages/FindWalletPage.ts index ef92e73264f..b17a2a5b1db 100644 --- a/tests/e2e/pages/FindWalletPage.ts +++ b/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() From 1d787313fe970f5d298ec317ec7566832d47fe33 Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Mon, 15 Dec 2025 18:30:36 +0100 Subject: [PATCH 4/4] fix(e2e): fix mobile menu dialog locator in language picker test --- src/components/Nav/MobileMenu/MobileMenuClient.tsx | 1 + src/components/ui/persistent-panel.tsx | 4 ++++ tests/e2e/pages/BasePage.ts | 4 +++- 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/Nav/MobileMenu/MobileMenuClient.tsx b/src/components/Nav/MobileMenu/MobileMenuClient.tsx index 941cad2132c..44db390bb4b 100644 --- a/src/components/Nav/MobileMenu/MobileMenuClient.tsx +++ b/src/components/Nav/MobileMenu/MobileMenuClient.tsx @@ -44,6 +44,7 @@ const MobileMenuClient = ({ onOpenChange={setOpen} triggerRef={triggerRef} aria-label={t("site-title")} + data-testid="mobile-menu-dialog" > {children} diff --git a/src/components/ui/persistent-panel.tsx b/src/components/ui/persistent-panel.tsx index 7b9d342a78b..59b48611a4e 100644 --- a/src/components/ui/persistent-panel.tsx +++ b/src/components/ui/persistent-panel.tsx @@ -14,6 +14,8 @@ interface PersistentPanelProps { triggerRef?: React.RefObject /** Accessible label for the dialog */ "aria-label"?: string + /** Test ID for the dialog */ + "data-testid"?: string } /** @@ -37,6 +39,7 @@ const PersistentPanel = ({ 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) @@ -165,6 +168,7 @@ const PersistentPanel = ({ role="dialog" aria-modal="true" aria-label={ariaLabel} + data-testid={dataTestId} > {children} diff --git a/tests/e2e/pages/BasePage.ts b/tests/e2e/pages/BasePage.ts index 41b5f392a80..b0fb8e87da2 100644 --- a/tests/e2e/pages/BasePage.ts +++ b/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 { 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() }