--- title: Visual Regression Testing Quiz | TestingBot description: Nine questions on the decisions that matter most in a real visual suite. Each answer comes with a short explanation, so a wrong answer points you back to the… source_url: html: https://testingbot.com/resources/courses/visual-regression-testing/knowledge-check md: https://testingbot.com/resources/courses/visual-regression-testing/knowledge-check.md --- Course [Visual Regression Testing Tutorial](https://testingbot.com/resources/courses/visual-regression-testing) Chapter 10 of 10 1. [1 Visual Regression Testing Tutorial](https://testingbot.com/resources/courses/visual-regression-testing) 2. [2 Your First Screenshot Comparison with Playwright](https://testingbot.com/resources/courses/visual-regression-testing/first-screenshot-comparison) 3. [3 Making Visual Tests Stable](https://testingbot.com/resources/courses/visual-regression-testing/stable-screenshots) 4. [4 Thresholds: How Much Difference to Allow](https://testingbot.com/resources/courses/visual-regression-testing/thresholds-and-diff-tolerance) 5. [5 Full Page, Element and Component Snapshots](https://testingbot.com/resources/courses/visual-regression-testing/page-element-and-component-snapshots) 6. [6 Cross-Browser Visual Testing](https://testingbot.com/resources/courses/visual-regression-testing/cross-browser-visual-testing) 7. [7 Visual Testing on a Cloud Grid with TestingBot](https://testingbot.com/resources/courses/visual-regression-testing/visual-testing-on-a-cloud-grid) 8. [8 Visual Regression Testing in CI with GitHub Actions](https://testingbot.com/resources/courses/visual-regression-testing/visual-tests-in-github-actions) 9. [9 A Visual Testing Strategy That Lasts](https://testingbot.com/resources/courses/visual-regression-testing/visual-testing-strategy) 10. [10 Visual Regression Testing Quiz](https://testingbot.com/resources/courses/visual-regression-testing/knowledge-check) [Exit course](https://testingbot.com/resources/courses) Chapter 10 of 10 Intermediate 6 min read Updated Nov 2026 # Visual Regression Testing Quiz Nine questions on the decisions that matter most in a real visual suite. Each answer comes with a short explanation, so a wrong answer points you back to the right chapter. 1. Which bug is a visual regression test most likely to catch that a functional test with `toBeVisible()` and `toHaveText()` assertions misses? A button that submits the wrong form data A heading that now overlaps the paragraph below it after a CSS change An API that returns a 500 error A link that points to the wrong URL Overlap is a property of how the page is painted. Both elements are still in the DOM with the right text, so DOM assertions pass. The other three are behaviour, which functional tests check better. 2. A visual test passes for months. A customer then reports that the page it covers has looked wrong since launch. How is that possible? The threshold was too strict Visual tests only run in Chromium The test timed out silently The baseline was approved while the page already looked wrong, so the test protects the bug Visual regression tests detect change, not correctness. Whatever you approve as the first baseline becomes "correct". That is why every new baseline needs a careful human look. 3. A product card shows a random "Only N left" badge. You want to keep testing the rest of the card. What do you use? `mask: [page.getByTestId('stock-badge')]` in `toHaveScreenshot()`, or a fixed API response for the stock count `animations: 'allow'` `maxDiffPixelRatio: 0.5` A `page.waitForTimeout(3000)` before the screenshot Masking paints over just the badge in both images; mocking the data makes it deterministic. A 50% pixel allowance would let half the card change unnoticed, and waiting does not make random content stable. 4. Your baselines were created on a Mac and CI runs Ubuntu. CI fails every visual test with a few thousand different pixels, mostly along text. What is the right fix? Raise `threshold` to 0.5 on CI only Remove `{platform}` from the snapshot path so CI uses the Mac files Create the baselines in the same Linux environment CI uses, for example the Playwright Docker image with the matching version tag Run CI on a Mac runner and keep updating baselines from laptops with different macOS versions Font rendering differs between operating systems, so baselines must come from the environment that runs the tests. Sharing the Mac files on Linux turns "missing" into "different", and tolerance large enough to cover OS differences hides real regressions. 5. With Playwright's default comparison settings, a button's background changes from `#1a73e8` to `#1e88e5` and the test still passes. Why? Element screenshots ignore colours Each pixel changed by less than the default `threshold` of 0.2, so no pixel counts as different The default `maxDiffPixels` is 100 Playwright only compares brightness `threshold` decides per pixel whether a colour difference counts. Small colour shifts stay under 0.2. `maxDiffPixels` is unset by default, which means zero different pixels are allowed; it never came into play here. 6. Your CSS has breakpoints at 600px and 1100px. A colleague adds visual tests at 768, 834, 1024 and 1080 pixels wide. What is the problem? Playwright cannot emulate tablet widths Viewport widths must be powers of two Element screenshots ignore the viewport All four widths fall in the same layout range, so they add baselines without covering the mobile or wide layouts Breakpoints define layouts. 768 to 1080 is all one layout here, so the tests duplicate each other while the layouts below 600px and above 1100px are not tested at all. Pick one width per range. 7. Why does Playwright include the project name in a baseline's file name by default? So each browser and device configuration is compared only with its own earlier screenshots To make file names unique for git Because the HTML report needs it To allow comparing Firefox with Chromium Browsers render the same page differently even when nothing is wrong. Per-project baselines keep those normal differences out of the comparison, so each project can use a strict tolerance. 8. A pull request intentionally changes the primary button style. What is the best way to get the new baselines into the pull request? Set `updateSnapshots: 'all'` in the config and merge Delete the snapshot folders so CI recreates them Run `--update-snapshots=changed` in the CI environment (Docker image or a manual workflow), commit the PNGs to the pull request and have them reviewed with the code Edit the PNG files to match the new style The baseline update is part of the change and should be reviewed with it. Generating it in the CI environment avoids OS differences. Config-level updates or deleted baselines remove the check for everything else too. 9. A designer wants to approve visual changes without using git. Which setup fits best? Email them the diff images from `test-results/` Server-side baselines with a review screen, such as TestingBot's visual comparison, where runs are approved or rejected in a dashboard Give them write access to the snapshot folder Skip visual tests on design changes When baselines are files in git, approving means committing. Server-side baselines move approval into a web interface, which suits reviewers outside the code workflow. Mailing images around loses the record of who approved what. Check answers ## Where to go next[#](https://testingbot.com#where-to-go-next) - Run your suite across real browsers and operating systems with the [Playwright on TestingBot guide](https://testingbot.com/support/web-automate/playwright). - Set up [scheduled visual tests](https://testingbot.com/support/visual-testing/codeless) to watch your production pages. - If you want a certificate, take the [exam and the practical task](https://testingbot.com/resources/courses/visual-regression-testing/certification): a passed exam plus a visual suite running green on TestingBot in at least two browser configurations. [Previous · Chapter 9 A Visual Testing Strategy That Lasts](https://testingbot.com/resources/courses/visual-regression-testing/visual-testing-strategy) ## You finished Visual Regression Testing Tutorial Put what you learned into practice. Run your tests on 6100+ real browsers and physical iOS and Android devices. [Start free trial](https://testingbot.com/users/sign_up) [See pricing](https://testingbot.com/pricing) [Browse other courses](https://testingbot.com/resources/courses) ## Earn the TestingBot certification for this course Pass the exam and run the course suite on TestingBot. Free, with a public link you can add to LinkedIn. [How it works](https://testingbot.com/resources/courses/visual-regression-testing/certification)