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('[email protected]');
// 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