How a page is built — the DOM

as a manual tester

You see a login page: a logo, two boxes, a button.

→

in automation

The browser sees a tree of elements. Automation talks to that tree — the DOM — not to the pixels.

Every web page is written in HTML: nested tags that the browser turns into a live tree called the DOM (Document Object Model). When Selenium "clicks a button", it finds a node in this tree and fires a click on it. To automate a page, you must be able to read its tree.

Anatomy of an element

a login form, as HTML

<form id="login-form">
  <input type="text"     id="user-name" class="input_error form_input" placeholder="Username">
  <input type="password" id="password"  class="form_input"              placeholder="Password">
  <input type="submit"   id="login-button" value="Login">
</form>

Read one line: the tag (input) says what kind of element it is; attributes (id, class, type, placeholder) describe it. Two attributes matter most for testers:

id — meant to be unique on the page. The gold standard for locating.
class — styling labels, often shared by many elements (note one element can have several, space-separated).

the DOM as a tree — the same form as above

DevTools — your new best friend

Open saucedemo.com (our practice app for the whole course). Press F12, or right-click the username box → Inspect. The Elements panel shows the DOM with your element highlighted — this is exactly the HTML above, live. Hover nodes in the panel and watch the page highlight; click the arrows to unfold the tree.

DevTools Elements panel — saucedemo username field

▼ <div class="form_group">
    <input class="input_error form_input" placeholder="Username"
           type="text" data-test="username" id="user-name" name="user-name">
  </div>

DevTools open on saucedemo.com — the username field highlighted in the Elements panel

Notice data-test="username" — a test attribute the developers added specifically for automation. When your team's app has these, always prefer them: they never change for styling reasons. Asking developers to add them is a professional move, not a weakness.

Why pixels don't matter: the page can be redesigned — new colors, new layout — and your automation won't notice, as long as the DOM structure holds. Conversely a "tiny" refactor that renames ids breaks everything. This is why locator strategy (next two lessons) is a real skill.

⚡ exercise · inspect five elements

On saucedemo.com with DevTools open, inspect and write down the tag, id (if any), and classes of:

The username field
The password field
The Login button
The red error message (trigger it: click Login with empty fields)
The bot image on the right

Bonus: which of the five has a data-test attribute? (Answer: nearly all — saucedemo is automation-friendly.)

references

key takeaways

The DOM is the live tree the browser builds from HTML; automation talks to it, not to pixels.
id and class are the attributes you'll use most; data-test attributes are gold when present.
F12 / right-click → Inspect is how you read any page's tree.