Add visual regression testing when
- A design is settled and you want to protect it across releases.
- You already have functional tests and want to catch change nobody asserted on.
- You ship a component library or design system.
Guide · visual regression
Visual regression testing vs website QA: what each one catches
Visual regression testing answers one question: does this page look different from the version a person approved? Website QA asks another: does it work, and does it fit? This guide explains what a visual comparison can and cannot prove, lists the main ways to do it, and says where a checker like Sybqa fits.
Facts checked
What visual regression testing does
A visual test captures an image of a page or component, compares it with a baseline a person approved earlier, and fails when the difference passes a threshold. Cypress’s documentation describes the loop as capture, compare and review: an unintended change is a regression you caught, and an intentional one is approved as the new baseline.
Its strength is that you do not have to predict the problem. A functional test can pass while a style change removes a line-through from completed items, because nobody asserted on it; a comparison with the baseline shows it either way.
Ways to do it
| Option | How the comparison works | Public pricing as read |
|---|---|---|
Playwright toHaveScreenshot() | Built into the Playwright test runner. The first run writes reference screenshots and later runs compare against them. You store and update the baselines | Part of the open-source framework; you supply CI and review time |
| Cypress with a plugin or service | Cypress does not compare images itself. Its documentation lists open-source plugins that diff pixels on your machine or in CI, and commercial services with approval workflows | Plugins: free. Services: paid subscription, per the Cypress documentation |
| Percy (BrowserStack) | Snapshots from your tests are compared with approved baselines in review builds | Free: 5,000 screenshots a month. Desktop: $199 a month billed annually |
| Chromatic | Visual snapshots of Storybook stories and tests, compared over time, with review and sign-off | Free: 5,000 billed snapshots a month. Starter: $179 a month for 35,000 |
| Applitools Eyes | Visual AI comparison with Dynamic, Strict, Layout and Exact match modes | Starter: $667 a month paid annually. Other tiers not published |
What a visual comparison cannot tell you
- Whether the journey works. A signup form can look exactly as approved and still fail to submit.
- Whether the first version is right. A baseline records what was approved; on a first run the tool writes down whatever is there.
- Whether it is accessible. Cypress’s documentation notes that accessibility scans check visual aspects such as text contrast against defined standards, which image comparison cannot evaluate on its own.
- Whether the data and behaviour behind the page are correct. A screenshot shows pixels, not outcomes.
What website QA adds
Website QA does not need a baseline, so it works on a site that was just built. A tool like Sybqa works through a flow in a real browser, checks layout at desktop, phone and narrow widths, runs accessibility rules and records errors, then reports evidence with steps to reproduce. It also compares a run with the previous one on the same target and reports which findings regressed or recovered. That compares results, not approved images.
It cannot tell you that a heading moved three pixels since last week. For that you need a baseline.
Start with website QA when
- The site is new, or was generated by an AI builder, and nobody has approved a baseline yet.
- You want to know whether signup, forms and the phone-width layout work.
- You want accessibility rules and error checks in the same run.
For other approaches beyond approved screenshots, start with the guide to choosing web application testing tools. To compare the tools that keep approved baselines side by side, see the best visual regression testing tools roundup.
Common questions
Do I need visual regression testing for a new site?
Usually not first. A baseline protects something you have already decided is right, so it pays off once the design settles. Until then, checking that the site works and fits on a phone tells you more.
Can Sybqa compare my site with a baseline screenshot?
Not as a general feature. Sybqa can compare pages with an exported Figma frame you supply, as a review aid, and it compares each run with the previous one on findings. It does not keep approved snapshots of every page and diff each build against them.
Sources
- Playwright: visual comparisons (checked October 10, 2026)
- Cypress: visual testing (checked October 10, 2026)
- Percy documentation: visual testing with Percy (checked October 10, 2026)
- BrowserStack pricing, Percy plans (checked October 10, 2026)
- Chromatic pricing (checked October 10, 2026)
- Applitools Eyes (checked October 10, 2026)
- Applitools pricing (checked October 10, 2026)
Related
Try Sybqa on your site
Paste a link, review the plan, and read the evidence report. The free plan gives 10 runs a month without AI review after you sign up.