Playwright

This guide shows how to add Buddy Visual Tests to an existing Playwright 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 @buddy-works/visual-tests-playwright
$

Configure your tests

Wrap the Playwright test object with the plugin fixture and take snapshots wherever you want a visual checkpoint:

javascript
import { test as base } from "@playwright/test";
import withVisualTestPluginFixture from "@buddy-works/visual-tests-playwright";

const test = withVisualTestPluginFixture(base);

test("Homepage", async ({ page, visualTestPlugin }) => {
  await page.goto("https://localhost:3000/");
  await visualTestPlugin.takeSnap(page, "homepage");
});

Run the tests

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

bash
bdy tests visual session create "npx playwright test"
$

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 Playwright 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-playwright as a dev dependency.
3. In the test files, replace the `test` import from @playwright/test with a
   wrapped version: import { test as base } from "@playwright/test";
   import withVisualTestPluginFixture from "@buddy-works/visual-tests-playwright";
   const test = withVisualTestPluginFixture(base);
4. Add the `visualTestPlugin` fixture to each test callback and call
   `await visualTestPlugin.takeSnap(page, "<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 playwright test"