Hover gallery thumbnails to change the main image
Easy30 pts~2 min
- Mouse hover
- Actions
- Dynamic content
Practice app · StyleKart
A fashion store with Men, Women and Kids listings: multi-select filters with removable chips, a custom sort listbox, load-more paging, product pages with colour swatches, sizes, a size-chart modal and a hover gallery, a wishlist, a bag with per-line sizes and a coupons modal, sign-up validation and checkout.
Your starter code already declares TEST_URL — never hardcode a host.
Objective
On the Tailored Single-Breasted Blazer page, choose the Beige colour, then hover the gallery thumbnails (no clicking) until the main image shows the back view, and verify the caption.
Your task
- 1Open TEST_URL, click Women (#nav-women), click Load more products (#load-more) and open the Tailored Single-Breasted Blazer (data-product-id="w-blazer").
- 2Click the Beige swatch (#colour-beige) and check #product-title ends with “in Beige”.
- 3Hover the side-view thumbnail ([data-testid="gallery-thumb"][data-index="1"]) and assert #gallery-caption reads “Side view · Beige”.
- 4Hover the back-view thumbnail (data-index="2") and assert #gallery-caption reads “Back view · Beige” and #main-image has data-view="back".
Acceptance criteria
- The main image shows the back view.
- The caption reads “Back view · Beige”.
- The test moves the mouse over the thumbnails and asserts the caption.
Fixtures
- Coupons
- STYLE20 (20% off bags of ₹1,999 or more) · FIRST100 (₹100 off)
- Valid mobile
- 10 digits starting with 6, 7, 8 or 9, e.g. 9123456780
- Password rules
- 8+ characters with an uppercase letter, a number and a special character, e.g. Style@2026
- Seeded bag
- Floral Wrap Midi Dress (Pink, S) ×1 · Essential Crew Neck T-Shirt (Black, M) ×2 · Square Neck Crop Top (White, S) ×1
- Delivery address
- Rohan Mehta · 9876543210 · 400001 · Flat 12, Sea View Apartments · Mumbai · Maharashtra
Playwright · Playwright Challenges · StyleKart