Blog Post
Why UIs Pass Every Test and Still Break in Production
By Emilia Veras. Last updated: July 13, 2026
Functional tests verify behavior, not appearance. They confirm a button responds to a click, not that the button is visible, aligned, or on the right side of the page. By one estimate, 85% of visual bugs are missed by traditional automated functional tests (Applitools). That is why a UI can pass every test in the pipeline and still be broken for the user who loads it.
Every test is green. CI is passing. The deploy goes out. Then a customer sends a screenshot: the checkout button is sitting on top of the email field, and it has been that way for three days. Nobody wrote a bad test. The tests simply were not looking at the thing that broke. AI-assisted development has widened this gap: teams ship more UI, faster, than any manual review can keep up with.
What "Passing Tests" Actually Proves
A functional test asserts behavior. It finds an element, acts on it, and checks a result: the form submits, the API returns 200, the route changes. It says nothing about whether the element is visible, whether the text is legible against its background, or whether the layout holds at 375 pixels wide. The canonical example: a "Submit" button that works perfectly, but a CSS change now hides it behind an image. The functional test passes, because the button technically exists and is clickable. A real user sees a broken page (JigNect, 2025).
The 85% Gap
Visual bugs are a category functional testing was never built to see. A 2024 Applitools survey found that 85% of visual bugs are missed by traditional automated functional tests, because they only verify behavior, not appearance. A login button can respond to clicks flawlessly while being invisible due to a color-contrast failure. The cost is not cosmetic: a single visual bug in a revenue path is a revenue leak, and because the DOM is intact, functional and end-to-end tests pass while conversion quietly drops.
Why AI-Generated UIs Make This Worse
AI coding tools amplify the gap for three reasons. First, volume: they generate more UI faster than any human review cadence. Second, they cannot see their own output, they emit markup and styles without rendering the result, so a visually broken layout looks like success to the model. Third, AI-built apps ship with a high defect density; visual-first builders average around 160 issues per app. The trap is that AI-generated code often passes tests precisely because the AI wrote code to satisfy the stated requirement. For more, see why AI-generated UIs need more design QA.
Failures That Passed Every Test
The hidden Submit button: a CSS update pushes a working button behind an image, clickable, invisible, test-green (JigNect, 2025). The invisible login button: a color-contrast failure makes a functioning button unreadable (Applitools). The three-day checkout bug: an element overlaps on one browser, the DOM is perfect, functional tests pass, and it is only caught when a customer complains. The pattern is identical every time: the behavior worked, the appearance did not, and the pipeline only checked the behavior.
How to Close the Gap
You do not fix a visual problem with more functional tests. You add a layer that evaluates appearance on the rendered page: (1) add design QA to the workflow, a pass that looks at the rendered UI across breakpoints; (2) use visual review, not just visual regression, since regression only flags "did anything change" while design QA answers "is this correct" against intent; (3) let AI look at the pixels, reviewing a full-page screenshot for overlaps, contrast failures, and off-screen elements a DOM-based test never sees, on every release.
Frequently Asked Questions
Why do UI bugs pass automated tests?
UI bugs pass automated tests because functional and end-to-end tests verify behavior, not appearance. They confirm an element exists and responds to input, but not whether it is visible, legible, aligned, or correctly positioned. A button hidden behind an image is still clickable, so the test passes while a real user sees a broken page.
What percentage of visual bugs do functional tests miss?
A 2024 Applitools survey estimated that 85% of visual bugs are missed by traditional automated functional tests, because those tests verify behavior rather than appearance. The remaining visual defects only surface through a check that evaluates the rendered pixels, such as visual regression testing or a design QA review of the live page.
Do AI-generated UIs need visual QA?
Yes, and more than hand-coded UIs. AI coding tools generate markup and styles without rendering the result, so they cannot see when their own output is visually broken. AI-built apps also ship with a high defect density, averaging around 160 issues per app. Because the generated code often passes functional tests, a visual QA layer is the only reliable way to catch how the page actually looks.
What is the difference between functional testing and visual QA?
Functional testing verifies that a feature works: the form submits, the route changes, the API responds. Visual QA verifies that the feature looks correct: it is visible, legible, aligned, and holds its layout across screen sizes. A UI can pass functional tests and fail visual QA, which is exactly how bugs like a hidden button or an overlapping checkout field reach production.