Building a visual regression testing pipeline

Visual regression testing catches unintended UI changes before they reach production. By comparing screenshots of your app before and after code changes, you can automatically detect layout shifts, missing elements, and styling bugs.

Why visual regression testing?

Unit tests and integration tests are great, but they can't catch everything:

• CSS changes that break layouts
• Missing images or icons
• Font rendering issues
• Responsive design breakages
• Z-index and overlay problems

Visual tests fill this gap by comparing actual rendered output.

Setting up the pipeline

We'll use LambdaShot to capture screenshots and GitHub Actions to automate the process. Here's the workflow:

1. Deploy your branch to a staging environment
2. Capture screenshots of key pages
3. Compare against baseline images
4. Fail the build if differences exceed a threshold

GitHub Actions workflow

name: Visual Regression Tests
on: [push, pull_request]

jobs:
  visual-tests:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Capture screenshots
        run: |
          curl "https://api.lambdashot.com/take?url=$STAGING_URL&access_key=$LAMBDASHOT_KEY" -o current.png

      - name: Compare with baseline
        run: |
          # Your comparison logic here
          npx pixelmatch baseline.png current.png diff.png 0.1

Choosing what to test

You don't need to screenshot every page. Focus on:

• Critical user journeys - Homepage, signup, checkout
• Complex components - Data tables, charts, forms
• Responsive breakpoints - Mobile, tablet, desktop views

Handling dynamic content

Dynamic content like timestamps, user avatars, or live data can cause false positives. Use these strategies:

• Hide selectors - Use hide_selectors to hide dynamic elements
• Mock data - Use consistent test data in your staging environment
• Threshold tolerance - Allow small pixel differences (1-5%)

Storing baselines

Baseline images can be stored in:

• Your git repository (simple, but increases repo size)
• Cloud storage like S3 (better for large test suites)
• Dedicated visual testing services

Next steps

Once you have basic visual testing working, consider:

• Testing multiple viewport sizes
• Adding dark mode comparisons
• Setting up Slack notifications for failures
• Creating a dashboard to review visual diffs

Questions? Check out our documentation or reach out to our team.