XPath Tutorial with Live Practice
Learn XPath by doing. Follow the steps, copy the examples, and validate everything inside the XPath playground. Perfect for Selenium newcomers and web scrapers who need a quick, practical introduction.
Lesson 1
Step 1: Select elements
Start with //tag to gather candidates. Example: //button to view all buttons on the page.
Practice in playground: /xpath?xpath=%2F%2Fdiv
Lesson 2
Step 2: Add predicates
Narrow results with [@attr='value'] or contains(). Example: //button[contains(@class,'primary')].
Practice in playground: /xpath?xpath=%2F%2Fdiv
Lesson 3
Step 3: Use text safely
Wrap text in normalize-space() to ignore whitespace. Example: //button[normalize-space()='Login'].
Practice in playground: /xpath?xpath=%2F%2Fdiv
Lesson 4
Step 4: Navigate parents/siblings
Reach related elements with axes: //label[text()='Email']/following-sibling::input.
Practice in playground: /xpath?xpath=%2F%2Fdiv
Lesson 5
Step 5: Assert counts
Use count() or position() to make selectors stable: //ul/li[position()<=3].
Practice in playground: /xpath?xpath=%2F%2Fdiv
Lesson 6
Step 6: Generate code
Copy Selenium/Playwright snippets from the playground and paste into your test suite.
Practice in playground: /xpath?xpath=%2F%2Fdiv
Try-it checkpoints
Open the playground in a new tab, paste the HTML sample, and run each answer to verify matches.
Select the visible error message
//p[contains(@class,'error') and not(contains(@class,'hidden'))]
Try itNext steps
- Review the functions reference for substring, translate, and count.
- Learn axes deeply in the axes guide.
- Practice selectors for login flows and tables using the Selenium guide.
- Compare with CSS selectors to pick the right tool: XPath vs CSS.