> ## Content Index
> Fetch the complete content index at: https://stalin-pereira.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# Catching UI Bugs with Percy Visual Regression
- URL: https://stalin-pereira.com/catching-ui-bugs-with-percy-visual-regression/
- Published: 2025-12-15T04:43:00.000Z
- Updated: 2026-10-16T19:08:13.000Z
- Description: Automating UI checks with Percy or Chromatic
- Author: Stalin Pereira
- Tags: Testing

**Pixel Perfect Is Impossible**

Without automation, you are just guessing.

## The 'CSS Ripple Effect'

- **The Change** — You change the padding on a button in the Settings page.
- **The Breakage** — Somehow, the Checkout button on the Homepage is now misaligned.
- **The Blindspot** — Unit tests pass. Integration tests pass. The UI is still broken.

## Visual Regression Testing

- **Snapshot** — The tool takes a screenshot of every component in the `master` branch.
- **Comparison** — It takes screenshots of your `new-feature` branch.
- **Diffing** — It overlays them. Red pixels show exactly what changed.

## Tools: Percy & Chromatic

- **Integration** — Runs automatically in CI (GitHub Actions) on every Pull Request.
- **Cross-Browser** — Checks Chrome, Firefox, and Safari rendering simultaneously.
- **Approval Flow** — Designers can 'Approve' the visual changes before merge.

## Why Manual Checks Fail

- **Fatigue** — Humans cannot spot a 2px shift across 50 pages.
- **Responsive** — Did you check Mobile? Tablet? Desktop? Dark Mode?

## The ROI

- **Confidence** — Refactor global CSS variables without fear.
- **Brand Safety** — No more embarrassing layout bugs in production.

## Summary: Catch It Early

Visual bugs are real bugs.

> Let robots check the pixels. You focus on the logic.

---

How many times has a CSS change broken a layout?