Introduction to XPath

XPath (XML Path Language) is a query language designed to navigate and select nodes from XML and HTML documents. In test automation, XPath is one of the most powerful tools for locating elements on web pages.

Why Learn XPath?

As a test automation engineer, you’ll encounter situations where simple selectors fail:

Elements without unique IDs or classes
Dynamic content that changes between page loads
Complex nested structures like tables and lists
Elements that can only be identified by their text or position

XPath handles all these scenarios elegantly.

XPath vs CSS Selectors

Feature	XPath	CSS Selectors
Navigate up the DOM	✅ Yes (parent, ancestor)	❌ No
Select by text content	✅ Yes	❌ No
Complex conditions	✅ Yes (and, or, functions)	⚠️ Limited
Performance	⚠️ Slightly slower	✅ Generally faster
Readability	⚠️ Can be verbose	✅ Often cleaner

Rule of thumb: Use CSS selectors for simple cases, XPath when you need its unique capabilities.

Your First XPath

Let’s look at a simple HTML structure:

<form id="login">
  <input type="email" name="email" placeholder="Email" />
  <input type="password" name="password" placeholder="Password" />
  <button type="submit">Sign In</button>
</form>

Here are several ways to select the email input:

//input[@name='email']           ✅ Stable - uses name attribute
//input[@type='email']           ✅ Stable - uses type attribute
//input[@placeholder='Email']    ⚠️ Medium - placeholder may change
//form[@id='login']/input[1]     ❌ Fragile - relies on position

Key Concepts

1. Absolute vs Relative Paths

Absolute (/html/body/div/form/input): Starts from root, very fragile
Relative (//input[@name='email']): Starts anywhere, much more robust

Always prefer relative paths starting with //.

2. Nodes and Axes

XPath treats the document as a tree of nodes. You can navigate:

Down to children (/, //)
Up to parents (parent::, ..)
Sideways to siblings (following-sibling::, preceding-sibling::)

3. Predicates

Predicates ([...]) filter nodes based on conditions:

//button[@type='submit']         // Attribute equals
//button[contains(text(), 'Sign')] // Text contains
//li[position() > 2]             // Position comparison
//div[@class and @id]            // Multiple conditions

Common Mistakes to Avoid

❌ Don’t do this:

/html/body/div[2]/div[1]/form/div[3]/input

This absolute path will break with any DOM change.

✅ Do this instead:

//input[@data-testid=‘email-input’]

Uses a stable test attribute that won’t change accidentally.

Try It Yourself

Ready to practice? Head to the playground and try these XPaths on our sample login form:

Open in Playground →

Next Steps

Now that you understand the basics, let’s dive deeper into:

Relative vs Absolute Paths - Why relative paths are better
Attribute Selectors - Mastering @ syntax
Text Matching - Using text() and contains()