Robust Web Locator Strategy

A robust web automation locator strategy prioritizes stability, maintainability, and speed by favoring unique, immutable attributes over brittle DOM structures.

The best approach is to use dedicated test attributes (e.g., data-testid) or unique IDs, followed by CSS Selectors, and finally XPath.

This minimizes test failures (flakiness) during UI changes.

1. LECTURES

Full Course content

Sección 1: Introduction to the Course (2)

• 1. Stop Fighting Locators: Course Overview (4m)
• 2. How to Learn Locators Effectively (4m)

Sección 2: Locators in Test Automation (2)

• 3. Introduction to Section – Locators in Test Automation (1)
• 4. What Are Locators and Why They Matter (3)
• Why good locator matter?
  • Locators are the link between test code and webpage.
  • Must be unique and stable.
  • Weak locators break easily
  • Reliable locators make test consistent.
  • Goog locators make test reliable.
  • Bad locators make flaky test.
• 5. Types of Locators in Test Automation.
• Commmon locator types in Automation Tools
  1. ID
  2. Name
  3. Class
  4. Tag
  5. Link Text
  6. Partial Link Test
  7. XPath
  8. CSS
  9. JavaScript Executor

---

WebElement - INPUT

<input type="text" name="username" id="username">  

---

• Wheb basic locators fail.

  • Dynamic or missing ID.
  • Non-unique class name.
  • Hidden or nested elements.
  • Changing atributes.

• 6. Why We Use XPath and CSS Locators.

• Universal and framework-indepedent.

• Can locate elements with flexible patterns.

• Handle complex and dynamic DOM's.

  • XPath

  //input[@name='username']

  • CSS

  input[name='username']

  <button id="submit" class="btn" style="">Submit</button>

  • XPath Text (without '@')

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

  • CSS

  button#submit.btn

• When to use each

  • Use XPath for text and relative elements location.
  • Use CSS for simplicity and performance
  • Mix both when needed in real frameworks

• 7. Testing Locators in Chrome DevTools.

SUT = https://practicetestautomation.com/practice-test-login/

• Usando el atajo de teclado:

  • Command + Shift + C = Quick select element and open inspector on DevTools.

• Podemos abrir rápidamente la consola y dar clic derecho sobre el elemento en el DOM para encontrar un localizador preliminar.

  • Xpath = Copy Xpath
  • CSS = Copy Selector

• Dentro del inspector de elementos, si vamos a la CONSOLA podemos validar estos localizadores

  • XPath = $x('LOCALIZADOR')

    $x('//*[@id="username"]')

  • CSS = $$('LOCALIZADOR')

    $$('#username')

• Finalmente, damos ENTER y desde la consola de los DevTools, podemos hacer todo.

Sección 3: XPath Fundamentals (8)

• 8. Introduction to Section – XPath Fundamentals

• Introdcuction to this section

• 9. What is XPath?

• XML Path Language

• Created to navigate data stored in XML documents.

/html/body/div/button

• 10. XPath Terminology

• In XPath, everything inside an HTML document IS treated as a NODE.

  • Each TAG
  • Each attribute inside a TAG
  • Even visible Text between tags

• Types of NODES

  • Elements (created by an HTML tag)
    • a (hyperlink)
    • Input
    • Button
  • Attributes (stores extra details inside an element. like ID, Name or Class )
  • Text (holds the text visible to user between tags, like word SUBMIT inside a button)

<input type="text" name="username" id="username">  

In this example.

• Element node = input
• Attributes = type, name & id

<button id="submit" class="btn">Submit</button>

• Element Node = Button
• Attributes = id, class
• Text Node = Submit

---

PARENT and CHILD

ABSOLUTE PATH

RELATIVE XPATH

Append - Usefull Links

1 - Course

1. Udemy Course at XPath and CSS Locators for Test Automation

2 - Practice Pages for Automation

1. practicetestautomation.com by Dmitry Shyshkin.

3 - Keyboard hacks

1. On MAC OS
   1. Command + Shift + C = Quick select element and open inspector on DevTools.
   2. Control + F = Open search bar in DevTools to validate our selectors.
   3. Option + Shift + UP = Copy code Line
   4. Option + UP/DOWN = Move code Line
   5. Control + Number = Switch to tab in Chrome Browser.