Web DOM: A Complete Guide for QA Automation Engineers

𝐖𝐡𝐚𝐭 𝐢𝐬 𝐭𝐡𝐞 𝐃𝐨𝐜𝐮𝐦𝐞𝐧𝐭 𝐎𝐛𝐣𝐞𝐜𝐭 𝐌𝐨𝐝𝐞𝐥 (𝐃𝐎𝐌)?

The Document Object Model (DOM) is a programmatic representation of a web page (HTML). It allows developers to modify and update web pages using JavaScript, making them interactive.

This is what enables users to:

Click buttons
Fill forms
See dynamic content appear and disappear

ℹ️ When a user interacts with a website, JavaScript updates the DOM behind the scenes to reflect those changes without refreshing the whole page.

𝐒𝐢𝐦𝐩𝐥𝐞 𝐞𝐱𝐚𝐦𝐩𝐥𝐞:

When a user clicks "Add to Cart" on an e-commerce site, the cart icon updates and a message appears. That's JavaScript updating the DOM to show those changes instantly.

𝐇𝐨𝐰 𝐭𝐨 𝐕𝐢𝐞𝐰 𝐚𝐧𝐝 𝐈𝐧𝐬𝐩𝐞𝐜𝐭 𝐭𝐡𝐞 𝐃𝐎𝐌

Opening the DOM Inspector

Right-click anywhere on a webpage
Select "Inspect"
Look at the "Elements" tab content

𝐔𝐧𝐝𝐞𝐫𝐬𝐭𝐚𝐧𝐝𝐢𝐧𝐠 𝐭𝐡𝐞 𝐃𝐎𝐌 𝐒𝐭𝐫𝐮𝐜𝐭𝐮𝐫𝐞

You'll see all the HTML elements organized in a tree structure:

Elements can be expanded or collapsed to view their contents
Each element has parent, child, and sibling relationships
The structure reflects the nesting of HTML tags

ℹ️ When you right-click and inspect a specific element, the Elements tab automatically highlights that exact element in the tree.

────────────────────────────────────────

🟢 𝐖𝐡𝐚𝐭 𝐢𝐬 𝐭𝐡𝐞 𝐃𝐎𝐌 𝐚𝐧𝐝 𝐖𝐡𝐲 𝐒𝐡𝐨𝐮𝐥𝐝 𝐐𝐀 𝐄𝐧𝐠𝐢𝐧𝐞𝐞𝐫𝐬 𝐂𝐚𝐫𝐞?

The Document Object Model (𝐃𝐎𝐌) is the bridge between a test automation code and the web pages you're testing.

Testing frameworks like Playwright rely on DOM manipulation to execute automated tests:

Element Location: Frameworks use CSS selectors and XPath to find elements in the DOM
Action Simulation: Clicks, text input, and navigation all happen through DOM interaction

────────────────────────────────────────

🟠 𝐓𝐡𝐞 𝐐𝐀 𝐀𝐮𝐭𝐨𝐦𝐚𝐭𝐢𝐨𝐧 𝐖𝐨𝐫𝐤𝐟𝐥𝐨𝐰:

𝐒𝐭𝐞𝐩 𝟏: Identify Target Elements

Open Developer Tools (F12) and inspect the elements you need to interact with:

⟩ Find unique identifiers (IDs, classes, attributes)

⟩ Identify selectors that won't break easily (avoid dynamic IDs or complex nested paths)

𝐒𝐭𝐞𝐩 𝟐: Write a Test Code

Translate findings into a test automation code.

For example, to click a login button:

</>┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈</>

𝐩𝐚𝐠𝐞.𝐥𝐨𝐜𝐚𝐭𝐨𝐫(‘𝐛𝐮𝐭𝐭𝐨𝐧#𝐥𝐨𝐠𝐢𝐧’).𝐜𝐥𝐢𝐜𝐤()

</>┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈</>

This tells the framework: "Find the button element with ID 'login' in the DOM and click it."

𝐒𝐭𝐞𝐩 𝟑: Framework Execution

Behind the scenes, the testing framework:

⟩ Uses JavaScript to interact with the DOM elements for the selector

⟩ Waits for the element to be ready (visible, enabled, etc.)

⟩ Performs the requested action by triggering DOM events

𝐄𝐱𝐚𝐦𝐩𝐥𝐞: 𝐋𝐨𝐠𝐢𝐧 𝐅𝐥𝐨𝐰

The DOM looks like this:

</>┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈</>

<𝐟𝐨𝐫𝐦 𝐜𝐥𝐚𝐬𝐬=“𝐥𝐨𝐠𝐢𝐧-𝐟𝐨𝐫𝐦”>

⠀ ⠀ <𝐢𝐧𝐩𝐮𝐭 𝐢𝐝=“𝐮𝐬𝐞𝐫𝐧𝐚𝐦𝐞” 𝐭𝐲𝐩𝐞=“𝐭𝐞𝐱𝐭” />

⠀ ⠀ <𝐢𝐧𝐩𝐮𝐭 𝐢𝐝=“𝐩𝐚𝐬𝐬𝐰𝐨𝐫𝐝” 𝐭𝐲𝐩𝐞=“𝐩𝐚𝐬𝐬𝐰𝐨𝐫𝐝” />

⠀ ⠀ <𝐛𝐮𝐭𝐭𝐨𝐧 𝐢𝐝=“𝐥𝐨𝐠𝐢𝐧-𝐛𝐭𝐧”>𝐋𝐨𝐠𝐢𝐧</𝐛𝐮𝐭𝐭𝐨𝐧>

</𝐟𝐨𝐫𝐦>

</>┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈</>

Python Playwright Test Code for those elements would be:

</>┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈</>

𝐩𝐚𝐠𝐞.𝐥𝐨𝐜𝐚𝐭𝐨𝐫(’#𝐮𝐬𝐞𝐫𝐧𝐚𝐦𝐞’).𝐟𝐢𝐥𝐥(‘𝐭𝐞𝐬𝐭𝐮𝐬𝐞𝐫@𝐞𝐱𝐚𝐦𝐩𝐥𝐞.𝐜𝐨𝐦’)

𝐩𝐚𝐠𝐞.𝐥𝐨𝐜𝐚𝐭𝐨𝐫(’#𝐩𝐚𝐬𝐬𝐰𝐨𝐫𝐝’).𝐟𝐢𝐥𝐥(‘𝐒𝐞𝐜𝐮𝐫𝐞𝐏𝐚𝐬𝐬𝟏𝟐𝟑’)

𝐩𝐚𝐠𝐞.𝐥𝐨𝐜𝐚𝐭𝐨𝐫(’#𝐥𝐨𝐠𝐢𝐧-𝐛𝐭𝐧’).𝐜𝐥𝐢𝐜𝐤()

</>┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈</>

────────────────────────────────────────

🟣 𝐏𝐫𝐨 𝐓𝐢𝐩 𝐟𝐨𝐫 𝐐𝐀 𝐀𝐮𝐭𝐨𝐦𝐚𝐭𝐢𝐨𝐧 𝐄𝐧𝐠𝐢𝐧𝐞𝐞𝐫𝐬

Before writing test code, verify a selector works in the Browser Console (Developer Tools).

Open the Console and type:

</>┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈</>

𝐝𝐨𝐜𝐮𝐦𝐞𝐧𝐭.𝐪𝐮𝐞𝐫𝐲𝐒𝐞𝐥𝐞𝐜𝐭𝐨𝐫(‘𝐛𝐮𝐭𝐭𝐨𝐧#𝐥𝐨𝐠𝐢𝐧-𝐛𝐭𝐧’)

</>┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈</>

If it finds the element, the selector is good to be used in the test.

────────────────────────────────────────

𝐓𝐚𝐤𝐞𝐚𝐰𝐚𝐲:

✅ The DOM is a programmatic representation of HTML

✅ Testing frameworks use the DOM to find and interact with elements

✅ "Elements" tab in Developer Tools allows to inspect and understand DOM structure

𝐏.𝐒. 🚩 𝐈𝐟 𝐲𝐨𝐮 𝐡𝐚𝐯𝐞𝐧’𝐭 𝐰𝐚𝐭𝐜𝐡𝐞𝐝 𝐢𝐭 𝐲𝐞𝐭, 𝐲𝐨𝐮𝐫 𝐧𝐞𝐱𝐭 𝐬𝐭𝐞𝐩 𝐢𝐬 𝐭𝐡𝐞 𝐅𝐑𝐄𝐄 𝟑-𝐩𝐚𝐫𝐭 “𝐌𝐚𝐧𝐮𝐚𝐥 𝐐𝐀 → 𝐒𝐃𝐄𝐓” 𝐰𝐨𝐫𝐤𝐬𝐡𝐨𝐩, 𝐚 𝐬𝐡𝐨𝐫𝐭 𝐦𝐢𝐧𝐢-𝐜𝐨𝐮𝐫𝐬𝐞 𝐭𝐡𝐚𝐭 𝐠𝐢𝐯𝐞𝐬 𝐲𝐨𝐮 𝐭𝐡𝐞 𝐟𝐮𝐥𝐥 𝐫𝐨𝐚𝐝𝐦𝐚𝐩 𝐭𝐨 𝐛𝐞𝐜𝐨𝐦𝐢𝐧𝐠 𝐚 𝐦𝐢𝐝-𝐥𝐞𝐯𝐞𝐥 𝐒𝐃𝐄𝐓 𝐚𝐧𝐝 𝐩𝐚𝐬𝐬𝐢𝐧𝐠 𝐢𝐧𝐭𝐞𝐫𝐯𝐢𝐞𝐰𝐬.

Click Here to Start: https://www.skool.com/qa-automation-career-hub/classroom/078530b1

2 comments