Free tools Windows power users keep installed
One-click scans. No signup required.
Use Cypress open mode when you need a DOM snapshot for debugging: run the spec in cypress open, then hover a Command Log entry to restore the DOM, CSS, URL, and relevant element state at that command. Click the entry to pin it; for action commands, use the snapshot menu to switch between before and after states. This is a temporary, rehydrated DOM—not a PNG and not a video frame.
For durable regression evidence, choose a different artifact: a persisted object or element snapshot (with a snapshot package whose commands match your Cypress version), a cy.screenshot() image, or a hosted visual-testing service. The right choice depends on whether you need inspectable structure, pixel diffs, cross-browser rendering, or CI retention.
What a Cypress DOM snapshot actually is
In open mode, Cypress records a snapshot for every command so you can time-travel through the test. The runner keeps a rehydrated copy of the application DOM and CSS as they existed at that moment. It recreates the page in the runner, allowing normal inspection rather than showing a flattened image.
- Inspectability: open browser DevTools on the restored state to examine markup, computed styles, accessibility properties, and element state.
- Context: Cypress can restore the URL and highlight a found element when the command yielded one.
- Retention: the snapshots are an in-memory debugging buffer.
numTestsKeptInMemorycontrols retention and is 50 tests by default. - Purpose: open-mode snapshots are for understanding a run, not an archival baseline or an assertion by themselves.
Because the copy is rehydrated, JavaScript side effects and external resources may not behave exactly as they did during the original command. Treat the displayed state as a diagnostic representation of that point in the test.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteCapture and inspect a snapshot in Cypress open mode
-
Start the interactive runner
From the project directory, run
npx cypress open(or your package script), select the end-to-end or component testing mode, and launch the spec containing the state you want to investigate. -
Find the command in the Command Log
The log contains commands and hooks in execution order. Each entry has a recorded state when Cypress could capture one.
-
Hover to time-travel
Move the pointer over an entry. Cypress restores the application snapshot, URL, and (when applicable) highlights the element found by that command. Use this to answer questions such as “what classes were present immediately after the click?”
-
Pin the state
Click the entry to keep that snapshot displayed while you inspect it. Click another entry to move to a different state.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy. -
Choose before or after for actions
Commands such as clicks can expose multiple snapshots. Open the snapshot menu on the command and select the before or after state to compare what the action changed.
-
Inspect with DevTools
With the state pinned, inspect the DOM, computed styles, focus, ARIA attributes, and layout in the browser’s developer tools. This is often more informative than an image when diagnosing a selector, state, or accessibility problem.
Do not rely on this view after the run has ended or after many more tests have executed. Once the in-memory retention limit is exceeded, earlier states are discarded. Increase numTestsKeptInMemory only when the extra memory is acceptable; it still does not turn open-mode snapshots into durable files.
Persist a snapshot for test data or regression checks
Cypress’s maintained snapshot-testing guidance uses “DOM snapshot” for the temporary GUI copy and distinguishes two persisted forms produced by snapshot commands:
- Object snapshot:
cy.wrap(value).snapshot()serializes a JavaScript value. - Element snapshot:
cy.get('<selector>').snapshot()serializes a selected element.
The exact command, package, file format, and update workflow are version-sensitive. Confirm the package documentation and your installed Cypress version before adding these commands to a suite. A typical element-oriented test (using the snapshot command supplied by your project’s package) looks like:
cy.get('[data-cy="account-card"]').snapshot()Run the test once to generate the package’s snapshot output, then inspect the generated snapshots.js (or the format used by that package) and the rendered result in the Test Runner. A saved snapshot becomes part of the test’s expected data: review it for accidental secrets, timestamps, randomized IDs, and unstable attributes before committing it. Updating a snapshot should be an intentional code review decision, not an automatic response to every diff.
Make saved snapshots stable
- Select a small, meaningful component instead of the entire application shell.
- Use stable
data-cyselectors and remove generated IDs or timestamps from the captured value. - Stub data and clock-dependent behavior before invoking the snapshot command.
- Keep snapshots readable enough that a reviewer can identify the behavioral change.
DOM snapshot versus cy.screenshot()
These features answer different questions. A DOM snapshot preserves inspectable structure and style state; a screenshot preserves rendered pixels as an image artifact.
| Artifact | What it contains | Storage and access | Best use |
|---|---|---|---|
| Open-mode DOM snapshot | Rehydrated DOM and CSS at a command | Temporary in-memory state in the interactive runner; retention controlled by numTestsKeptInMemory |
Interactive debugging and time travel |
| Persisted object snapshot | Serialized JavaScript value | Snapshot files managed by the project’s snapshot package | Data-shape regression checks |
| Persisted element snapshot | Serialized selected element | Snapshot files managed by the project’s snapshot package | Component markup regression checks |
cy.screenshot() |
PNG image of the rendered page or chained element | File under the configured screenshotsFolder; automatic failure images in cypress run unless disabled |
Pixel evidence, bug reports, and image-based visual tools |
| Hosted visual service | Provider-rendered images, diffs, and review metadata | Provider retention and dashboard | Cross-browser baselines, approvals, and team review |
Use cy.screenshot() when a person needs to see exactly what was painted. It can be called directly, chained from a command that yields one DOM element, or given a name and options object:
cy.screenshot('checkout-error')
cy.get('[data-cy="invoice"]').screenshot('invoice-card')The command is asynchronous (Cypress’s current API notes describe capture as taking roughly 100 ms). A rapidly changing interface can therefore produce an image slightly after the command was issued. Wait for the state you intend to document before capturing it. Full-page mode scrolls and stitches the page; fixed or sticky elements may consequently appear repeatedly in the stitched image.
During cypress run and CI, Cypress captures screenshots for failed tests unless screenshotOnRunFailure is disabled. These files are useful artifacts, but they are not DOM snapshots and do not provide computed styles or accessibility inspection.
Make snapshot and visual tests deterministic
Live responses change, so a page can produce a different DOM or image even when your code is unchanged. Control the inputs before capturing either kind of snapshot.
cy.intercept('/api/items', { fixture: 'items' }).as('getItems')
cy.visit('/items')
cy.wait('@getItems')
cy.get('[data-cy="items-list"]').snapshot()
// or: cy.get('[data-cy="items-list"]').screenshot('items-list')- Put representative, stable data in a fixture.
- Stub the request with
cy.intercept()before the application makes it. - Wait for the aliased request and for visible loading indicators to settle.
- Freeze other sources of churn such as rotating banners, random IDs, current-time labels, animations, and ads.
- Capture the smallest useful element when a full-page artifact adds unrelated noise.
Deterministic input reduces visual churn; it does not replace behavioral assertions. Keep assertions for outcomes such as “the item is added” and use snapshots to document structure or appearance.
Recommended Free Tools
Choosing a workflow by question
“Why did this command fail?”
Use the open-mode snapshot: hover the failing command, pin it, and inspect the restored DOM and computed styles. Check the preceding command as well to locate the transition that introduced the problem.
“Did this component’s markup change?”
Use a persisted element snapshot on a deliberately scoped selector. Review and commit the generated snapshot, and update it only when the markup change is expected.
“Did the pixels change?”
Use cy.screenshot() or a visual service. Stabilize fixtures and waits first, then compare images under the same viewport, browser, fonts, and device scale.
“Does it look correct in several browsers and widths?”
A hosted visual workflow is more appropriate because these services render and compare across configured browsers or responsive widths and provide baseline review. Cypress documents integrations such as Percy, Chromatic, Happo, LambdaTest SmartUI, Sauce Labs Visual, SmartBear VisualTest, and Wopee.io; check each provider’s current browser matrix, pricing, retention, and terms before selecting one.
Inspect snapshots from a failed CI run
Cypress Cloud Test Replay
For a recorded run, Test Replay lets you replay the exact execution and time-travel to the failure. Inspect the DOM, network requests, console logs, JavaScript errors, and element rendering at that point instead of trying to reproduce the failure locally.
Terminal-driven cypress tap workflow
When you need a terminal-oriented workflow, Cypress documents these commands:
cypress tap run cypress/e2e/orders.cy.js
cypress tap status --json
cypress tap reporter --test-id <id>Run the spec, poll its status as JSON, then request the reporter output for the failing test. The reporter includes the Command Log, error details, and the recorded DOM, which is useful on a machine without an interactive browser session.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshooting common snapshot problems
The Command Log shows no useful snapshot
Some commands do not yield a restorable application state, and earlier states may have been evicted. Re-run the spec in cypress open, hover a nearby command, and inspect the state immediately before the failure. If retention is the issue, raise numTestsKeptInMemory cautiously.
The restored page looks blank or incomplete
The snapshot is a rehydrated copy, not a live replay. Check the original command’s network and console errors, then add an explicit wait for the relevant request or selector. For a durable visual record, capture a screenshot after the page is ready.
A persisted snapshot changes on every run
Look for live API data, time, random values, generated IDs, animations, and third-party widgets. Stub responses with cy.intercept(), use fixtures, wait for loading to finish, and scope the snapshot to stable markup. Do not update the baseline until you understand the source of the change.
The screenshot is from the wrong moment
Because screenshot capture is asynchronous, a fast transition can finish before the image is written. Wait for a stable selector or assertion, disable or finish animations, and then call cy.screenshot(). For full-page captures, check whether fixed elements are repeated by the stitching process.
CI has a failure image but no interactive state
Failure screenshots are image artifacts. Use Cypress Cloud Test Replay or the cypress tap reporter for DOM, command, network, and console details; use the image to understand the visible symptom.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →The snapshot command is undefined
Persisted .snapshot() commands are not the same as Cypress’s built-in open-mode snapshots. Install and configure the snapshot package used by your project, import its support setup as documented, and verify command names against the package and Cypress versions you actually run.
Or skip the browser setup
If what you need is a clean image or PDF of a URL rather than an inspectable Cypress DOM state, ScreenshotNeo makes one HTTP request. It accepts consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each cleanup step can be disabled. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status. Its MCP server exposes take_screenshot, get_page_info, and capture_pdf to Claude, Cursor, and other MCP clients.
See the complete parameter list in the ScreenshotNeo documentation. This cURL example captures Stripe as WebP:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpThe same request in Python:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)And in Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo includes full-page and element capture, dark mode, device presets or custom viewports, retina scale, PDF controls, custom CSS and JavaScript, selector waits, request blocking, headers, cookies, user agents, timezone and geolocation, transparent backgrounds, resizing, configurable-TTL caching, signed links, async jobs with signed webhooks, bulk capture for up to 100 URLs per call, a usage API, and an OpenAPI specification. Parameters used by other screenshot APIs are accepted to ease migration.
| Plan | Included shots | Price |
|---|---|---|
| Free | 1,000 per month | $0, no card |
| Starter | 3,000 | $5 |
| Growth | 15,000 | $15 |
| Pro | 60,000 | $39 |
| Scale | 250,000 | $99 |
| Business | 1,000,000 | $249 |
Yearly billing provides two months free, and every feature is available on every plan. Start with 1,000 free screenshots a month with no card.
FAQ
Frequently Asked Questions
Can I export Cypress’s built-in open-mode DOM snapshot directly as a file?
The built-in snapshot is an in-memory debugging view. For a durable artifact, use a supported persisted snapshot command/package or save a screenshot, depending on whether you need serialized structure or pixels.
Do DOM snapshots replace accessibility assertions?
No. They help you inspect roles, names, attributes, and computed styles while debugging. Keep explicit accessibility checks and behavioral assertions in the test suite.
Should I commit every generated snapshot update?
Commit only intentional changes after reviewing the rendered and serialized output for unstable data, secrets, and unrelated markup changes.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsQuick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
