Playwright

Run Dungbeetle in any existing Playwright project and get value immediately: your Playwright visual snapshots go under dungbeetle review, and every test run can be pushed to the cloud for a grouped, reviewable report — no changes to your tests.

Prerequisites

• Node.js 22 or newer.
• A project using @playwright/test — anything scaffolded with npm init playwright@latest works.

1. Initialize Dungbeetle

From the Playwright project root:

npm add -D dungbeetle
npx dungbeetle init

The wizard detects the Playwright project (via playwright.config.ts or the @playwright/test dependency), pre-fills the project name and git remote, and suggests the playwright template. Accepting the defaults writes a dungbeetle.config.json with a raw capture over your Playwright snapshots:

{
  "kind": "raw",
  "name": "playwright-snapshots",
  "paths": ["tests/**/*-snapshots/**"],
  "reportingDir": "playwright/snapshots"
}

The testDir is read from your Playwright config, so a custom e2e/ layout is picked up automatically. Non-interactive environments (CI, scripts) get the same result with npx dungbeetle init --template playwright or --yes.

2. Baseline and test

Playwright's *-snapshots/ directories (created by toHaveScreenshot()) are your visual baselines — Dungbeetle snapshots them by content digest:

npx playwright test              # produce/refresh Playwright snapshots
npx dungbeetle update            # record the dungbeetle baseline
npx dungbeetle test              # later: any added/removed/changed snapshot fails

A changed Playwright snapshot shows up as a named digest diff:

~ files["home.spec.ts-snapshots/home-chromium-darwin.png"].digest: sha256:… → sha256:…

Where Playwright's --update-snapshots refreshes its own screenshots, dungbeetle update refreshes the dungbeetle baseline over them — the same mental model, one level up.

3. Push every test run to the cloud

Add the Dungbeetle reporter to playwright.config.ts:

export default defineConfig({
  reporter: [["list"], ["dungbeetle/playwright"]],
});

Each npx playwright test run now also writes .dungbeetle/playwright/report.json — one result per test, grouped per Playwright project (browser) under playwright/<project> reporting directories, with the first screenshot attachment of each test included. Push it for review:

npx dungbeetle push --report .dungbeetle/playwright/report.json

The run review page groups results by reporting directory — ./playwright/chromium, ./playwright/firefox, … — so a multi-browser run reads like a tree, not a flat list.

Reporter options: ["dungbeetle/playwright", { outputFile: "custom.json", projectName: "my-app" }].

Terminology map

Playwright	Dungbeetle
project (browser config)	target / reporting directory (playwright/<project>)
snapshots (*-snapshots/, --update-snapshots)	baselines (dungbeetle update)
npx playwright show-report	run review page (cloud) / HTML report (local)
reporter	dungbeetle/playwright reporter