CI/CD Integrations

GitHub Actions

Add this workflow to .github/workflows/visual-regression.yml:

name: Visual Regression
on: [pull_request]

jobs:
  visual-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Run visual regression tests
        run: |
          curl -sf -X POST https://api.thepixelhouse.co.uk/v1/tests/run \
            -H "Authorization: Bearer ${{ secrets.PIXELHOUSE_API_KEY }}" \
            -H "Content-Type: application/json" \
            -d '{
              "url": "https://staging.example.com",
              "baselineId": "bl_your_baseline_id",
              "viewport": "desktop",
              "threshold": 1.0
            }' | jq '.data.status'

A dedicated GitHub Action (pixelhouse/visual-regression-action) is coming in v2.0.

GitLab CI

Add to .gitlab-ci.yml:

visual-regression:
  stage: test
  image: curlimages/curl:latest
  script:
    - |
      RESULT=$(curl -sf -X POST https://api.thepixelhouse.co.uk/v1/tests/run \
        -H "Authorization: Bearer $PIXELHOUSE_API_KEY" \
        -H "Content-Type: application/json" \
        -d '{"url":"$CI_ENVIRONMENT_URL","baselineId":"bl_xxx","threshold":1.0}')
      STATUS=$(echo $RESULT | jq -r '.data.status')
      if [ "$STATUS" != "pass" ]; then exit 1; fi

Bitbucket Pipelines

Add to bitbucket-pipelines.yml:

pipelines:
  pull-requests:
    '**':
      - step:
          name: Visual regression
          script:
            - apt-get update && apt-get install -y jq
            - |
              RESULT=$(curl -sf -X POST https://api.thepixelhouse.co.uk/v1/tests/run \
                -H "Authorization: Bearer $PIXELHOUSE_API_KEY" \
                -H "Content-Type: application/json" \
                -d '{"url":"https://staging.example.com","baselineId":"bl_xxx","threshold":1.0}')
              echo $RESULT | jq '.data'
              STATUS=$(echo $RESULT | jq -r '.data.status')
              test "$STATUS" = "pass"