Tech Notes

XPath & CSS Selectors

During QA, some testers have to write automated tests. When this happens, it becomes important to find the element on the page for which the action needs to be performed (this could be a click, swipe, etc.).

But it is not enough to simply find the element in the DOM, it is also important to find the correct path to this element, since a correctly selected path to this element is the key to successful stable selectors.

In this post, we will look at two main types: Xpath and CSS.

What Are Selectors?

Selectors are patterns used to identify elements in the DOM (Document Object Model). Think of them as precise directions that tell your automation tool: “Click here,” “Type there,” or “Check this.”

Without good selectors, your tests become flaky and unreliable.

CSS Selectors

CSS (Cascading Style Sheets) selectors are primarily designed for styling, but testers use them to locate elements efficiently.

Advantages:

  • Clean and readable syntax
  • Fast in execution across most browsers
  • Well supported by testing frameworks like Cypress and Playwright

Common Examples:

/* By element */
button { }

/* By class */
.button-primary { }

/* By ID */
#login-input { }

/* By attribute */
input[type="email"] { }

/* Nested selector */
form#signup input.password { }

XPath Selectors

XPath (XML Path Language) comes from the XML world but is widely used in test automation for navigating complex DOM trees.

Advantages:

  • Extremely powerful — can traverse both forward and backward in DOM
  • Allows searching by text content (great for dynamic UIs)
  • Works even when attributes/classes are inconsistent

Common Examples:

# By element
//button

# By attribute
//input[@id='login-input']

# By text
//button[text()='Submit']

# By hierarchy
//div[@class='form']//input[@type='password']

CSS vs XPath — Which Should You Use?

Readability:

  • CSS Selector: Simple, concise
  • XPath: Verbose

Performance:

  • CSS Selector: Usually faster
  • XPath: Slightly slower

By Text:

  • CSS Selector: Not supported
  • XPath: Supported

Traversal (parent/child/sibling):

  • CSS Selector: Limited
  • XPath: Very powerful

Advices for QA:

  • Start with CSS selectors (cleaner, faster, easier).
  • Use XPath only when CSS isn’t enough (e.g., text-based search or tricky DOM structures).

Best Practices for QA Engineers

  • Prefer unique IDs or data-test attributes for selectors whenever possible.
  • Avoid selectors like nth-child() – they often break after UI changes.
  • Collaborate with developers to introduce test-friendly attributes (data-testid, qa-id).
  • Keep selectors centralized in your test framework for easy maintenance.

Additional advice

In modern frameworks like Playwright, you can mix strategies:

// Playwright example
await page.locator('input[data-testid="email"]').fill('qa@company.com');

// Or with XPath
await page.locator('//button[text()="Sign in"]').click();

Conclusion

Understanding how Xpath and CSS selectors work is fundamental knowledge for a professional AQA engineer.

The ability to build stable and reliable selectors improves the quality of your automated tests, making them resistant to most changes in the UI of the product being tested.

Keep this in mind the next time you are looking for a selector to automate your test case.

 

Follow our social media profiles so you don’t miss new updates: LinkedIn | Dev.to | Medium | Walltech

Comments are closed.