Pick seats on the seat map with mouse and keyboard
Medium55 pts~2 min
- Keyboard interaction
- Focus
- ARIA state
- Disabled elements
Practice app · SkyWay
An online travel agency: airport autocomplete, a custom calendar, travellers popover, timed search results with sorting and filters, a fare modal, passenger validation, a seat map, card payment inside an iframe, and a manage-booking page with native confirm and prompt dialogs.
Your starter code already declares TEST_URL — never hardcode a host.
Objective
Two travellers need seats. Click one seat, move to the next seat with the arrow keys, select it with the keyboard, and verify both seats are chosen.
Your task
- 1Open TEST_URL. A booking for 2 travellers is already at the seat map step.
- 2Assert that the occupied seat #seat-9F is disabled.
- 3Click seat #seat-9D.
- 4Press the Right arrow key: focus moves to seat #seat-9E. Press Space to select it.
- 5Assert both seats are selected (aria-pressed="true"), #selected-seats reads “Selected seats: 9D, 9E” and #seats-continue is enabled.
Acceptance criteria
- Seats 9D and 9E are selected.
- Exactly two seats are selected.
- The selected seats summary lists 9D, 9E.
- The test makes at least two assertions.
Fixtures
- Airports
- BLR Bengaluru · DEL New Delhi · BOM Mumbai · MAA Chennai · GOI Goa · HYD Hyderabad
- Today
- Tuesday, 10 November 2026 (earlier dates are disabled)
- Test card
- 4111 1111 1111 1111 · expiry 12/29 · CVV 123
- Declined card
- 4000 0000 0000 0002
- Existing booking
- PNR SW7K2Q · last name Verma
- Travellers
- Asha Verma (34, Female) · Rohan Verma (36, Male) · asha.verma@example.com · 9876543210
Playwright · Playwright Challenges · SkyWay