iframe
// Definition
An HTML element embedding one document inside another — a separate browsing context with its own DOM. Payment forms, embedded maps, and third-party widgets commonly live in iframes. Their content is isolated: the parent page's selectors don't reach into an iframe without explicitly switching context.
// Why it matters
iframes routinely hold the highest-stakes flows — payment fields (Stripe), OAuth consent, embedded checkouts — yet they're invisible to naive automation, which can't see inside. QA cares because testing a checkout often means testing across an iframe boundary, and not knowing how leads to "the button isn't there" failures on exactly the flows that matter most.
// How to test
// iframe content is a separate document — get its body, then query within:
cy.get('iframe[data-cy=payment]')
.its('0.contentDocument.body').should('not.be.empty')
.then(cy.wrap)
.find('[data-cy=card-number]').type('4242424242424242')
// (cypress-iframe plugin wraps this; Playwright uses frameLocator())// Common mistakes
- Querying the parent document for elements inside the iframe (never found)
- Cross-origin iframes that block access entirely (a real limitation to design around)
- Forgetting to switch back to the parent context after working in the frame
// Related terms
DOM
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.
Shadow DOM
An encapsulated DOM subtree attached to an element, whose internals are hidden from the main document's normal selectors — the technology behind web components. A `<custom-widget>` may contain a whole UI inside its shadow root that `document.querySelector` can't reach without explicitly crossing the boundary.
Browser Context
An isolated browser session with its own cookies, storage, and cache — like a fresh incognito window, but programmatic. Playwright's `browser.newContext()` creates one; each is fully independent. Contexts let one test run exercise multiple users simultaneously (e.g. a chat between user A and user B) without cross-contamination.