Vision is Live

The tests pass. The deploy goes out. And then the Slack message:

"Hey, the checkout button is invisible now."

A CSS change broke the UI. The unit tests didn't catch it. The integration tests didn't catch it. Nobody caught it until a user did.

Visual regression testing should have caught it. But visual testing tools are painful.

The problem with visual testing

Every visual testing tool requires:

1. Manual baseline setup — Screenshot everything. Approve each one.
2. Constant maintenance — Any intentional change means updating dozens of baselines.
3. Flaky diffs — Font rendering differences. Animation timing. Sub-pixel shifts.
4. Slow feedback — Full-page screenshots take time.

So teams skip it. And ship broken UIs.

Vision makes it automatic

Define what to test:

tests:
  - name: "Checkout Page"
    url: "/checkout"
    viewports: [desktop, mobile, tablet]

  - name: "Login Flow"
    steps:
      - navigate: "/login"
      - type: { selector: "#email", value: "[email protected]" }
      - type: { selector: "#password", value: "password" }
      - click: "#submit"
      - wait: 2000
      - screenshot: "logged_in_dashboard"

Vision runs the tests. Captures screenshots. Compares to baselines.

Differences get highlighted. You approve or reject. Done.

Playwright under the hood

Vision uses Playwright for browser automation.

Multi-browser — Chromium, Firefox, WebKit. Test where your users actually browse.

Multiple viewports — Desktop, tablet, mobile. Responsive testing built in.

Reliable waits — No flaky timing. Playwright waits for elements to be ready.

Fast execution — Headless browsers, parallel test runs.

Smart diffing

Not every pixel difference matters.

Vision uses ImageMagick for pixel-level comparison, but with intelligence:

Threshold tolerance — Ignore sub-pixel differences from anti-aliasing.

Region masking — Exclude dynamic content like timestamps or avatars.

Animation handling — Wait for animations to complete before capture.

Font smoothing normalization — Same test, same result, any OS.

Fewer false positives. More signal.

The approval workflow

When a diff is detected:

1. Side-by-side view — Old, new, and diff highlighted.
2. One-click approve — Intentional change? Update the baseline.
3. One-click reject — Regression? Flag for fix.
4. Batch operations — Approve multiple changes at once.

Visual review in seconds, not hours.

Credential integration with Vault

Testing authenticated pages? Vision integrates with Vault.

Store credentials securely in Vault. Vision retrieves them at test time.

tests:
  - name: "Admin Dashboard"
    credentials: "admin_login"  # References Vault
    url: "/admin"

Credentials never live in test files. Never committed to git. Never exposed.

Vision even handles 2FA—Vault generates OTPs on demand.

E2E test definitions

Vision isn't just screenshots. It's full end-to-end testing.

tests:
  - name: "Purchase Flow"
    steps:
      - navigate: "/products/widget"
      - click: "#add-to-cart"
      - screenshot: "cart_updated"
      - navigate: "/checkout"
      - fill_form:
          email: "[email protected]"
          card: "4242424242424242"
      - click: "#purchase"
      - wait_for: ".confirmation"
      - screenshot: "purchase_complete"

Define complex flows. Get visual snapshots at each step.

The dashboard

See all tests at a glance:

• Pass/fail status — What's broken right now?
• Historical trends — Test stability over time.
• Baseline gallery — Current approved state of your UI.
• Diff explorer — Investigate failures in detail.

Everything you need to keep your UI consistent.

Try it

docker-compose up -d vision

# Open http://vision.localhost

Define your first test. Run it. See your UI like you've never seen it before.

No more invisible buttons.

— Andres