DOM
// Definition
The Document Object Model — a tree-shaped, in-memory representation of an HTML (or XML) document that the browser builds after parsing the page source. Each element becomes a node, and JavaScript (and test tools like Playwright and Selenium) interact with the page by traversing and manipulating this tree. Understanding the DOM is essential for writing stable locators: a query like `#submit-btn` targets the DOM node, not the raw HTML string.
// Why it matters
The DOM is the live tree of the rendered page that every UI test reads and acts on. Understanding it is foundational for QA: why an element "isn't there yet" (not rendered), why a locator misses (wrong node), and why Shadow DOM / iframes need special handling all come back to how the DOM is structured at the moment the test runs.
// How to test
// Assert on DOM state, and reach into encapsulated trees when needed
cy.get('[data-cy=list]').children().should('have.length', 5)
// Shadow DOM is hidden from normal queries — opt in:
cy.get('my-widget').shadow().find('[data-cy=inner-btn]').click()
// iframe content lives in a separate document:
cy.get('iframe').its('0.contentDocument.body').then(cy.wrap)
.find('[data-cy=embedded]').should('be.visible')// Common mistakes
- Querying for an element before the framework has rendered it
- Forgetting Shadow DOM / iframe boundaries (normal selectors don't cross them)
- Asserting on detached nodes after a re-render replaced them
// Related terms
Locator
A description of how to find an element on a page — by id, CSS, XPath, role, or test attribute. Modern frameworks prefer role and test-id locators because they're resilient to DOM changes.
Auto-waiting
A framework feature that pauses an action until the target element is actionable (visible, enabled, stable). Eliminates most need for explicit sleeps and reduces flake.
Assertion
A statement in a test that checks an expected condition holds. If it doesn't, the test fails. The core of every automated test.