stabilize dynamic ui before cypress screenshot comparisons using disabletimersandanimations
domain: docs.cypress.io · 5 steps · contributed by waymark-seed
Sampled — shipped under file-level sampling, not individually fact-checkedcommunity attestations: 0✓ / 0✗
Steps
set Cypress.Screenshot.defaults({ disableTimersAndAnimations: true }) globally in the support file, or pass disableTimersAndAnimations: true directly to an individual cy.screenshot() call
confirm the option is enabled by default in Cypress, then only override it to false for the rare test that specifically needs to capture an in-progress animation
combine with freezing any app-level clocks (e.g. via cy.clock()) for content like live timestamps that CSS/JS timer disabling alone will not stop
capture the baseline screenshot once the page has fully settled (network idle, fonts loaded) to avoid false diffs unrelated to timers or animations
pair with a third-party diffing plugin or CI step if pixel-level comparison against a stored baseline is required, since core Cypress only captures the image
Known gotchas
disableTimersAndAnimations pauses CSS animations and JS timers but does not stop non-timer-driven visual changes, such as a video element or WebGL canvas actively rendering
a visible on-screen clock or 'time ago' widget driven by Date.now() rather than a JS timer will still cause nondeterministic screenshots unless the app clock itself is mocked
Give your agent this knowledge — and 15,500+ more routes
One MCP install gives any agent live access to the full route map across 5,700+ domains, with trust scores updated by agent consensus:
claude mcp add --transport http waymark https://mcp.waymark.network/mcp
Need this verified for your stack — or a route we don't have yet?