Write CSS selectors, XPath, or Playwright built-in locators and watch them highlight in real time on the practice page — then solve the challenges. Everything runs in your browser.
This is a hands-on tool — you type CSS selectors and XPath and watch them highlight on a live practice page in real time. That needs a keyboard and a screen wider than a phone.
Paste it into your desktop browser and pick up right here.
Each fragile locator below works right now. Write one that still matches after the page changes, then hit Test resilience.
The practice page in the frame is a deliberately realistic mess: forms with labels and without, dynamic ids, nested tables, duplicated text, icons pretending to be buttons. That's what production DOM looks like, and it's why locators learned from tidy tutorial pages fall apart at work. You write a locator, it highlights every match live, and the counter tells you whether you hit exactly the element you meant — one match, not three.
All three syntaxes that show up in real suites are supported: CSS selectors, XPath expressions, and Playwright's built-in locators (getByRole, getByText, getByLabel and friends). The cheat sheet is clickable, so every pattern on it can be tried against the page instead of read about.
Anyone can write a locator that matches today. The skill interviews probe — and the one that decides whether your suite survives a UI refactor — is writing one that still matches after the page changes. Hard mode hands you a fragile locator that works right now, mutates the page, and scores whether yours survived. That is the difference between div:nth-child(3) > span and a locator anchored to something with meaning: a role, a label, a data attribute that exists because a tester asked for it.
When a locator question comes up in an interview, it's rarely "write an XPath" — it's "why is this locator bad?". The automation question bank covers how those questions get asked and answered; the roadmap covers where locator strategy sits in the climb from manual QA to SDET. When you can clear hard mode cold, put the skill to work on a real take-home assignment — selector choice is one of the things reviewers score.