# Puppeteer

Add Buddy visual testing to your Puppeteer scripts - install the plugin, take snapshots, and run sessions with the bdy CLI.

This guide shows how to add Buddy Visual Tests to your existing Puppeteer scripts running on headless Chrome. Snapshots taken in your scripts 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 @buddy-works/visual-tests-puppeteer
```

Requires Puppeteer v23.10.0 or higher.

## Configure your scripts

Import the `takeSnap` function and call it on the pages you visit:

```javascript
import { takeSnap } from '@buddy-works/visual-tests-puppeteer';
import puppeteer from 'puppeteer';

const browser = await puppeteer.launch();
const page = await browser.newPage();

await page.goto('https://localhost:3000/');
await takeSnap(page, 'homepage');

await browser.close();
```

## Run the scripts

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

```bash
bdy tests visual session create "node test.js"
```

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.

## Let AI do it

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

```
Add Buddy Visual Tests to my Puppeteer scripts:
1. Install @buddy-works/visual-tests-puppeteer as a dev dependency
   (requires Puppeteer >= 23.10.0).
2. Import the snapshot helper in each script:
   import { takeSnap } from '@buddy-works/visual-tests-puppeteer';
3. After each meaningful, stable UI state, take a snapshot of the page:
   await takeSnap(page, '<descriptive-snapshot-name>');
4. Use kebab-case snapshot names; group related views with "/" (e.g. "checkout/step-1").
5. Do not change any script logic.
The scripts will be executed with: bdy tests visual session create "node test.js"
```


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