Review before your agents ship
Agents change UI faster than anyone can open a browser. Buddy renders every change, diffs it against an approved baseline, and hands you, or your agent, the exact pixels that moved.
How Visual Tests work
Every change, human or agent written, clears the same checkpoint before it touches your baseline.
- 01PlanA ticket, a prompt, a fix.
- 02Change landsAn agent or dev writes it.
- 03Visual TestsView diffed, pixel by pixel.
- 04Human reviewApprove, or send it back.
- 05Baseline updatedThe new reference is set.
See what your agents changed
Buddy compares what the browser actually painted, not the code behind it. You get baseline and current displayed side by side. Every difference outlined — per browser, per device.
Chrome 1920×1080
Safari iPhone 15
Firefox iPad ProEvery browser, every device
Chrome, Firefox and Safari, from HD desktop to iPhone, Pixel and Galaxy. Each variant resolves its own baseline, so a mobile-only regression can't hide behind a clean desktop.
Only the changes worth your time
Set the diff threshold, or hand Buddy the CSS and XPath selectors for the parts that never sit still — clocks, carousels, ad slots — so rendering noise never fails a build.
What Visual Tests do
Every comparison runs in the pipeline that ships your code.
One baseline per branch.
Compared against the approved version from your branch's ancestor commit — you review each change once.
Gates the pipeline.
The approval action suspends the run while in GitHub, the commit status blocks the merge.
Buddy Works behind auth.
Headers, cookies and localStorage keys injected on page visit. Auth-protected pages included.
Agent-ready by design
The whole loop runs without a browser: capture, compare, review. Whatever writes your UI can also check it.
- Connect to Buddy
- bdy mcp --tools suites
- visual test suites · 1 linked
- Run the visual suite
- bdy tests visual session create "npx playwright test"
- session 128 · 12 views · 3 changed
- Read back what changed
- pricing/herolayout shift
- pricing/plan-cardstyle drift
- checkout/summarymissing element
- checkout/summary lost its total row — that one's mine
- Edit src/checkout/Summary.tsx
- Re-run the suite
- session 129 · 2 changed · 0 unintended
- Handing off 2 intentional changes for review
90-second setup
Wrap your existing E2E run and Buddy captures snapshots as your tests navigate, or skip the test code entirely with Storybook.
Set up tests for Playwright
Wrap Playwright's test with the Buddy fixture, then call takeSnap() on any stable UI state.
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("http://localhost:3000/");
await visualTestPlugin.takeSnap(page, "homepage");
});One CLI to run it all
Scriptless capture, wrapped E2E runs, CI gating — every flow above starts from the bdy CLI. Install it and capture your first snapshot.
Go deeper
Hands-on guides for adding visual tests to the stack you already run.
