Skip to main content

GitHub Actions

Frontguard provides an official GitHub Action. It auto-detects preview URLs from Vercel, Netlify, Cloudflare, Railway and Render, runs the pipeline, and posts a PR comment with before/after/diff thumbnails.

Quick setup

.github/workflows/visual-regression.yml
name: Visual Regression Tests
on:
  pull_request:
    branches: [main]

jobs:
  visual-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Run Frontguard
        uses: ravidsrk/frontguard@main
        with:
          url: ${{ env.PREVIEW_URL }} # or let it auto-detect
        env:
          FRONTGUARD_OPENAI_KEY: ${{ secrets.FRONTGUARD_OPENAI_KEY }}

Action inputs

InputRequiredDescription
urlNoBase URL to test (auto-detected from preview deploys if omitted).
routesNoComma-separated routes (auto-discovered by default).
viewportsNoComma-separated viewport widths. Default 375,768,1440.
thresholdNoPixel diff threshold percentage. Default 0.1.
ai-providerNoopenai or anthropic.
update-baselinesNoAccept current as new baselines. Default false.

What the action does

1Setup Node.js 20.
2Install Frontguard — npm install -g @frontguard/cli@latest.
3Install browsers — npx playwright install --with-deps.
4Detect preview URL from Vercel, Netlify, Cloudflare, Railway, Render.
5Run the full pipeline with your configuration.
6Upload the HTML report as a build artifact.