Visual Tests

Visual regression testing in Buddy - capture snapshots from E2E tests, Storybook or plain URLs, compare them with approved baselines, and review changes.

Visual Tests catch UI regressions that functional tests cannot see. A functional test asserts that a button exists and can be clicked - it says nothing about the button rendering off-screen, a CSS refactor shifting the layout, or a font update breaking line wrapping. Visual Tests work on the rendered pixels: they capture snapshots of your app, compare them with a previously approved version, and report every visual difference for review.

Snapshots can come from wherever your UI already runs. Add a Buddy plugin to your existing Playwright, Selenium, Cypress or Puppeteer tests, upload a built Storybook to cover components without writing test code, or go scriptless and hand Buddy a list of URLs or a sitemap.

Each run creates a session in a suite, with snapshots rendered across every browser, system and device resolution enabled in the suite settings, and compared against the approved baseline. A session without differences passes automatically; a session with differences waits for review, which you can also use as an approval gate before a deployment.

Info
Sessions are created by the bdy CLI, so they can run anywhere - in Buddy pipelines, in GitHub Actions, or on your own machine.

In this section

Page What it covers
Getting started What Visual Tests are, the bugs they catch, and how suites, sessions and approvals fit together.
E2E frameworks Add the Buddy visual testing plugin to existing Playwright, Selenium, Cypress or Puppeteer tests.
Storybook Upload a built Storybook to get component coverage with no test code, plus a hosted Storybook per version.
Scriptless Testing Snapshot a list of URLs or a whole sitemap from the Visual Tests action or the CLI.
Running Visual Tests Where sessions can run: Buddy pipelines, GitHub Actions, or locally.
Suite Settings Every suite setting explained - browsers, devices, baseline branch, threshold, timeouts and per-snapshot overrides.
Sessions, Snapshots & Baselines How sessions and snapshots work, and how the baseline for each snapshot is picked.
Reviewing & Approvals Navigate diffs, approve or reject snapshots, auto-approve branches, and gate deployments on approval.
Troubleshooting Fixes for dynamic content, flaky rendering, authenticated pages and lazy-loaded elements.