Remember those "spot the difference" puzzles from childhood? Two pictures side by side. One has a missing cloud, a different color hat, a button in the wrong place. You stare at both and find the differences.
Visual testing is exactly that game -- but automated. You take a screenshot of your app today. Save it as the "golden image." Tomorrow after a code change, you take another screenshot. The tool compares both pixel by pixel. If anything changed, it flags it. A shifted button. A wrong font. A missing border. Things your functional tests never check.
Your login test checks that the email field exists, the password field exists, the button works. All assertions pass. But the button is now 50px to the left and overlapping the input. The font changed from Inter to Times New Roman. The entire page has no padding. Functional tests say "all green." Users say "this looks broken."
Q: What is the difference between functional testing and visual testing?
A: Functional testing checks behavior -- does the button work, does the form submit, does the error message appear. Visual testing checks appearance -- is the button in the right place, is the font correct, did the layout break. You need both. Functional tests miss CSS regressions and layout issues. Visual tests miss logic bugs. They complement each other.
Key Point: Visual testing is the automated spot-the-difference game. It catches CSS regressions, layout shifts, and styling bugs that functional tests completely miss.
Key Point: Visual testing catches what functional tests cannot -- CSS regressions, layout shifts, font changes, and broken styling.