How to Run Cypress Screenshot Tests for an Indian Startup’s Web App

Short answer: Cypress can capture screenshots with cy.screenshot() and automatically capture test failures during cypress run. To check whether the appearance changed, add a visual-testing integration: Cypress captures the page, while a separate tool compares it with an approved baseline. Cypress itself does not compare images. Cypress’s visual-testing guide describes the capture, comparison, and review workflow.

For an Indian startup, the basic Cypress commands are the same as for any web app. Choose and test the states that matter to your product—such as English and localized content, currency and date formats, or responsive layouts—and run comparisons in a consistent browser and CI environment.

1. Decide what you mean by screenshot tests

“Screenshot tests” can mean two different things:

Screenshot capture: Save an image to help debug a test or inspect a page later. Cypress has this built in.
Visual regression testing: Compare a new image with an approved baseline and review the differences. This requires a plugin or service alongside Cypress.

A screenshot is evidence of the page at one moment. A difference is a reason to inspect the page, not proof of a bug: the change may be intentional, such as a redesigned checkout. Have a person review changes before approving a new baseline.

2. Capture screenshots with Cypress

Add Cypress to the existing project if it is not already installed, then place screenshots after the test has reached the state you want to inspect. The following example is a Cypress spec you can adapt to your app’s routes and selectors:

// cypress/e2e/checkout.cy.js
describe('checkout screenshot', () => {
  it('captures the ready checkout state', () => {
    cy.visit('/checkout')
    cy.contains('Order summary').should('be.visible')
    cy.screenshot('checkout-ready')
  })
})

Run the spec in the Cypress runner during development, or run the project’s configured Cypress command in CI. Cypress saves screenshots to cypress/screenshots by default. During cypress run, Cypress also takes a screenshot when a test fails by default. See the official screenshots and videos guide and configuration reference.

Capture a specific element

Use an element screenshot when the component itself is what you need to inspect:

cy.get('.order-summary')
  .should('be.visible')
  .screenshot('order-summary')

Element-level capture can make a focused visual check easier to review. Use a full-page screenshot when page layout, scrolling content, or relationships between sections are part of the behavior you want to cover.

Choose the screenshot behavior you need

cy.screenshot() accepts an optional name and options object. Consult the current command reference for the complete supported options and defaults for your Cypress version. Common choices include:

Name: Pass a stable name, such as checkout-ready, so the artifact is easy to find.
Target: Call the command on a subject, such as cy.get('.order-summary').screenshot(), to capture an element.
Capture mode: Use the documented capture option when you need to configure a viewport, full-page, or runner screenshot.
Failure screenshots: Cypress run mode captures failed tests by default. The screenshot guide documents configuration for disabling automatic failure screenshots if your workflow requires it.

Screenshot capture is asynchronous. Cypress documents that taking a screenshot takes around 100 ms, so the page can change between calling the command and the capture. Wait for a visible, meaningful condition and avoid triggering updates immediately before the screenshot. See the command’s timing notes.

3. Add visual comparison against a baseline

Cypress’s screenshot command creates images; it does not perform image comparison. To catch unintended appearance changes, add a visual-testing integration that can compare captured images locally or in CI and provide a way to review and approve changes. Cypress’s visual testing guide describes open-source plugins and hosted integrations, including Sauce Labs Visual and SmartBear VisualTest. Check each vendor’s current documentation for pricing, plan limits, regional availability, and supported review features; those details are not established here.

Choose high-value checkpoints. Start with important pages, key states, and shared components that would be costly to break. Every additional snapshot creates review work.
Capture stable states. Wait for app data and rendering to settle before taking the screenshot.
Generate and inspect a baseline. Use the integration’s documented setup to record an approved initial image. Review it before treating it as the expected result.
Run the same check in CI. Keep the browser, viewport, and rendering environment consistent with baseline creation where possible.
Review each difference. Fix unexpected UI changes. Approve a new baseline only after confirming the change is intended.

Keep the implementation maintainable

Use the comparison integration’s documentation for its exact Cypress setup, configuration, snapshot commands, and baseline approval process; these differ between tools and may change. Before adding snapshots broadly, agree on who reviews changes and how an intentional redesign updates the baseline. Cypress Cloud can store and share Cypress artifacts, but artifact sharing alone is not image comparison; confirm that the selected tool covers the comparison and approval steps you need.

4. Make screenshots repeatable

A screenshot check is useful only if ordinary rendering variation does not overwhelm real changes. Stabilize the test inputs and the environment:

Wait on app state, not just navigation. Assert that the target content is visible or that the relevant operation has finished.
Control network data. Use cy.intercept() with a fixture when a changing API response would make the page vary between runs. Wait for the aliased request before capturing.
Fix the viewport. Use the same viewport dimensions for baseline and comparison runs. Cover additional responsive sizes as separate deliberate checkpoints.
Keep rendering consistent. Browser version, operating system, fonts, and display scaling can affect pixels. Use the same CI image and browser configuration where possible.
Handle motion deliberately. Wait for transitions to finish or disable animation in the test environment. Cypress notes that action-command animation settings do not prevent an unrelated animation from appearing mid-frame in a screenshot.
Mask narrowly. If a third-party widget or other uncontrollable region changes, hide or mask only that area using the integration’s supported mechanism. Avoid loosening a whole-page comparison threshold as the first response.
Cover locale states intentionally. If the app supports multiple locales, capture meaningful states such as date, currency, translated text, and text expansion as explicit test cases. These are product test choices, not an India-specific Cypress configuration.

For exact viewport, animation, interception, and configuration APIs, use the Cypress documentation for your installed version and the visual tool’s own instructions.

5. Troubleshoot common problems

Symptom	Likely cause	What to do
No screenshot appears	The test did not reach the screenshot command, or you are looking in the wrong output location.	Check the test result and run artifacts. Cypress’s default screenshots folder is `cypress/screenshots`; check project configuration if it was changed.
Screenshot shows a loading or incomplete page	The capture ran before data or UI updates finished.	Assert on the target content or wait for the relevant intercepted request before capturing.
Images differ on every CI run	Data, browser, fonts, viewport, animation, or a third-party region varies between runs.	Stabilize fixtures and rendering conditions; wait for motion; isolate or narrowly mask only the variable region.
A test failure creates an unexpected image	Cypress captures screenshots on test failures in `cypress run` by default.	Decide whether failure artifacts help debugging. If not, use the documented screenshot configuration for your Cypress version to disable them.
Images exist, but no visual test fails when they change	Capture is configured, but comparison is not.	Add and configure a visual-testing integration. Cypress’s built-in screenshot command does not compare images.
Element screenshot is blank or clipped	The element may not be visible, may be covered, or may not have reached its final layout.	Assert visibility, wait for layout-changing content, and check the selected element and capture mode against the command reference.
A changed baseline was accepted accidentally	Baseline updates were approved without reviewing the visual difference.	Restore the last reviewed baseline if available, inspect the change, and define who may approve future updates.

6. Performance, reliability, and cost

Each deliberate screenshot checkpoint takes time to capture and, with a comparison integration, time to compare and review. Cypress documents capture as taking around 100 ms; total job time also depends on page loading, tests, artifact handling, and the integration. Do not infer suite performance from the capture time alone.

Keep the snapshot set focused on high-value pages and states. Stable fixtures and a consistent CI environment reduce noisy changes and the time needed to review them. Cypress screenshots can support debugging without a visual comparison service; hosted comparison tools may have their own costs and limits, which should be checked with the provider before adoption. The research does not establish current prices for the named visual-testing integrations.

Or skip the browser setup

If your goal is to capture a site from a URL outside the Cypress test suite, ScreenshotNeo is a website screenshot API and MCP server. It takes a URL in one GET request and returns PNG, JPEG, WebP, or PDF. Its API documentation covers the request options.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

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)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await Bun.write('shot.webp', res);

Replace YOUR_API_KEY and the example URL with your credentials and target. ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before the shot. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed; response headers report the page verdict and billing status. Its MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots.

Frequently asked questions

Does Cypress compare screenshots by itself?

No. Cypress captures screenshots; visual comparison requires a separate integration.

Where does Cypress save screenshots?

The default folder is cypress/screenshots. Project configuration can change it.

Are screenshot tests different for an Indian startup?

The Cypress capture workflow is general. Select locale, currency, date, privacy, and CI requirements based on your own product and team; the location alone does not change Cypress screenshot behavior.

Should every page have a visual snapshot?

No. Start with important pages, states, and components your team can reliably review and maintain.