Stop 07 · Web Automation TestingTopics · 2/10

Locators & XPath

In short

A test can only click what it can find. Locators are addresses for elements, and a good address keeps working even after a developer redecorates the page.

The strategies for finding a specific element on a page — CSS selectors, IDs, and XPath expressions — a foundational skill, since a test can't interact with an element it can't locate reliably.

The purple blob points at one window with a yellow curtain in a colourful apartment building.

Think of it like this

Finding a flat in a big society

'Third window from the left, fourth floor' breaks when they add a floor. 'Flat C-402, the one with the yellow curtain' still works. Good locators use stable names like ids, not shaky positions.

Watch it happen

Walking the page structure

html

body

form#login

div.footer

input#email

input[name=pwd]

button: Sign in

a: Help

1/5A page is a tree of elements, called the DOM. Every locator is a way to point at one node.

The big ideas

What you need to know

Prefer ids

A unique id or a data-testid attribute is the most stable locator you can get.

CSS for most cases

CSS selectors like .cart-item or input[type=email] are short, readable and fast.

XPath for text

XPath can match visible text and move to parents. Use it when CSS can't express what you need.

Test in DevTools

In Chrome DevTools, press Ctrl+F in Elements and paste a selector to see what it matches.

See it in code

Walk through the code

python

1from selenium.webdriver.common.by import By2 3# Best: unique and stable4email = (By.ID, "email")5save = (By.CSS_SELECTOR, "[data-testid='save-button']")6 7# Good: readable CSS8password = (By.CSS_SELECTOR, "form#login input[name='pwd']")9 10# XPath: match by visible text11sign_in = (By.XPATH, "//button[normalize-space()='Sign in']")12help_link = (By.XPATH, "//a[contains(@href, '/help')]")13 14# Avoid: breaks when layout changes15fragile = (By.XPATH, "/html/body/div[2]/div/form/button")

1/4ids and test ids are the first choice. They rarely change by accident.

Locators stored as (strategy, value) pairs. Pass one to driver.find_element(*email).

Save yourself the pain

Common mistakes

Oops

Right-click, Copy full XPath, paste into the test.

Do this instead

Write a short locator yourself using an id, test id or meaningful attribute.

Oops

Using a locator that matches five elements and hoping the first is right.

Do this instead

Check in DevTools that it matches exactly one element, or make it more specific.

Your mission

Locator treasure hunt

~25 min

Quick check

Which locator is most likely to survive a page redesign?

Go deeper

1Practice locating elements using ID, CSS selector, and XPath on a sample page.
2Learn why relying on brittle, auto-generated locators causes tests to break frequently.
3Build a personal preference order for locator strategies, favoring stable, meaningful attributes.