Cypress

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 (requires Node.js v20+)
• Suite token exported as BUDDY_VT_TOKEN - copy it from the suite settings (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. See Reviewing & Approvals for the next step.

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:

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