# Cypress

Add Buddy visual testing to your Cypress tests - install the plugin, take snapshots with cy.takeSnap, and run sessions with the bdy CLI.

This guide shows how to add Buddy Visual Tests to an existing Cypress test suite. Snapshots taken in your tests are uploaded on every run and compared against the approved baseline.

## Prerequisites

- [`bdy` CLI installed](/docs/cli/getting-started.md) (requires Node.js v20+)
- Suite token exported as `BUDDY_VT_TOKEN` - copy it from the [suite settings](/docs/tests/visual-tests/suite-settings.md) (in Buddy pipelines the token is set automatically)

## Install the plugin

```bash
npm i -D @buddy-works/visual-tests-cypress
```

Requires Cypress v14 or higher. Add the import in your support file (`cypress/support/e2e.js`) so the custom command is registered:

```javascript
import '@buddy-works/visual-tests-cypress';
```

## Take snapshots in your tests

The plugin registers a custom `takeSnap` command:

```javascript
cy.takeSnap('Snapshot name');
```

## Run the tests

Wrap your usual test command with the CLI to create a visual test session:

```bash
bdy tests visual session create "npx cypress run"
```

When the run finishes, the session appears in the suite with all captured snapshots rendered across the browsers and devices configured in the [suite settings](/docs/tests/visual-tests/suite-settings.md). See [Reviewing & Approvals](/docs/tests/visual-tests/reviewing-approvals.md) for the next step.

<Hint type="info">
Running Cypress locally instead of CI? See [Running Visual Tests → Local](/docs/tests/visual-tests/running-visual-tests/local.md) for a full local walkthrough.
</Hint>

## Let AI do it

If you use an AI coding agent, paste this prompt to have it wire up visual tests in your existing specs:

```
Add Buddy Visual Tests to my Cypress test suite:
1. Install @buddy-works/visual-tests-cypress as a dev dependency.
2. Add `import '@buddy-works/visual-tests-cypress';` to cypress/support/e2e.js
   (or the support file configured in cypress.config).
3. In the specs, call `cy.takeSnap('<descriptive-snapshot-name>');` after each
   meaningful, stable UI state.
4. Use kebab-case snapshot names; group related views with "/" (e.g. "checkout/step-1").
5. Do not change any test logic or assertions.
The tests will be executed with: bdy tests visual session create "npx cypress run"
```


---
Original source: https://buddy.works/docs/tests/visual-tests/e2e-frameworks/cypress