2 / 11
Playwright

Verify the size-required error, then add to bag

Easy30 pts~2 min
  • Validation messages
  • Toggle buttons
  • ARIA state
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.

Test URL
/lab/playwright-stylekart-size-required

Your starter code already declares TEST_URL — never hardcode a host.

Objective

On the Floral Wrap Midi Dress page, pick the Navy colour, prove that Add to bag without a size shows “Please select a size”, then choose size M and add the dress to the bag.

Your task

  1. 1Open TEST_URL, click Women (#nav-women) and open the Floral Wrap Midi Dress card (data-product-id="w-wrap-dress").
  2. 2Click the Navy colour swatch (#colour-navy) and check that #product-title now ends with “in Navy”.
  3. 3Click Add to bag (#add-to-bag) without choosing a size and assert the alert #size-error reads “Please select a size”.
  4. 4Click size M (#size-M), click Add to bag again and assert the header badge #bag-count shows 1 and the error is gone.

Acceptance criteria

  • The size-required error was shown and is now gone.
  • Size M is selected in Navy.
  • The bag badge shows 1.
  • The test makes at least two assertions.

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