From 706732878f7dc9090d4c28cd51a542cbc70ab1c6 Mon Sep 17 00:00:00 2001
From: Cristian Felipe Cruz Buitron <cristiancruz0529@gmail.com>
Date: Sun, 13 Sep 2026 20:07:35 +0000
Subject: [PATCH] =?UTF-8?q?test(ecommerce):=20data-testid=20en=20lupa/pane?=
 =?UTF-8?q?l/overlay=20de=20la=20galer=C3=ADa?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Sin cambio de comportamiento -- solo hooks estables para la suite de
Playwright en .browser-scratch/checks.mjs (el selector genérico
div[aria-hidden] dejó de alcanzar para distinguir la lupa, el overlay
in-place y el panel lateral, que ahora coexisten en el DOM).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012Y4df3Z7odr9Cg8F2nw6uV
---
 workloads/ecommerce/components/product/product-gallery.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/workloads/ecommerce/components/product/product-gallery.tsx b/workloads/ecommerce/components/product/product-gallery.tsx
index e75689a..5a2702d 100644
--- a/workloads/ecommerce/components/product/product-gallery.tsx
+++ b/workloads/ecommerce/components/product/product-gallery.tsx
@@ -105,12 +105,14 @@ export function ProductGallery({ images, name }: { images: string[]; name: strin
               {hoverZoom && (
                 <div
                   aria-hidden
+                  data-testid="gallery-lens"
                   className="pointer-events-none absolute hidden border-2 border-white bg-white/25 shadow-lg lg:block"
                   style={{ left: hoverZoom.lensLeft, top: hoverZoom.lensTop, width: hoverZoom.lensSize, height: hoverZoom.lensSize }}
                 />
               )}
               <div
                 aria-hidden
+                data-testid="gallery-inplace-overlay"
                 className="pointer-events-none absolute inset-0 bg-slate-50 transition-opacity duration-150 ease-out lg:hidden"
                 style={{
                   opacity: hoverZoom ? 1 : 0,
@@ -145,6 +147,7 @@ export function ProductGallery({ images, name }: { images: string[]; name: strin
         {hoverZoom && (
           <div
             aria-hidden
+            data-testid="gallery-zoom-panel"
             className="pointer-events-none absolute left-full top-0 z-30 ml-4 hidden aspect-square w-[26rem] max-w-[40vw] overflow-hidden rounded-[2rem] border border-slate-200 bg-white shadow-2xl lg:block"
             style={{
               backgroundImage: `url(${selected})`,