Practice real locator decisions

This site is intentionally built with “good” and “bad” patterns so you can practice choosing stable Playwright locators. Use it with npx playwright codegen or the Inspector.

Goal: Default to semantic locators (role/label/text) when stable, then testid, then CSS, then XPath only when it truly helps.

Quick start

Recommended practice loop:

  1. Open a page (Basics/Dynamic/Advanced).
  2. Pick a challenge card.
  3. Write 2 solutions:
    • semantic Playwright locator
    • XPath fallback
  4. Run it and validate it selects exactly the intended element.

What to practice

  • Duplicate text: pick the right one
  • Hidden clones: visible vs attached
  • Dynamic classes: don’t key off noise
  • Hover reveals: discover the trigger
  • Iframe + shadow root basics