Puppeteer

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 (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 @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. 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 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"