Manuals / Test Automation / Chapter 5

B · Technical Basics · beginner · Week 2–3 · Chapter 5 of 12

Selectors, the DOM, and stable locators

Flaky tests often start with brittle locators. Learn to read the DOM, prefer roles and test IDs, and treat selectors as product contracts — before you depend on any framework.

Path progress
35%

Step 1 of 4

Tour DevTools

Elements, Console, Network. You will live here. Practice selecting nodes and reading accessibility names.

Tour DevToolsDrag stickies · tap for tips
Study mapDrag stickies · tap for tipsKeep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Assert the UIdrag · tap →Retry wiselydrag · tap →Seed datadrag · tap →Close the loopdrag · tap →Keep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Pathwise hackdrag · tap →Tour DevToolsdrag · tap →Try thisdrag · tap →Follow the dashed drag · tap →

Do this now

Open any form. Find the accessible name of the submit button in DevTools Accessibility pane.

Was this step clear?
Chapter learning outcomes
  • DOM basics for testers
  • Role / label / test-id hierarchy
  • Why XPath spaghetti dies

Clear these before you leave

Side quest

Locator lab

On the-internet.herokuapp.com, list locators for 5 controls using roles first. Commit LOCATOR-LAB.md.