Writing Tests
Frames & Shadow DOM
Work with iframes and shadow roots while keeping tests scoped and maintainable.
Documentation goal: this page is written as practical product documentation, with enough context to help a real QA engineer decide how to use the feature in a maintainable test suite.
Why scope matters
Frames and shadow roots create separate DOM boundaries. A locator that works in the main page may not see into an iframe or web component until the test scopes into that boundary.
Frames
Use frame helpers when content lives inside an iframe, such as embedded checkout, third-party widgets, or isolated preview panels. Always wait for frame content before interacting.
Shadow DOM
Shadow DOM is common in design systems and web components. Prefer user-facing locators inside the scoped shadow root, and avoid reaching through private implementation details unless there is no stable alternative.
const checkout = await orbit.frame('Checkout frame');
await checkout.type('Card number', '4242424242424242');
await checkout.click('Pay');
const picker = await orbit.shadow('date-picker');
await picker.click('Next month');Practical checklist
- Keep the workflow readable enough that a QA engineer, developer, or product teammate can understand the intent without opening application source code.
- Prefer user-visible names, stable configuration, and clear evidence over hidden assumptions or brittle implementation details.
- Run the smallest useful check locally before adding it to CI, then verify that failures produce screenshots, logs, traces, or reports that explain what happened.
- Review this part of the suite regularly so outdated examples, stale setup, and obsolete workarounds do not reduce trust in the automation.
Common mistakes to avoid
- Do not add automation only to increase test count. Each page and test should protect a clear user journey, release risk, or debugging need.
- Do not hide important behavior inside helpers so deeply that the test no longer explains what the user is doing.
- Do not rely on fixed sleeps when the application can expose a meaningful ready state such as visible text, URL change, element availability, or completed evidence capture.
- Do not ignore failing artifacts. A report, screenshot, trace, or log entry should feed back into better product code, better waits, or clearer test data setup.
Was this page useful?
Your response is saved in this browser and helps shape the docs experience.