Visual Regression
Compare screenshots to catch layout changes you did not expect.
What you'll learn
- Use screenshot checks for UI changes.
- Notice layout drift fast.
- Know when a pixel diff matters.
Playwright AutomationlessonsJump to another lesson
Visual Regression
Compare screenshots to catch layout changes you did not expect.
Big Picture
One small picture can make this idea easier to hold.
Functional test
- Checks behavior.
- Reads text and state.
- Misses some layout bugs.
- Good for logic.
Visual test
- Checks pixels and layout.
- Finds spacing and color drift.
- Can be sensitive to small noise.
- Good for UI polish.
VerdictUse both together for stronger coverage.
How It Moves
Short steps make the flow easier to see.
Take a baseline
Save the known-good screenshot.
Change the UI
Run the same page after a code change.
Compare images
Check for pixel differences.
Review the diff
Look at the changed pixels carefully.
Step By Step
This is the same idea, stretched across time.
- 1
Capture the reference
Save the first known-good image.
- 2
Run the same view again
Take a new screenshot after the change.
- 3
Compare the result
See what changed on screen.
- 4
Update the baseline if needed
Accept real UI changes after review.
One Small Model
Think of this like a tiny card you can keep in your pocket.
ScreenshotCheck
5 fieldsQuick Check
What does a visual regression test compare?
Map It
One more picture helps you see where this lesson matters most.
What visual tests catch
Tiny noise
Anti-aliasing change
Important drift
Button moved off line
Small but visible
Text spacing shift
Big break
Layout collapses