How do you write maintainable CSS/DOM selectors for test automation?
- selectors
- locators
- maintainability
Answer it first, then compare. Nothing here is saved or scored.
Model answer
Priority order: (1) `data-testid` attributes, stable, decoupled from styling. (2) Accessible roles/labels, `getByRole("button", { name: "Submit" })`, good for a11y too. (3) Semantic HTML selectors - `form`, `nav`, `main`. Avoid: dynamic class names (CSS modules, Tailwind), XPath (brittle, hard to read), and positional selectors (nth-child). Work with developers to add test IDs during development - it's a 5-second change that saves hours of maintenance.
What interviewers listen for
- Test architecture instinctsYou can defend why your suite is shaped like a pyramid, a trophy, or a honeycomb.
- Locator disciplineYou rank selector strategies by stability and explain when to break the rule.
- Flaky test ownershipYou debug to a structural fix instead of retry-until-green.
- Parallelisation literacyYou know how your framework isolates state, fixtures, and database access across workers.