XPath and CSS selector practice for maintainable automation
Interviewers still ask how you locate elements when IDs are unstable and layouts shift. The goal is not memorizing long XPath strings—it is knowing when CSS is enough, when XPath axes help, and how to pair locators with accessibility-friendly queries in tools like Playwright. ITJobNotify’s locators, table, iframe/shadow, and form modules give you nested tables, repeated cards, and dynamic lists to rehearse resilient strategies on-site.
CSS selectors: strengths and limits
CSS is fast to read and works well for classes, attributes, and parent-child relationships. It struggles with text nodes and some sibling traversals that XPath handles more naturally.
XPath: when axes save you
Use XPath thoughtfully for table cell relationships (`//th[.="Price"]/following-sibling::td`), repeated components without unique IDs, or navigating to a parent from a known child. Avoid copy-pasting fragile absolute paths from devtools.
Modern alternative: role and label queries
Where frameworks support `getByRole`, `getByLabel`, or similar, prefer user-visible hooks. Practice explaining how you would combine semantic queries with CSS/XPath fallbacks for legacy markup.
Practice surfaces
Use the locators, table, and iframe/shadow labs. Challenge yourself to locate the same element three ways (CSS, XPath, role/label) and compare readability.
What to practice
- Refactoring duplicated locators into page objects or composable helpers.
- Explaining why a locator broke after a UI refresh and how you fixed it.
- Balancing strictness vs resilience for dynamic lists.
Who should use this guide
- Automation learners moving beyond record-and-replay.
- SDET candidates asked to whiteboard locator strategies.
- Teams standardizing locator style guides.
Suggested testing scenarios
- Target a button inside the nth card without relying on auto-increment IDs.
- Locate a table cell based on column header text.
- Handle a list that reorders after filtering.
Practice on ITJobNotify (first-party lab)
Run scripts against our first-party practice lab: stable data-testid hooks, optional challenge mode, and mock APIs—no third-party demo required.
- XPath & CSS locators
Nested cards, repeated classes, tables—stable data-testid + harder selectors.
- Iframe & shadow DOM
Same-origin iframe form + shadow-root controls.
- Form validation
Multi-step form, required fields, regex, conditional field.
- Web table
Sort, search, pagination, row actions, selection.