QA training sandbox
Practice finding, filtering, and selecting a sample vehicle with accessible Playwright locators and stable CSS hooks.
Start a sample search
Use the labeled fields to create a valid example search. The form never contacts a service.
Static sample inventory
Filter by vehicle type or search by make and model. The sample listings do not change between visits.
6 sample vehicles shown.
Compact 路 Hybrid
A practical sample listing for testing expandable details and summary locators.
Compact 路 Hybrid
A fictional compact-car listing for practicing second-match and card-scoped locators.
SUV 路 Petrol
A fictional family-sized listing for practicing card-specific assertions.
SUV 路 Plug-in hybrid
A fictional SUV listing for practicing second-match and card-scoped locators.
Electric 路 Premium
An illustrative electric-car listing for practicing type-based filters.
Electric 路 Crossover
A fictional electric crossover listing for practicing second-match and card-scoped locators.
No car selected. Choose a sample vehicle to show a local demo confirmation.
Training notes
Playwright recommends these seven built-in locators. Start with user-facing roles, text, and labels; use test IDs as explicit testing hooks. CSS remains available when needed.
getByRole()Find an action by its accessible role and name.
page.getByRole('button', { name: 'Search cars' })
getByText()Find visible page text, such as a vehicle heading.
page.getByText('Toyota Corolla', { exact: true })
getByLabel()Find a form control by its associated visible label.
page.getByLabel('Pick-up location')
getByPlaceholder()Find the vehicle search field by its hint text.
page.getByPlaceholder('Try Toyota or electric')
getByAltText()Find a car photo by its descriptive alternative text.
page.getByAltText('Silver compact hybrid sedan')
getByTitle()Find the currency abbreviation by its explanatory title.
page.getByTitle('United States dollars').nth(0)
getByTestId()Target a card through its stable test ID contract.
page.getByTestId('vehicle-card-corolla')
Select vehicle cards by their semantic type attribute.
page.locator('[data-vehicle-type="electric"]')
.nth()Playwright indexes matches from zero, so index 1 targets the second compact car.
page.locator('[data-vehicle-type="compact"]').nth(1)
Full reference: Playwright locators documentation.