Locator strategy — the practice lesson

as a manual tester

You triage: which test cases are solid, which are fragile, which will haunt you next release.

→

in automation

Locators deserve the same triage. This lesson is pure practice: build a locator inventory for a real page, the exact prep step of any automation task.

Before automating a flow, professionals do a locator pass: walk the flow manually with DevTools open and record a locator for every element they'll touch. It surfaces problems early (duplicated ids, missing test attributes) and turns the coding step into assembly. Today you'll build the locator inventory for saucedemo's login → add to cart → checkout flow — the same inventory your Selenium tests in the next suite will use.

The inventory format

Grab the ready-made locator inventory template from the downloads page, or start from this shape:

locator-inventory.md — start yours like this

| Page      | Element            | Locator                       | Type | Matches |
|-----------|--------------------|-------------------------------|------|---------|
| Login     | username field     | #user-name                    | CSS  | 1       |
| Login     | password field     | #password                     | CSS  | 1       |
| Login     | login button       | #login-button                 | CSS  | 1       |
| Login     | error message      | [data-test='error']           | CSS  | 1       |
| Products  | page title         | .title                        | CSS  | 1       |

Verify every row before it enters the inventory

The console one-liner that makes this fast — it prints the match count for a CSS selector:

DevTools console

$$("#login-button").length
$$(".title").length
$x("//button[text()='Add to cart']").length

console output

> $$("#login-button").length
1        // unique — inventory-worthy
> $$(".title").length
1
> $x("//button[text()='Add to cart']").length
6        // not unique — fine for "all buttons", wrong for "the button"

The locator sandbox — practice live, right here

Below is a small fake shop page. Type CSS selectors or XPath into the box and watch matching elements light up green — exactly what $$() and $x() do in DevTools, without leaving the lesson. Then work through the eight challenges; your progress saves in this browser.

locator sandbox0 / 8 solved

Deluxe Bug NetSALE

$24.99

Pocket Debugger

$49.00

Magnifier ProSALE

$12.50

Repro-Steps Notebook

$8.00

type a selector and watch the page above…

⚡ challenges

○Select the cart badge (the red counter) by its id.

○Select all four product cards with one class selector.

○Select every "Add to cart" button (4 matches).

hint

a shared class, or [data-test^="add"]

○Select only the products on sale (2 matches).

hint

chain two classes with no space between them

○Select the Deluxe Bug Net's add button — and only that one.

○Select the free-shipping banner using its data-test attribute.

○Switch to XPath: select the element whose text is exactly 'Pocket Debugger'.

hint

//h3[text()='...']

○XPath, the real-world pattern: find 'Pocket Debugger' by text, climb to its card, select its price.

hint

//h3[text()='Pocket Debugger']/ancestor::div[contains(@class,'product')]//div[@class='product-price']

✓ all challenges passed — you can locate anything. The exercise below takes this to the real saucedemo.

Choosing when there are options

The username field can be reached as #user-name, [data-test="username"], [name="user-name"], .form_input:nth-child(1)… all match. Apply the priority you learned: id first (unique and short), data-test equally good, positional last. Write the winner in the inventory, not all four.

Why this lesson matters more than it looks: in Suite 04, By.cssSelector("#login-button") is just your inventory row wearing Java syntax. Testers who skip the locator pass end up debugging locators and Selenium simultaneously — two new skills at once, in the dark. You'll be debugging only one.

⚡ exercise · complete the checkout inventory

Finish the inventory for the full flow. Walk it manually (standard_user / secret_sauce) with DevTools open and record verified locators for:

Products page: Backpack add-to-cart button, cart badge (the little red counter), cart icon
Cart page: the item name in the cart, the Checkout button
Checkout step one: first name, last name, postal code fields, Continue button
Checkout step two: the item total ("Item total: $29.99" line), Finish button
Confirmation page: the "Thank you for your order!" header

Every row needs a verified match count of 1. Keep the file — Suite 04 automates this exact flow with this exact inventory.

show key answers

#add-to-cart-sauce-labs-backpack
.shopping_cart_badge
.shopping_cart_link
.inventory_item_name          (cart page)
#checkout
#first-name   #last-name   #postal-code   #continue
.summary_subtotal_label
#finish
.complete-header

references

key takeaways

A locator pass before coding turns automation into assembly and halves your debugging.
$$("sel").length / $x("xp").length verify uniqueness in one keystroke.
Your inventory from this lesson is literally the input to your first Selenium test.