DEV Community

Ozor
Ozor

Posted on

Automate Website Screenshots in Your CI/CD Pipeline (No Puppeteer)

#github #actions #testing #webdev

Every time you deploy, you want to know: does it look right?

Setting up Puppeteer or Playwright in CI just for screenshots is painful — you need browsers, dependencies, headless configs, and it all breaks on the next runner update.

What if you could take a screenshot with one line in your workflow?

- uses: OzorOwn/frostbyte-screenshot-action@v1
  with:
    url: 'https://your-app.vercel.app'
Enter fullscreen mode Exit fullscreen mode

Done. Screenshot saved as an artifact. No browser installation, no Node setup beyond what the runner already has.

What It Does

The Frostbyte Screenshot Action calls a screenshot API instead of spinning up a local browser. This means:

  • Zero setup — no apt-get install chromium, no Puppeteer config
  • Fast — API call vs launching a browser process
  • Reliable — no "browser failed to launch" flakes
  • 5 viewports — desktop, tablet, mobile, 1080p, 4k

Real-World Examples

1. Screenshot After Every Deployment

The most common use case. Verify your deploy looks right:

name: Deploy & Verify
on:
  push:
    branches: [main]

jobs:
  deploy-and-screenshot:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Deploy
        id: deploy
        run: |
          # Your deployment command here
          echo "url=https://my-app.vercel.app" >> $GITHUB_OUTPUT

      - name: Verify deployment
        uses: OzorOwn/frostbyte-screenshot-action@v1
        with:
          url: ${{ steps.deploy.outputs.url }}
          viewport: desktop
          artifact-name: post-deploy-screenshot
Enter fullscreen mode Exit fullscreen mode

After the workflow runs, download the screenshot from the Actions tab to verify your deployment.

2. Multi-Device Testing

Test how your site looks across devices in one workflow:

jobs:
  screenshots:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        viewport: [desktop, tablet, mobile]
    steps:
      - name: Screenshot (${{ matrix.viewport }})
        uses: OzorOwn/frostbyte-screenshot-action@v1
        with:
          url: 'https://your-app.com'
          viewport: ${{ matrix.viewport }}
          output-path: screenshots/${{ matrix.viewport }}.png
          artifact-name: screenshot-${{ matrix.viewport }}
Enter fullscreen mode Exit fullscreen mode

This runs 3 parallel jobs — one per viewport — and saves each screenshot as a separate artifact.

3. PR Preview Comments

Automatically post a screenshot on every pull request:

name: PR Preview
on: pull_request

jobs:
  preview:
    runs-on: ubuntu-latest
    permissions:
      pull-requests: write
    steps:
      - name: Screenshot staging
        uses: OzorOwn/frostbyte-screenshot-action@v1
        with:
          url: 'https://staging.your-app.com'
          comment-on-pr: 'true'
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
Enter fullscreen mode Exit fullscreen mode

The action posts a comment with screenshot details and a link to the artifact.

4. Dark Mode Verification

Make sure your dark mode actually works:

- name: Light mode
  uses: OzorOwn/frostbyte-screenshot-action@v1
  with:
    url: 'https://your-app.com'
    output-path: screenshots/light.png
    artifact-name: light-mode

- name: Dark mode
  uses: OzorOwn/frostbyte-screenshot-action@v1
  with:
    url: 'https://your-app.com'
    dark-mode: 'true'
    output-path: screenshots/dark.png
    artifact-name: dark-mode
Enter fullscreen mode Exit fullscreen mode

Available Options

Input Description Default
url URL to screenshot (required)
viewport desktop, tablet, mobile, 1080p, 4k desktop
format png or jpeg png
full-page Capture full scrollable page false
dark-mode Emulate dark color scheme false
quality JPEG quality (1-100) 80
output-path Where to save the file screenshot.png
api-key API key for higher limits (optional)
comment-on-pr Post on pull request false
upload-artifact Save as Actions artifact true

Rate Limits

Works without any API key — you get 50 free screenshots. For more:

# Get a free API key (200 credits, 1 credit per screenshot)
curl -X POST https://agent-gateway-kappa.vercel.app/api/keys/create
Enter fullscreen mode Exit fullscreen mode

Add the key as a repository secret and pass it to the action:

- uses: OzorOwn/frostbyte-screenshot-action@v1
  with:
    url: 'https://example.com'
    api-key: ${{ secrets.FROSTBYTE_API_KEY }}
Enter fullscreen mode Exit fullscreen mode

How It Works Under the Hood

Instead of installing a browser in your CI runner, the action calls the Frostbyte Screenshot API. The API runs Chromium on dedicated infrastructure, takes the screenshot, and returns the image.

This is the same API powering 40+ developer tools — if you find it useful, check out the full API catalog for geo lookups, crypto prices, DNS, web scraping, and more.

Links:

Top comments (0)