From 7adadd5c888ab8ccac80131e89ce70ed2a25aded Mon Sep 17 00:00:00 2001 From: 0xjjjjjj <0xjjjjjj@users.noreply.github.com> Date: Sun, 8 Mar 2026 10:01:31 -0700 Subject: [PATCH] fix: use data-cy selector for sidebar backdrop in e2e tests The aria-hidden="true" selector matched 27 elements (icons, etc.) causing cy.click() to fail. Add data-cy="sidebar-backdrop" to the overlay div and target that specifically in tests. Co-Authored-By: Claude Opus 4.6 --- frontend/cypress/e2e/mobile_sidebar.cy.ts | 4 ++-- frontend/src/components/templates/DashboardShell.tsx | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/frontend/cypress/e2e/mobile_sidebar.cy.ts b/frontend/cypress/e2e/mobile_sidebar.cy.ts index 8475551c..a4a74a6c 100644 --- a/frontend/cypress/e2e/mobile_sidebar.cy.ts +++ b/frontend/cypress/e2e/mobile_sidebar.cy.ts @@ -102,7 +102,7 @@ describe("/dashboard - mobile sidebar", () => { cy.get("[data-sidebar]").should("have.attr", "data-sidebar", "open"); cy.get("aside").should("be.visible"); - cy.get('[aria-hidden="true"]').should("exist"); + cy.get('[data-cy="sidebar-backdrop"]').should("exist"); }); it("mobile: click backdrop closes sidebar", () => { @@ -114,7 +114,7 @@ describe("/dashboard - mobile sidebar", () => { cy.get("[data-sidebar]").should("have.attr", "data-sidebar", "open"); // Click the backdrop overlay - cy.get('[aria-hidden="true"]').click({ force: true }); + cy.get('[data-cy="sidebar-backdrop"]').click({ force: true }); cy.get("[data-sidebar]").should("have.attr", "data-sidebar", "closed"); cy.get("aside").should("not.be.visible"); diff --git a/frontend/src/components/templates/DashboardShell.tsx b/frontend/src/components/templates/DashboardShell.tsx index 7a9ad76f..f88cd60d 100644 --- a/frontend/src/components/templates/DashboardShell.tsx +++ b/frontend/src/components/templates/DashboardShell.tsx @@ -136,6 +136,7 @@ export function DashboardShell({ children }: { children: ReactNode }) { className="fixed inset-0 z-40 bg-black/30 md:hidden" onClick={toggleSidebar} aria-hidden="true" + data-cy="sidebar-backdrop" /> ) : null}