Good and bad locators

The same order summary twice: once built for testing, once without. Switch to version 2 to see which locators survive a redesign.

A test finds an element by its locator. If the locator depends on things that change — the layout, the text, generated class names — the test breaks with the next release, even though nothing is wrong with the application. Map both sections below, run your tests, then switch to version 2.

You are looking at version 2: the same screen after a redesign. The ids and data-test attributes did not change; the layout, the texts, the order of the items and the generated class names did.

A. Built for testing

An id on every single element, data-test on the ones that repeat.

John Smith · john.smith@example.com

Your order 1042

Paid
ItemQtyPrice
Ceramic mug 1 €9.50
Paper filters 3 €6.00
Coffee beans, 1 kg 2 €24.00

Total €39.50

B. Built without testing in mind

Generated class names, nested divs, text only, and an id that changes on every load.

John Smith · john.smith@example.com
Your order 1042
Paid
Ceramic mug
1
€9.50
Paper filters
3
€6.00
Coffee beans, 1 kg
2
€24.00
Total €39.50
Note for the courier

Locators, from the most to the least stable

LocatorWhy
id, data-testMade for finding the element; a redesign leaves them alone. data-test where an id does not fit, e.g. rows of a list.
name, label, ARIA (role, aria-label)Part of the form and of accessibility, so they change rarely.
CSS classMade for the look; a new design changes it.
TextGets reworded and translated, and is rarely unique: both sections above have a "Cancel" button, and a locator by text finds the first one.
Position, absolute XPath (/html/body/div[2]/…)Breaks when anything above or around the element moves.
Generated id or class (input-3f9a1c, css-1x9f3k)Changes with every build, or even with every page load.

What to practise

Page objects: guide, section 1.

Tested in VAF-Demo

A test of this page from VAF-Demo: the whole VAF chain, from the page to the element, is in the test.

[TestCase("/practice/mapping")]
[TestCase("/practice/mapping?version=2")]
public void StableLocatorsSurviveTheRedesign(string path)
{
    SharedContext.LetsOpen(path);

    SharedContext.App.Should().HaveSection<MappingPage.Order>()
        .That.Should().HaveElement<MappingPage.Order.Total>()
            .That.AsLabelText().Should().HaveValue("€39.50")
        .AndAlso().Should().HaveElement<MappingPage.Order.Note>()
            .That.AsTextInputField().LetsInsert("Ring twice")
        .AndAlso().Should().HaveElement<MappingPage.Order.SaveNote>()
            .That.AsButton().LetsClick()
        .AndAlso().Should().HaveElement<MappingPage.Order.Cancel>()
            .That.AsButton().LetsClick()
        .AndAlso().Should().HaveElement<MappingPage.Order.Status>()
            .That.AsLabelText().Should().HaveValue("Cancelled");
}

On GitHub (opens in a new tab)