The Browser & DOM

JavaScript exists to make web pages come alive: menus that open, forms that complain, feeds that refresh without reloading. All of it works by editing the browser’s live model of the page — the DOM. For you specifically, this phase is the job: an automated test finds elements in this tree, acts on them, and reads the results back out of it. The DOM is your future workplace.

Every web page’s structure is written in HTML — plain text wrapped in tags, like <li class="todo">buy milk</li>. The tag name (li) says what kind of thing this is; anything else inside the angle brackets, like class="todo", is an attribute — extra information about that one element. CSS is a separate language for how things LOOK (colors, spacing, layout) — and it uses the same kind of selectors you’re about to learn, just to say which elements to style instead of which ones to grab in code.

A web page looks like a picture, but to the browser it’s a family tree of elements — the DOM. Every button, heading and input is a node on that tree, and JavaScript can find any node, read it, change it, or listen to it.

Finding nodes is done with selectors — little address patterns like “the button inside the login form.” When a user clicks, an event ripples through the tree, and code can catch it at any level.

Pay extra attention here: this tree is exactly what you’ll automate for a living. A Playwright test is, at heart, “find this element, act on it, check the result.” Testers who write good selectors are worth gold; this phase is where that skill starts.