AI UI Bug Gallery
Live5 worked examples of the UI bugs that pass code tests but fail visible-output verification, each with the assertion that catches it.
All examples are synthetic and educational, not real customer incidents. A larger set of 50 is in the open dataset.
Break the UI
Switch on a bug, then run both checks on the same card. A DOM assertion reads the code. RenderCheck reads the pixels, locally, in this tab.
Order summary
Currency symbol swapped ($ vs £)
What went wrong
AI code generator output price in wrong currency based on checkout endpoint input.
Why DOM tests miss it
DOM node exists with correct numeric value (99.99), but symbol is rendered incorrectly.
How RenderCheck catches it
Screenshot shows £99.99 when USD was expected. OCR finds "£" instead of "$".
Playwright pattern
await expect(page).toShowText('Total: $99.99');Order number missing from confirmation page
What went wrong
AI-generated confirmation page omitted order number in the render, though order ID exists in state.
Why DOM tests miss it
order_id div is in the DOM with correct value, but not visible due to CSS overflow or display:none.
How RenderCheck catches it
Screenshot does not show order number. OCR extracts confirmation text without "Order #" or ID.
Playwright pattern
await expect(page).toShowText('Order #ABC-123-DEF');Price truncated in summary
What went wrong
Total price field was given too-short width. Renders as "99.9" instead of "99.99".
Why DOM tests miss it
DOM textContent is correct ("99.99"), but rendered display clips the final digit.
How RenderCheck catches it
OCR reads visible text on screen: "99.9". Expected "99.99" fails verification.
Playwright pattern
await expect(page).toShowText('Order Total: $99.99');Button text invisible (white on white)
What went wrong
AI generated button with white text color and white background due to style copy-paste error.
Why DOM tests miss it
Button element exists with correct text content in DOM. CSS class name is syntactically valid.
How RenderCheck catches it
Screenshot shows blank button. OCR finds no visible text. Expected "Click here" fails.
Playwright pattern
await expect(page).toShowText('Click here to proceed');Date format wrong for locale
What went wrong
AI code generator output US date format (MM/DD/YYYY) on German site expecting DD.MM.YYYY.
Why DOM tests miss it
Date value is technically correct in state. Formatting function was not locale-aware.
How RenderCheck catches it
Screenshot shows "03/15/2026" when user expects "15.03.2026" on de-DE locale.
Playwright pattern
await page.goto('https://example.de/checkout?locale=de-DE');
await expect(page).toShowText('15.03.2026');Want to contribute?
Have a real-world AI UI verification gap? Share it as a GitHub issue to help build this gallery.
Submit an example