Free tools Windows power users keep installed
One-click scans. No signup required.
To add Percy visual regression testing to Cypress, install @percy/cli and @percy/cypress, import the Cypress integration in your support file, and call cy.percySnapshot() after the page reaches the state you want to check. Run Cypress through percy exec -- cypress run with your Percy project token in PERCY_TOKEN so Percy can create a build and receive the snapshots.
What Percy adds to a Cypress test
Cypress drives the browser, test data, and application interactions. The Percy Cypress integration adds the cy.percySnapshot() command; the Percy CLI wraps the test run and uploads snapshots. Percy then renders snapshots across browsers and responsive widths in its cloud and provides a dashboard for comparing changes, reviewing diffs, and approving intended updates. See Cypress’s visual testing guide and the Percy Cypress integration README.
As an Amazon Associate I earn from qualifying purchases.
Percy is one way to add visual checks, not a requirement for Cypress. Cypress also describes open-source plugins that compare screenshots locally or in CI, as well as hosted services.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minuteInstall and configure Percy for Cypress
1. Install the packages
From the root of the Cypress project, install the CLI and integration as development dependencies:
#1 Best Overall
npm install --save-dev @percy/cli @percy/cypress2. Load the Cypress command
Import the integration in the support file Cypress actually loads. The Percy README uses cypress/support/index.js as its example; projects can have a different configured support entry point.
import '@percy/cypress'If the command is unavailable in a test, confirm that this import is in the active support file and that Cypress loads that file for the relevant testing mode.
3. Take a snapshot at a meaningful state
Call cy.percySnapshot() after the test has established that the page is ready. For example:
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
describe('Account page', () => {
it('shows the signed-in state', () => {
cy.visit('/account')
cy.get('[data-testid="account-ready"]').should('be.visible')
cy.percySnapshot('Account page: signed in')
})
})The assertion is specific to this example; replace it with a condition that proves your own interface has reached the state worth capturing. Give snapshots descriptive, unique names. The integration’s default name is the full test title.
4. Set the project token and run the Percy process
Set your Percy project token in the PERCY_TOKEN environment variable using your local environment or CI provider’s secret store, then wrap the Cypress command:
npx percy exec -- cypress runDo not commit a real token to source control. Running Cypress without the Percy process disables Percy snapshots; the wrapper and token allow Percy to create a build and receive uploads. The Percy Cypress documentation describes this upload workflow.
Rank #3
Make snapshots stable and useful
Wait until the interface has settled
A snapshot taken during a loading transition can produce a diff even when the intended design has not changed. Cypress’s guidance is: “Best Practice: Take a snapshot only after you confirm the page is done changing.” Use a functional assertion that signals readiness rather than relying on an arbitrary pause. For interactions, assert that the resulting state is visible before snapshotting.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, 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 minuteControl the inputs that affect rendering
- Use stable test data so that names, counts, and other dynamic values do not change between runs.
- Control time-dependent content, such as clocks or date labels, when it appears in the captured region.
- Keep the test’s rendering conditions consistent between baseline and comparison runs.
- Capture meaningful pages or components rather than every transient state in the test.
Percy’s visual checks are most useful when a diff reflects a real UI change rather than variable test setup or a page captured before it is ready. The rendering and review workflow is described in Cypress’s visual testing documentation.
Run the tests in CI without a server-start race
Start the application server and wait until it is responding before invoking Cypress. Cypress warns that starting a server in the background and immediately starting tests can race: the test runner may begin before the app is ready. Cypress documents start-server-and-test, wait-on, and the official Cypress GitHub Action’s start and wait-on options as ways to gate tests on readiness. Add PERCY_TOKEN through your CI provider’s secret-management mechanism and run the test command under percy exec.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
The exact CI configuration depends on the provider and how the application is started. Keep the readiness check and Percy-wrapped Cypress command in the same test workflow, and do not substitute a guessed fixed sleep for evidence that the server is available. See Cypress’s CI overview.
Troubleshoot common problems
No Percy build or uploaded snapshots
- Likely cause: Cypress was run directly instead of through Percy, or the token was not available to that process.
- Fix: Run
npx percy exec -- cypress runand verify thatPERCY_TOKENis set in the shell or CI job that launches it. Keep the token in a secret store, not the repository.
cy.percySnapshot is not recognized
- Likely cause: The integration import is missing or placed in a support file Cypress does not load.
- Fix: Add
import '@percy/cypress'to the project’s configured Cypress support entry point, then rerun the test.
Snapshots show loading, incomplete, or inconsistent content
- Likely cause: The snapshot ran before the page finished changing, or test data and time-dependent content vary between runs.
- Fix: Add a meaningful Cypress assertion immediately before the snapshot and stabilize the data and rendering conditions.
Cypress fails to load the app in CI
- Likely cause: Tests start before the background application server is ready.
- Fix: Gate the test command on a server readiness check with a documented option such as
wait-on,start-server-and-test, or the Cypress GitHub Action’sstartandwait-onsettings.
Choose a visual-testing approach
Before adopting a service or plugin, check how it captures the interface and fits your review workflow. Cypress lists Percy, Chromatic, Happo, LambdaTest SmartUI, Sauce Labs Visual, SmartBear VisualTest, and Wopee.io among commercial options, alongside open-source approaches. Their capabilities and terms can change; verify current service details directly.
Recommended Free Tools
| Decision point | What to establish |
|---|---|
| Capture method | Does the workflow compare screenshots, DOM snapshots, or an archived UI? |
| Rendering | Are comparisons local or in a vendor cloud, and which browsers and viewport widths are available? |
| Scope | Can it cover the pages or components your tests need? |
| Baselines and review | How are baselines updated and intended changes approved? |
| CI and data | How does it integrate with your CI, and what data-handling requirements apply? |
| Commercial terms | What current pricing and contract terms apply? Verify them with the provider. |
Cypress’s guide is a useful starting point for the range of approaches: Visual testing in Cypress.
Or skip the browser setup
If you need a screenshot rather than a Percy visual-regression build, ScreenshotNeo is a website screenshot API and MCP server. Its one-call API example is:
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. ScreenshotNeo accepts cookie and consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, with response headers indicating the page verdict and billing status. Its MCP server gives AI agents tools for screenshots, page information, and PDF capture. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots.
Sign up for 1,000 free screenshots a month, with no card required.
Frequently asked questions
Can Percy run with Cypress locally?
Yes. Set the project’s PERCY_TOKEN in your local environment and run Cypress through npx percy exec -- cypress run.
Does Percy replace Cypress assertions?
No. Cypress assertions establish application behavior and readiness; Percy adds visual snapshots and a review workflow for appearance changes.
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.
