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.
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.