Recommended Free Tools
To add Percy to a working Cypress suite, install @percy/cli and @percy/cypress, import the Cypress SDK from your configured support file, and call cy.percySnapshot() after the Angular interface reaches a stable state. Set your Percy project token as PERCY_TOKEN and run the suite with npx percy exec -- cypress run. This setup follows BrowserStack’s Percy integration guide for SDK 3.0.0 and later; component-testing setup is a separate Angular and Cypress concern.
What Percy adds to Cypress
Cypress can capture screenshots, but it does not perform image comparison itself. Percy’s Cypress integration captures DOM snapshots through cy.percySnapshot(), then provides cloud rendering, comparison against a baseline, and a review workflow. A visual difference is a reason to inspect a change, not proof that application behavior is broken. See Cypress’s visual testing documentation.
As an Amazon Associate I earn from qualifying purchases.
The practical workflow is capture a known UI state, compare it with an approved baseline, and review the differences. Cypress’s documentation describes this capture-compare-review approach; Percy’s integration guide says comparisons default to the previous Percy build, with a base build configurable by the team. See BrowserStack’s Percy integration guide.
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 reinstallOutdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchInstall and configure the Percy Cypress SDK
1. Install the packages
From the Angular project root, add the Percy CLI and Cypress SDK as development dependencies:
#1 Best Overall
npm install --save-dev @percy/cli @percy/cypressThis is the documented setup for Percy Cypress SDK 3.0.0 and later. Check your project’s installed versions before applying it to an older suite.
2. Import the SDK from Cypress support
Load the SDK from the support entrypoint configured for your Cypress project. For a current Cypress end-to-end setup, that file is commonly cypress/support/e2e.js:
// cypress/support/e2e.js
import '@percy/cypress'The package README also shows cypress/support/index.js. Use the support file your project actually configures; the key is loading the SDK there so Cypress registers cy.percySnapshot().
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →3. Add a snapshot after the UI is ready
In an existing Cypress spec, navigate to the Angular application, wait for a meaningful ready condition, and then capture the state:
it('shows the expected Angular UI', () => {
cy.visit('/')
cy.get('[data-testid="ready"]').should('be.visible')
cy.percySnapshot('Ready state')
})Use names that distinguish the states you intend to compare. If you provide explicit snapshot names, the integration guide requires them to be unique. For responsive coverage, the guide demonstrates widths such as [768, 992, 1200]; confirm the current SDK options and choose widths that match the layouts your users need.
4. Provide the project token and run the suite through Percy
Create a Percy Web project and put its project token in your local environment or CI secret store as PERCY_TOKEN. Do not commit the token to source control. Run Cypress through Percy’s CLI:
npx percy exec -- cypress runThat command starts Percy’s capture process around the Cypress run. A plain cypress run without Percy running can disable snapshots. The CLI and token need to be available to the same process that runs Cypress.
Use Percy with Angular end-to-end tests
For end-to-end tests, Percy is layered onto the existing Cypress workflow: run the Angular app as your suite already does, drive it to the state under test, assert readiness, then call cy.percySnapshot(). Keep data and timing stable where possible. Cypress recommends controlling the conditions that influence rendering so visual comparisons are less noisy.
Rank #3
Useful snapshot targets include a fully loaded landing page, a completed form, an open navigation menu or dialog, a data view after loading, and a key success or error state. Prefer user-visible states that protect important flows over capturing every minor intermediate step.
Angular component testing is a separate setup
Do not treat Cypress’s Angular component-testing requirements as prerequisites for end-to-end testing. Cypress’s current Angular Component Testing documentation lists support for Angular ^21.0.0 and ^22.0.0. Those are component-testing support details, not a blanket statement about which Angular versions can run Cypress end-to-end tests. See Cypress’s Angular Component Testing guide.
Component-test prerequisites and configuration
- The
cypress/angularharness requires@angular-devkit/build-angular, including projects built with@angular/build. - Cypress 16.0.0 supports zoneless component testing without additional configuration; Angular 21 and 22 use zoneless by default.
- Angular CLI projects are automatically detected during Cypress component-testing setup.
A component-test configuration may look like this:
import { defineConfig } from 'cypress'
export default defineConfig({
component: {
devServer: {
framework: 'angular',
bundler: 'webpack',
},
specPattern: '**/*.cy.ts',
},
})This configuration is for component testing. If you supply a custom Angular projectConfig, Cypress warns that it replaces detected settings; you may need to repeat build options such as styles and Sass include paths. Check your actual angular.json and Cypress config when component compilation or styles fail. Percy’s snapshot SDK is separate from the Angular component dev-server and bundler setup.
TypeScript support
If TypeScript reports that cy.percySnapshot() does not exist, check that @percy/cypress is installed and imported from Cypress support. The Percy integration guide documents this tsconfig.json type configuration:
{
"compilerOptions": {
"types": ["cypress", "@percy/cypress"]
}
}Preserve any other project-specific type entries in your existing configuration.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshoot common setup problems
Snapshots do not appear
Run Cypress through npx percy exec -- cypress run, rather than invoking Cypress alone, and confirm that PERCY_TOKEN is set in the environment available to that process. The Percy package README documents that direct Cypress execution without Percy running disables snapshots.
TypeScript cannot find cy.percySnapshot()
Verify the package installation, support-file import, and TypeScript types entry shown above. Also check that the editor and test runner are using the project’s intended tsconfig.json.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsComponent tests fail to compile or styles are missing
First check the Angular component-testing support scope and ensure @angular-devkit/build-angular is available. If you supply custom Angular project configuration, include the build settings Cypress would otherwise detect, including required styles and Sass include paths.
An older Percy setup breaks after migration
For Percy Cypress 2.x projects moving to the 3.x CLI toolchain, remove the legacy @percy/cypress/task health-check task; it is no longer needed. Install @percy/cli if your scripts rely on the Percy CLI, then use the percy exec command.
Visual diffs are inconsistent
Check whether the page was captured before data, fonts, animations, or asynchronous content settled. Add Cypress assertions or waits tied to the actual UI state, and make time-dependent data deterministic where practical. Review the rendered difference before deciding whether it is a regression or an intentional change.
Or skip the browser setup
If you need a screenshot endpoint rather than Percy’s visual-baseline review workflow, ScreenshotNeo is a website screenshot API and MCP server. A single GET request can return PNG, JPEG, WebP, or PDF output; the API documentation is at ScreenshotNeo docs.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo removes cookie and consent banners, newsletter popups, and chat widgets before capture; each cleanup step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and responses identify the page verdict and billing status in headers. Its MCP server offers take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients. 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.
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.
