Concepts
Visual testing vs functional testing: what each one catches
Visual testing checks how a page looks; functional testing checks how it behaves. Learn the differences, what each misses and how to combine them.
Functional tests ask “does it work?” Visual tests ask “does it look right?” A page can pass one and fail the other, which is why mature teams run both.
What functional testing checks
Functional tests interact with the page — click, type, submit — and assert on outcomes such as navigation, data and messages. They are blind to whether elements look correct or are even visible to a person.
What visual testing checks
Visual tests compare the rendered page with an approved baseline. They catch overlap, overflow, missing images, wrong fonts, broken responsive layouts and unexpected content — none of which functional assertions notice.
Failures only one of them catches
Real examples show why both are needed.
- Hidden buy button still clickable → only visual
- Form submits to wrong endpoint → only functional
- Translated label overflows → only visual
- Validation message never appears → only functional
How to combine them
Use functional tests for critical flows, and visual testing or monitoring for broad page coverage across viewports and languages. Visual checks scale cheaply to many pages because they do not need per-page assertions.
Questions
Frequently asked questions
Is visual testing a type of functional testing?
No. It is usually classed as non-functional testing because it checks presentation rather than behavior.
Can visual testing replace manual QA?
It replaces repetitive looking-for-differences work, so manual QA can focus on judgment: content, intent and usability.
Continue exploring
Related resources
Turn the checklist into a repeatable workflow
Discover your pages, capture the important states and keep a visual history of every meaningful change.
Start free trial