Stabilize the component state, capture to PNG, then compare it with a baseline using a dedicated diff tool.
Copy-paste example
Install @zumer/snapdom, select the rendered element, and capture it:
await document.fonts.ready
document.documentElement.classList.add('test-mode')
const blob = await snapdom.toBlob(
document.querySelector('[data-visual-test="profile-card"]'),
{ type: 'png', dpr: 1, cache: 'disabled' },
)
// Store or submit blob to your baseline/diff workflow.Why this pattern works
Fix viewport, data, time, fonts and animation state before capture. SnapDOM creates the screenshot; a runner or service remains responsible for baselines, thresholds and failure reporting.
Capture a stable visual fixture
Toggle the fixture state, capture it, then toggle again to see why baselines require deterministic input.
Limits and common mistakes
Output can vary when browser engines, fonts or device pixel ratios differ. Run comparisons in a controlled browser configuration when reproducibility matters.
Frequently asked questions
Is SnapDOM a complete visual testing framework?
No. It provides the capture step, not test orchestration, baseline storage or pixel-diff assertions.
Why use dpr: 1?
A fixed DPR prevents test machines with different display densities from producing different bitmap dimensions.
Capture it in the browser
Install SnapDOM and turn the DOM your users already see into a portable image.
Open the demoInstall from npm