Sort with a custom listbox dropdown
Medium50 pts~2 min
- Custom dropdowns
- ARIA listbox
- Keyboard interaction
- Sorting
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
The Men listing's sort control is a custom listbox, not a native select. Choose “Price: low to high” and verify the cheapest product is listed first.
Your task
- 1Open TEST_URL and click Men (#nav-men).
- 2Open the sort dropdown (#sort-button); the options appear in #sort-listbox.
- 3Choose “Price: low to high” (#sort-option-price-asc) with the mouse, or with the arrow keys and Enter.
- 4Assert the listbox closed, #sort-button shows “Price: low to high” and the first card is the Essential Crew Neck T-Shirt at ₹399.
Acceptance criteria
- The sort button shows “Price: low to high” and that option is selected.
- The listbox is closed.
- The first product is the Essential Crew Neck T-Shirt at ₹399.
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