Reference
Visual Automation
Use screenshots, pixel checks, stable visual waits, and coordinate actions for canvas-heavy apps.
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.
When visual automation helps
Visual automation is useful for canvas apps, maps, charts, graphics editors, games, and custom controls where DOM state does not fully describe the user experience.
Use it carefully
Pixel checks are sensitive to fonts, scaling, antialiasing, browser version, device pixel ratio, and rendering timing. Use tolerance and stable waits. Prefer semantic assertions when DOM state can explain the behavior.
Evidence value
Visual snapshots are excellent debugging artifacts. They show what the user saw at a specific moment and can complement text assertions, traces, and console logs.
await orbit.visual.waitForStable();
await orbit.visual.snapshot('reports/chart.png');
await orbit.visual.expectPixel({ x: 40, y: 80 }, '#ff0000', { tolerance: 6 });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.