Skip to main content

​
Vision

Vision is a visual regression testing platform that captures screenshots and detects UI changes. Catch unintended visual changes before they reach production.

​
Features

Screenshot Capture

Capture pages with Playwright across browsers

Visual Diffs

Pixel-level comparison with baselines

Multi-Browser

Chromium, Firefox, WebKit support

CI/CD Integration

Run visual tests on every deploy

​
Quick Start

# Capture a screenshot
snapshot = BrainzLab::Vision.capture("https://example.com")

# Compare to baseline
result = snapshot.compare

if result.passed?
  puts "No visual changes detected"
else
  puts "Visual differences found: #{result.diff_percentage}%"
  puts "Review: #{result.review_url}"
end

​
How It Works

URL / Page
     │
     ▼
Playwright Capture
     │
     ▼
Compare to Baseline
     │
     ├── Match ──────► Pass
     │
     └── Difference ─► Review Required
                           │
                           ├── Approve ──► New Baseline
                           │
                           └── Reject ───► Test Fails

​
Supported Browsers

BrowserViewports
ChromiumDesktop (1280x720), Mobile (375x812), Tablet (768x1024)
FirefoxDesktop (1280x720)
WebKitDesktop (1280x720), Mobile (375x812)

​
Key Features

  • Smart Diffing - Ignores anti-aliasing and sub-pixel differences
  • Element Masking - Hide dynamic content (dates, ads)
  • Wait Strategies - Wait for animations and network idle
  • Baseline Management - Approve changes to update baselines
  • Test Suites - Group pages into test runs

​
CI/CD Integration

Run visual tests on every deployment: 
# GitHub Actions
- name: Visual Regression Tests
  run: bundle exec rake vision:test
  env:
    BRAINZLAB_SECRET_KEY: ${{ secrets.BRAINZLAB_SECRET_KEY }}

​
Next Steps

Pages

Configure pages to capture

Baselines

Manage baseline screenshots

Comparisons

Review and approve changes

Test Runs

Run visual test suites