Recommended Free Tools
Cypress can capture screenshots during local and CI test runs, but its built-in cy.screenshot() does not compare images. For visual regression testing, add a comparison workflow that stores approved baselines, detects changes, and lets your team review them. For an Indian ecommerce site, make those snapshots reflect the checkout and payment states the site actually supports—including its implemented UPI handoff and return behavior.
What Cypress screenshots do—and do not—test
cy.screenshot() saves an image of the browser. During cypress run, Cypress also captures screenshots automatically when tests fail, including in CI; it does not automatically take failure screenshots during cypress open. These captures help diagnose what the page looked like, but a screenshot alone does not tell you whether the page matches an approved design.
As an Amazon Associate I earn from qualifying purchases.
For that, use a visual-testing integration: capture the current page, compare it with a baseline, and review the resulting changes. Cypress states in its visual testing documentation that it does not perform image comparison itself. Keep functional assertions separate: assert that the correct product, payment selection, or confirmation state is present before saving its image.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Choose checkout states from your actual site
Start from the customer journey and the features your store really supports. Do not assume every Indian retailer offers the same payment methods, locales, or checkout steps.
#1 Best Overall
Build a focused state list
- Product listing and detail pages, including representative product text, price, availability, and image states.
- Cart states such as empty, populated, quantity changed, and any applicable discount or delivery estimate.
- Address and checkout stages, including validation errors and the selected payment option.
- Order confirmation or the return state shown after a payment handoff.
- Supported desktop and mobile breakpoints, plus each locale the site actually offers.
Prioritize states where a visual defect would impair product selection, checkout, or payment completion. Snapshot shared components separately when that produces a smaller, more actionable review than capturing every page.
Represent the implemented UPI flow
NPCI describes merchant UPI integration through QR, intent, application-based, and collect modes. Its UPI FAQ describes an online flow in which a customer selects UPI, enters a payment address, receives a collect request in a UPI app, and authorizes it there. These are possible patterns, not a checklist every store must implement. Capture the states relevant to your merchant integration: for example, a displayed QR, an app handoff and browser return, or a collect-request status.
Test with a safe test environment and do not enter real credentials or approve real payments in a routine visual suite. A screenshot can document what the website rendered; it cannot prove that a transaction settled. Assert the return state your payment integration exposes, and test transaction outcomes through the appropriate payment-provider or backend checks.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsCheck supported locales rather than assuming them
For each locale the store supports, inspect representative long product names, address labels, validation messages, and buttons for wrapping, overflow, and layout shifts. BHIM’s NPCI product page lists 20 available languages; that is context for localization testing, not a requirement for every ecommerce site to support those languages.
Rank #2
Write deterministic Cypress capture tests
A useful visual test first proves that the intended state has loaded, then captures it. The example below uses Cypress’s screenshot API and a generic product route; replace the route, selectors, and assertions with ones from your application. It creates a diagnostic screenshot, not a baseline comparison by itself.
describe('product page visual state', () => {
it('renders the selected product before capture', () => {
cy.intercept('GET', '/api/products/*', { fixture: 'product.json' }).as('product');
cy.visit('/products/sample-product');
cy.wait('@product');
cy.get('[data-testid="product-title"]').should('be.visible');
cy.get('[data-testid="add-to-cart"]').should('be.enabled');
cy.screenshot('product-page-ready');
});
});For a comparison, connect the test to a visual-testing integration and follow its current setup for baseline capture, approval, and CI diffs. The provider determines how snapshots are named and compared; Cypress’s screenshot call alone does not supply those review controls.
Stabilize the page before capturing
- Use a consistent CI operating system, browser, Cypress version, viewport, and device scale factor so environment changes do not masquerade as design changes.
- Wait for meaningful content and layout-affecting assets such as fonts and images. Prefer assertions for the expected state over arbitrary sleeps.
- Stub changing API responses where appropriate so inventory, prices, or recommendations do not vary between runs.
- Disable or wait out animations where the application permits it. Mask only genuinely uncontrolled regions, and keep masks narrow so real defects remain visible.
- Use element-level snapshots for an isolated component when they make ownership and review clearer; use full-page snapshots when the overall layout is what matters.
Cypress’s guidance on visual testing covers comparison approaches and the importance of a stable rendering setup. For CI, start the application and wait for its URL to respond before running Cypress. Cypress documents Docker images whose tags pin the selected operating system, Node, Cypress, and browser environment; see its CI documentation.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Select a visual comparison workflow
The right choice depends on who owns the baselines, where rendering happens, and how reviewers approve changes. Cypress describes both open-source approaches that compare images locally or in CI and retain baseline files in team infrastructure, and paid services that may provide managed baselines, browser rendering, and dashboard or pull-request review.
| Decision | Team-owned local or CI comparison | Managed visual-testing service |
|---|---|---|
| Where comparison runs | Local machine or CI, depending on the chosen integration | May include service-side rendering; capabilities vary by provider |
| Baseline custody | Image files remain in team infrastructure | May use service-managed baselines and approvals |
| Browser and viewport coverage | Usually based on the environments your team configures | Some providers offer browser or responsive rendering matrices; verify the specific service |
| Review flow | Diffs and artifacts handled through your CI and repository workflow | May provide dashboards or pull-request review |
| Change handling | Depends on the comparison tool and its masking or ignore controls | May offer pixel-level or AI-assisted comparisons and region controls; verify the specific service |
| Cost and data handling | Cypress characterizes open-source plugins as free and images as retained in team infrastructure | Commercial services are paid subscriptions; check each service’s current pricing and data terms |
Cypress’s integration listing includes Applitools Eyes, Argos, Chromatic, Happo, LambdaTest SmartUI, Percy, Sauce Labs Visual, SmartBear VisualTest, and Wopee.io. Their capabilities differ; inclusion in the listing is not an endorsement. Review the current Cypress visual testing integration information and each provider’s own documentation before selecting one.
Keep visual checks separate from accessibility and behavior
A visually matching page can still be inaccessible or functionally broken. Cypress notes that image comparisons cannot evaluate standards-based checks such as text contrast, and highlights forms and checkout as areas needing explicit accessibility testing. Add independent checks for labels, keyboard operation, semantic controls, and accessibility rules, alongside assertions that verify checkout behavior.
Or skip the browser setup
If you need a screenshot outside a Cypress test, ScreenshotNeo provides a website screenshot API and MCP server for developers. A single GET request returns an image or PDF; it is not a replacement for Cypress assertions or a visual-baseline review workflow. The capture can accept cookie banners and remove more than 60 known consent platforms, newsletter popups, and chat widgets before taking the shot; each cleanup step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, with the response identifying the page verdict and billing status in headers. An MCP server exposes screenshot tools to AI agents, and the free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots.
Example cURL request:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options. Other available formats include PNG, JPEG, and PDF. ScreenshotNeo also supports options such as full-page or element capture, viewport and device settings, custom CSS or JavaScript, waits, request blocking, caching, and asynchronous jobs. Sign up for 1,000 free screenshots a month with no card.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshoot common visual-test failures
The snapshot changes on every run
Likely causes include changing API data, late-loading fonts or images, animations, or third-party widgets. Stub variable responses, wait for layout-critical content, control animation, and narrowly mask content that cannot be made deterministic.
Rank #4
- Used Book in Good Condition
A failure screenshot exists, but no visual diff appears
Cypress’s automatic failure screenshots are diagnostic captures, not image comparisons. Add a visual-testing integration and configure its baseline and review flow; confirm that the test reached the integration’s comparison step.
A screenshot is blank or captures the wrong state
The page may not have finished loading, or the test may have captured before the application updated. Wait for the relevant request and assert that the expected page element or state is visible before calling cy.screenshot().
CI differs from a developer’s local image
Check that browser, operating system, viewport, device scale, fonts, and application data are aligned. Cypress documents Docker images that can pin the execution environment; use a consistent image tag and configuration across runs.
A payment screenshot looks correct, but the order is not confirmed
A rendered image is not a financial record. Assert the website’s expected return or confirmation state and verify settlement through the payment or backend mechanisms appropriate to your test environment.
Best Value
Plan CI time, reliability, and review cost
Visual checks add browser rendering, image capture, comparison, and human review to a functional suite. Keep the snapshot set focused on high-value states instead of capturing every test. A controlled environment and stable fixtures reduce noisy diffs; masking too much, however, can conceal meaningful regressions. For hosted services, compare the current subscription price, browser coverage, retention, and data terms against the team’s review and compliance needs. No single cost or coverage figure applies across the providers listed by Cypress.
Frequently Asked Questions
Does Cypress compare screenshots by itself?
No. Cypress captures screenshots; image comparison and baseline review require a visual-testing integration.
Can a screenshot prove a UPI payment succeeded?
No. It records a rendered browser state, not transaction settlement. Verify payment outcomes through the integration or backend checks.
Quick 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.
