Lesson 5 — DOM, XPath, and CSS Selectors

Title: DOM tree navigation, XPath, and CSS selectors

Description: Understand the DOM as a parent/child tree, then practice XPath and CSS patterns to find buttons, inputs, and nested elements in automation.

Why it matters for QA: Every UI test ends in a locator string. A clear mental model of the DOM plus a consistent selector strategy (id → data-testid → CSS → XPath) cuts maintenance time.

1. What Is DOM?

DOM = Document Object Model.

Browser converts HTML into a tree structure.

2. Example DOM

<div>

    <form>

        <input id="email">

        <button>
            Login
        </button>

    </form>

</div>

3. DOM Tree

div
 └── form
      ├── input
      └── button

4. Parent and Child Elements

form is parent.

input and button are children.

5. Sibling Elements

<input>
<button>

Same parent → siblings.

6. XPath

XPath finds elements by path.

7. XPath Example

//button

Finds all buttons.

8. XPath by Text

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

9. XPath by Attribute

//input[@id='email']

10. XPath Contains

//button[contains(@class,'primary')]

11. CSS Selectors

Very popular in automation.

11.1 By ID

#email

11.2 By Class

.btn

11.3 By Attribute

[data-testid='login-btn']

12 Parent Child Selector

form button

button inside form.

13 Direct Child Selector

form > button

Only direct child button.

14. QA Locator Strategy

Best order:

• id
• data-testid
• CSS selectors
• XPath