Screenshots in CI: Visual Regression and Monitoring

Visual regression testing and site monitoring often rely on capturing screenshots of your app before and after changes. Running headless browsers inside CI can be slow and flaky. Using a screenshot API in GitHub Actions or GitLab CI keeps pipelines simple and consistent: you call an API, get an image, and compare or archive it.

Why use a screenshot API in CI?

• No Chrome in the runner: No need to install Chromium or Puppeteer in the job; the API runs the browser in the cloud.
• Stable environment: Same viewport, same fonts, same timing every run.
• Faster jobs: No browser startup or teardown; just an HTTP request.
• Easy archiving: Capture staging or production on each deploy and store the images for comparison or auditing.

Visual regression: capture and compare

A typical flow:

1. On each PR or push, deploy a preview (e.g. Vercel preview URL or staging).
2. Call the Doppio screenshot API with the preview URL and optional selector (e.g. body or a main container).
3. Download the image and compare it to a baseline (e.g. with pixelmatch or a visual diff tool).
4. Fail the job or upload the diff as an artifact if the difference exceeds a threshold.

Example: GitHub Actions

Use a step that calls the Doppio screenshot endpoint and saves the image. You can then pass it to a comparison step or upload it as an artifact.

# .github/workflows/visual.yml
name: Visual regression
on: [pull_request]
jobs:
  screenshot:
    runs-on: ubuntu-latest
    steps:
      - name: Capture staging with Doppio
        id: capture
        run: |
          RESP=$(curl -s -X POST https://api.doppio.sh/v1/render/screenshot/sync \\
            -H "Authorization: Bearer ${{ secrets.DOPPIO_API_KEY }}" \\
            -H "Content-Type: application/json" \\
            -d '{
              "page": {
                "goto": { "url": "${{ env.PREVIEW_URL }}" },
                "screenshot": { "type": "png", "fullPage": true }
              }
            }')
          echo "url=$(echo $RESP | jq -r .documentUrl)" >> $GITHUB_OUTPUT

      - name: Download screenshot
        run: |
          curl -o screenshot.png "${{ steps.capture.outputs.url }}"

      - name: Upload artifact
        uses: actions/upload-artifact@v4
        with:
          name: screenshot
          path: screenshot.png

Monitoring: recurring captures

For ongoing monitoring (e.g. “has the homepage changed?”), run the same screenshot step on a schedule. Store each image with a timestamp; if you use a diff tool, you can alert when the current screenshot diverges from the previous one. This helps catch unintended layout changes or defacement.

Summary

Integrating a screenshot API like Doppio into CI gives you reliable, fast captures for visual regression and monitoring without managing browsers yourself. Combine it with your favorite diff tool and artifact storage to close the loop. For more, see the Doppio docs and our no-code recurring screenshots post.