Preview vs Production Workflow

The gold standard for modern visual regression: Catching bugs before they merge by directly comparing temporary Preview environments to the Live Production site.

The Strategy

Traditional visual testing requires you to manage a "golden image" baseline in your git repository. This is painful—it bloats your repo, creates merge conflicts, and the baselines are often out of date.

RegressionBot recommendation: Use your live Production site as the baseline. When a developer opens a PR, compare their Preview URL against the Live URL. No images in git, zero maintenance.

Zero Baseline Bloat

Stop storing thousands of PNGs in your Git history. Let the cloud handle it.

Self-Healing

Baselines naturally update automatically as your production site evolves.

The 3-Step Lifecycle

Automated Check CI/CD

On every push, GitHub Actions waits for your preview deployment to finish and then triggers a RegressionBot job. It renders screenshots of both the preview URL and production URL to compare them.

Visual Review Developer

If regressions are detected, the PR check fails. The developer follows the link in the PR comment to inspect the diff images.

Approval ChatOps

If the change is intentional (e.g., a new UI feature), the developer comments /approve-visual on the PR. RegressionBot approves the job, and the PR check turns green.

GitHub Actions Configuration

Add this workflow to your repository to automatically test on every PR.

name: Visual Check
on:
  pull_request:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest
    permissions:
      pull-requests: write # Required to post comments
    steps:
      - uses: actions/checkout@v4

      # 1. Wait for your deployment (Vercel/Amplify/etc)
      # 2. Trigger the check
      - uses: regressionbot/action@v1
        with:
          command: 'check'
          api-key: ${{ secrets.REGRESSIONBOT_API_KEY }}
          project: 'my-web-app'
          test-origin: ${{ github.event.pull_request.head.sha }}.preview.myapp.com
          base-origin: 'https://myapp.com' # Production is the baseline
          devices: 'Desktop Chrome, iPhone 12'
          scan: '/pages/**'
          concurrency: 10

Enable ChatOps Approval

To allow developers to approve changes directly from comments, add this "Approval" workflow.

on:
  issue_comment:
    types: [created]

jobs:
  approve:
    if: github.event.issue.pull_request && startsWith(github.event.comment.body, '/approve-visual')
    runs-on: ubuntu-latest
    steps:
      - uses: regressionbot/action@v1
        with:
          command: 'approve'
          api-key: ${{ secrets.REGRESSIONBOT_API_KEY }}