# Getting started

Learn what Visual Tests in Buddy are, why they catch bugs functional tests miss, and how suites, sessions, and approvals work together.

Visual Tests catch UI regressions that functional tests can't 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.

Typical regressions caught by visual testing:

- **Layout shifts** - elements moving or overlapping after a CSS or dependency change
- **Style drift** - colors, fonts, spacing, or shadows changing unintentionally
- **Missing elements** - components that silently stop rendering
- **Responsive breakage** - views that look fine on desktop but break on tablet or mobile resolutions

<Hint type="info">
Visual Tests are currently in **Preview**. You can find them in the **TEST** section of the project sidebar.
</Hint>

## How it works

1. You group your visual tests into **suites**. A suite defines what to render (browsers, systems, device resolutions) and how to compare (baseline branch, diff threshold).
2. Every time you test a version of your app, a **session** is created in the suite. A session contains all snapshots captured during that run.
3. If a session introduces new views or changes to existing ones, it **waits for approval**. You review the diffs and approve or reject them.
4. Subsequent sessions are compared against the previously **approved** snapshots - so once you approve a change, it becomes the new reference.

This loop gives you a quick, reliable answer to one question: *does my version introduce any unintended visual changes?* If the session comes back clean, it does not. If it doesn't come back clean, you see exactly what changed, where, and on which devices.

See [Sessions, Snapshots & Baselines](/docs/tests/visual-tests/sessions-snapshots-baselines.md) for the details of how the reference version is determined.

## Creating your first suite

1. In the project sidebar, go to **TEST** → **Visual Tests**
2. Click **Add suite...**
3. Follow the onboarding for your framework of choice

![Visual Tests suite onboarding with framework tabs](/docs/tests/visual-tests/suite-storybook.png 640x378)

## Choose how to capture snapshots

There are three ways to feed snapshots into a suite - pick whichever fits your setup:

| Approach | Best for | Guide |
| --- | --- | --- |
| **E2E test plugins** | Teams with existing Playwright, Selenium, Cypress, or Puppeteer tests | [E2E frameworks](/docs/tests/visual-tests/e2e-frameworks.md) |
| **Storybook** | Component libraries and design systems - no plugin needed | [Storybook](/docs/tests/visual-tests/storybook.md) |
| **Scriptless testing** | Snapshotting live pages by URL or sitemap - no test code at all | [Scriptless Testing](/docs/tests/visual-tests/scriptless-testing.md) |

Once snapshots are flowing, wire the suite into your CI: [Buddy Pipelines](/docs/tests/visual-tests/running-visual-tests/buddy-pipelines.md), [GitHub Actions](/docs/tests/visual-tests/running-visual-tests/github-actions.md), or [your local machine](/docs/tests/visual-tests/running-visual-tests/local.md).


---
Original source: https://buddy.works/docs/tests/visual-tests/getting-started