Screenshot API for GitLab CI/CD

yaml
# .gitlab-ci.yml
stages:
  - deploy
  - screenshot

deploy_production:
  stage: deploy
  script:
    - echo "Deploying to production..."
  environment:
    name: production
    url: https://yoursite.com

capture_screenshots:
  stage: screenshot
  image: alpine:latest
  needs: [deploy_production]
  before_script:
    - apk add --no-cache curl
  script:
    - |
      for page in "" "/pricing" "/docs" "/blog"; do
        name=$(echo "$page" | sed 's/^\///' | sed 's/^$/homepage/')
        curl -s -o "${name}.png" \
          -H "x-api-key: ${SCREENSHOTAPI_KEY}" \
          "https://screenshotapi.to/api/v1/screenshot?url=https://yoursite.com${page}&width=1440&height=900&type=png"
        echo "Captured ${name}.png"
      done
  artifacts:
    paths:
      - "*.png"
    expire_in: 30 days

yaml
# .gitlab-ci.yml
visual_regression:
  stage: test
  image: node:20-alpine
  rules:
    - if: $CI_MERGE_REQUEST_IID
  script:
    - node scripts/capture-screenshots.js
    - node scripts/compare-screenshots.js
  artifacts:
    paths:
      - screenshots/
    expire_in: 14 days
    when: always

javascript
// scripts/capture-screenshots.js
const fs = require('node:fs');
const path = require('node:path');

const API_BASE = 'https://screenshotapi.to/api/v1/screenshot';
const API_KEY = process.env.SCREENSHOTAPI_KEY;
const BASE_URL = process.env.CI_ENVIRONMENT_URL || 'https://staging.yoursite.com';

const pages = [
  { name: 'homepage', path: '/' },
  { name: 'pricing', path: '/pricing' },
  { name: 'docs', path: '/docs' },
];

const outputDir = 'screenshots/current';
fs.mkdirSync(outputDir, { recursive: true });

async function capture(page) {
  const url = `${BASE_URL}${page.path}`;
  const params = new URLSearchParams({
    url,
    width: '1440',
    height: '900',
    type: 'png',
    waitUntil: 'networkidle2',
  });

  const response = await fetch(`${API_BASE}?${params}`, {
    headers: { 'x-api-key': API_KEY },
  });

  if (!response.ok) {
    console.error(`Failed: ${page.name} (${response.status})`);
    return;
  }

  const buffer = Buffer.from(await response.arrayBuffer());
  fs.writeFileSync(path.join(outputDir, `${page.name}.png`), buffer);
  console.log(`Captured ${page.name} (${buffer.length} bytes)`);
}

async function main() {
  await Promise.all(pages.map(capture));
}

main();

javascript
// scripts/compare-screenshots.js
const fs = require('node:fs');
const path = require('node:path');

const currentDir = 'screenshots/current';
const baselineDir = 'screenshots/baseline';

if (!fs.existsSync(baselineDir)) {
  console.log('No baseline found. Current screenshots saved as baseline.');
  fs.cpSync(currentDir, baselineDir, { recursive: true });
  process.exit(0);
}

const files = fs.readdirSync(currentDir).filter(f => f.endsWith('.png'));
let changed = false;

for (const file of files) {
  const current = fs.readFileSync(path.join(currentDir, file));
  const baselinePath = path.join(baselineDir, file);

  if (!fs.existsSync(baselinePath)) {
    console.log(`New page: ${file}`);
    changed = true;
    continue;
  }

  const baseline = fs.readFileSync(baselinePath);

  if (!current.equals(baseline)) {
    console.log(`Changed: ${file}`);
    changed = true;
  } else {
    console.log(`Unchanged: ${file}`);
  }
}

if (changed) {
  console.log('\nVisual changes detected. Review screenshots artifacts.');
  process.exit(1);
}

yaml
capture_review_screenshots:
  stage: test
  image: alpine:latest
  rules:
    - if: $CI_MERGE_REQUEST_IID
  environment:
    name: review/$CI_MERGE_REQUEST_IID
    url: https://review-${CI_MERGE_REQUEST_IID}.yoursite.com
  before_script:
    - apk add --no-cache curl
  script:
    - |
      REVIEW_URL="https://review-${CI_MERGE_REQUEST_IID}.yoursite.com"
      echo "Capturing screenshots of ${REVIEW_URL}"
      
      curl -s -o homepage.png \
        -H "x-api-key: ${SCREENSHOTAPI_KEY}" \
        "https://screenshotapi.to/api/v1/screenshot?url=${REVIEW_URL}&width=1440&height=900&type=png&waitUntil=networkidle2"
      
      curl -s -o mobile.png \
        -H "x-api-key: ${SCREENSHOTAPI_KEY}" \
        "https://screenshotapi.to/api/v1/screenshot?url=${REVIEW_URL}&width=390&height=844&type=png&waitUntil=networkidle2"
  artifacts:
    paths:
      - "*.png"
    expire_in: 7 days

yaml
screenshot_matrix:
  stage: test
  image: alpine:latest
  parallel:
    matrix:
      - VIEWPORT: [desktop, tablet, mobile]
        THEME: [light, dark]
  before_script:
    - apk add --no-cache curl
  script:
    - |
      case $VIEWPORT in
        desktop) WIDTH=1440; HEIGHT=900 ;;
        tablet) WIDTH=768; HEIGHT=1024 ;;
        mobile) WIDTH=390; HEIGHT=844 ;;
      esac
      
      curl -s -o "screenshot-${VIEWPORT}-${THEME}.png" \
        -H "x-api-key: ${SCREENSHOTAPI_KEY}" \
        "https://screenshotapi.to/api/v1/screenshot?url=https://yoursite.com&width=${WIDTH}&height=${HEIGHT}&type=png&colorScheme=${THEME}"
  artifacts:
    paths:
      - "*.png"
    expire_in: 14 days

yaml
scheduled_monitoring:
  stage: monitor
  image: alpine:latest
  rules:
    - if: $CI_PIPELINE_SOURCE == "schedule"
  before_script:
    - apk add --no-cache curl
  script:
    - mkdir -p screenshots
    - |
      TIMESTAMP=$(date +%Y%m%d-%H%M)
      for page in "" "/pricing" "/docs"; do
        name=$(echo "$page" | sed 's/^\///' | sed 's/^$/homepage/')
        curl -s -o "screenshots/${name}-${TIMESTAMP}.png" \
          -H "x-api-key: ${SCREENSHOTAPI_KEY}" \
          "https://screenshotapi.to/api/v1/screenshot?url=https://yoursite.com${page}&width=1440&height=900&type=png"
      done
  artifacts:
    paths:
      - screenshots/
    expire_in: 90 days