Use Cypress end-to-end tests to drive your Remix app to a known state, then pass a screenshot to an image-comparison plugin or hosted visual-testing service. Cypress can capture screenshots with cy.screenshot(), but it does not compare images itself; that comparison is what makes a check a visual regression test. This is an external Cypress workflow, not Remix’s documented first-party test integration.
What visual testing checks—and what Cypress does
A functional assertion can confirm that text appears or a button has a particular class. It cannot establish that the page actually looks right: layout, fonts, icons, spacing, colors, and rendered shapes can still be wrong. Visual regression testing compares a current rendering with an approved baseline and surfaces image differences for review. Cypress’s visual-testing documentation explains this distinction and states that Cypress does not perform image comparison itself.
As an Amazon Associate I earn from qualifying purchases.
cy.screenshot() captures an image; it is not a visual diff. To detect regressions, pair capture with a comparison plugin or service and a process for reviewing and approving baseline changes. The Cypress screenshot command documentation also notes that capture is asynchronous, so establish and verify the intended page state before taking the image.
Free tools Windows power users keep installed
One-click scans. No signup required.
Set up Cypress E2E tests for a Remix app
Run the Remix app at a stable local URL, then have Cypress visit that URL as an end-to-end test. Keep the server startup separate from the Cypress test process: Cypress’s E2E guidance recommends testing against a running web server rather than starting the server from a Cypress script. The exact command to run Remix depends on the project and deployment setup, so use the command appropriate to your application.
- Start Remix. In a separate terminal, run your project’s development or preview command and confirm the app is reachable at the local URL you intend to test.
- Set Cypress’s base URL. In the Cypress E2E configuration, set
baseUrlto that running app’s origin. A minimal configuration shape is:import { defineConfig } from 'cypress'; export default defineConfig({ e2e: { baseUrl: 'http://localhost:3000', }, });Change the origin and port to match your running app. This is a configuration example, not a universal Remix port or start command.
- Visit the page and establish a meaningful state. For example, open a menu, load a dashboard with controlled data, or submit a form to show validation feedback. Assert that the expected state is present before capturing it.
- Run the visual comparison. Install and configure the plugin or service you selected, then call its documented snapshot command after the setup and assertions. Snapshot command names and baseline workflows differ by tool;
cy.screenshot()alone only creates a screenshot. - Review changes deliberately. Inspect diffs and approve a new baseline only when the visual change is intentional. Keep checkpoints focused on meaningful states, because each changed snapshot needs review.
A minimal test’s structure might look like this, with the comparison call replaced by the command from your chosen integration:
describe('dashboard visual state', () => {
it('captures the populated dashboard', () => {
cy.visit('/dashboard');
cy.intercept('GET', '/api/dashboard', { fixture: 'dashboard.json' });
cy.get('[data-cy=dashboard-title]').should('be.visible');
cy.get('[data-cy=summary-card]').should('contain', 'Quarterly summary');
// Replace with the selected visual-diff plugin or service command.
cy.screenshot('dashboard-populated');
});
});The example’s final line demonstrates capture only; it is not a regression assertion. Replace it with the integration’s snapshot-and-compare command to create a visual test.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Make screenshots repeatable
Visual diffs are useful only when an unintended change can be distinguished from ordinary rendering variation. Stabilize the inputs and rendering conditions before relaxing a comparison threshold across an entire page.
- Fix the viewport and rendering environment. Use an explicit viewport and, for local pixel-diff workflows, generate baselines and compare them in the same environment. Pin browser versions where practical.
- Control data and time. Use fixtures or intercepted network responses so the page receives predictable data. Freeze time with the browser clock if dates or other time-dependent content affect the image.
- Wait for the actual state. Assert that the content or UI state under test is visible. Avoid capturing while requests are incomplete or content is changing.
- Handle animation and motion. Disable CSS animations for the test or wait for them to finish before taking a snapshot.
- Mask only genuinely variable areas. If a small region cannot be made deterministic, use the comparison tool’s masking support for that area. Do not use a generous whole-page threshold to conceal unrelated visual changes.
- Choose the right capture scope. Use element-level snapshots for component regressions and full-page captures when page layout is the concern. Prefer a small set of deliberate checkpoints over a snapshot of every possible state.
Choose a comparison workflow
Cypress documents both local/community plugins and hosted visual-testing services. Local comparison can keep images within your team’s infrastructure, but the team must manage baseline storage, CI artifacts, and review. Hosted services can handle capture, storage, comparison, cross-browser rendering, and review, often for a subscription cost. Compare the actual workflow, rendering and browser coverage, data-control needs, CI or pull-request review, and cost before choosing; those capabilities and terms vary by vendor.
Cypress’s visual-testing page names hosted integrations and services including Applitools Eyes, Argos, Chromatic, Happo, LambdaTest SmartUI, Percy, Sauce Labs Visual, SmartBear VisualTest, and Wopee.io. It also lists local/community options including Cypress Image Diff and Cypress Image Snapshot. Check each vendor’s current Cypress compatibility, features, and pricing before adopting it. These are options named in Cypress documentation, not endorsements or claims about current plan terms.
For component-level visual work, Cypress identifies component testing as a natural fit. However, its current component-testing setup guide lists supported frameworks and bundlers without listing Remix. Treat mounting Remix components in Cypress as project-specific: verify your app’s bundler and runtime requirements rather than assuming a copy-paste integration. For routed and server-rendered behavior, the established approach described here is Cypress E2E against a running app.
Remix’s documented testing route
Remix’s testing guide documents an E2E path using its router behind a local HTTP server and a Playwright Page. That is the framework’s documented runner, not evidence that Cypress cannot test Remix. Use Cypress when it fits your team’s existing browser-test workflow; choose the documented Playwright route if you specifically want to follow Remix’s stated E2E setup.
Troubleshooting visual tests
The test passes, but there is no regression check
Cause: The test only calls cy.screenshot(), which captures but does not compare. Fix: Add a visual-diff plugin or hosted service, configure its baseline workflow, and use its comparison command.
The image differs on every run
Cause: The page may include changing API data, timestamps, animation frames, an unstable viewport, or different browser rendering conditions. Fix: Control responses and time, set an explicit viewport, finish or disable animations, and keep baseline generation and comparison environments consistent.
The screenshot shows a loading or intermediate state
Cause: The capture began before the target UI state was ready. Fix: Wait for a meaningful selector or assertion, and make the test’s data deterministic. Cypress documents screenshot capture as asynchronous and the app may change before the image is taken.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteA full-page diff is noisy
Cause: The test may be capturing irrelevant or uncontrollable regions, or checking more page area than the question requires. Fix: Capture the relevant element when appropriate, mask only a small genuinely variable region, and reserve full-page captures for layout coverage.
A Remix component test does not mount cleanly
Cause: Remix’s runtime or bundler setup may not match the component-testing configuration. Fix: Check Cypress’s supported component frameworks and bundlers and validate your project-specific setup; do not assume that Remix is listed as a ready-made component framework.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If your goal is to obtain a clean screenshot rather than build a Cypress visual-regression pipeline, ScreenshotNeo offers a screenshot API and MCP server. A screenshot API capture is not a replacement for a Cypress test’s application-state assertions or for a visual-baseline review workflow.
One GET request returns an image or PDF. For example, with cURL:
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 the request options and response details. ScreenshotNeo removes known consent banners, newsletter popups, and chat widgets before capture; those steps can each be turned off. Bot checks and 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 provides take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients. The free plan includes 1,000 shots per month without a card; paid plans start at $5 for 3,000 shots.
Sign up for ScreenshotNeo’s free plan: 1,000 screenshots a month, no card required.
Frequently Asked Questions
Can I use Cypress to test a Remix app even though Remix documents Playwright?
Yes. Remix’s documented E2E route uses Playwright, but that does not prevent Cypress from testing a Remix app through a running local server and Cypress E2E tests.
Does Cypress compare screenshots by itself?
No. Cypress captures screenshots; use a visual-diff plugin or hosted service for image comparison and baseline review.
Recommended Free Tools
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.
