DEV Community

GrabShot
GrabShot

Posted on

I Built a GitHub Action for Automated Website Screenshots

#github #actions #testing #webdev

Visual regression testing shouldn't require a complex setup. I built a GitHub Action that captures website screenshots with a single step in your workflow.

The Problem

Every team I've worked with eventually needs visual regression testing. The usual approach:

  1. Install Puppeteer/Playwright in CI
  2. Write browser scripts to navigate and screenshot
  3. Deal with flaky headless Chrome in CI environments
  4. Manage screenshot storage and comparison

It works, but it's a lot of infrastructure for "take a picture of my website."

The Simple Alternative

I created grabshot-action - a GitHub Action that captures screenshots via API. No browser installation, no flakiness, consistent results.

- name: Screenshot my site
  uses: aitaskorchestra/grabshot-action@v1
  with:
    url: 'https://mysite.com'
    api-key: ${{ secrets.GRABSHOT_API_KEY }}
    output: 'screenshots/homepage.png'
Enter fullscreen mode Exit fullscreen mode

That's it. The screenshot is saved as a file you can upload as an artifact, commit, or compare.

Use Case: PR Visual Diff

Here's a real workflow - screenshot your production site and PR preview on every pull request:

name: Visual Regression
on: pull_request

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

      - name: Screenshot production
        uses: aitaskorchestra/grabshot-action@v1
        with:
          url: 'https://mysite.com'
          api-key: ${{ secrets.GRABSHOT_API_KEY }}
          output: 'screenshots/production.png'

      - name: Screenshot PR preview
        uses: aitaskorchestra/grabshot-action@v1
        with:
          url: 'https://pr-${{ github.event.number }}.preview.mysite.com'
          api-key: ${{ secrets.GRABSHOT_API_KEY }}
          output: 'screenshots/preview.png'

      - uses: actions/upload-artifact@v4
        with:
          name: visual-regression
          path: screenshots/
Enter fullscreen mode Exit fullscreen mode

Use Case: Scheduled Monitoring

Take periodic screenshots to track how your site looks over time:

name: Site Monitor
on:
  schedule:
    - cron: '0 */6 * * *'

jobs:
  monitor:
    runs-on: ubuntu-latest
    steps:
      - name: Screenshot
        uses: aitaskorchestra/grabshot-action@v1
        with:
          url: 'https://mysite.com'
          api-key: ${{ secrets.GRABSHOT_API_KEY }}
          full-page: 'true'
          output: 'monitor/${{ github.run_number }}.png'
Enter fullscreen mode Exit fullscreen mode

Options

Input Description Default
url URL to capture required
api-key Your GrabShot key required
width Viewport width 1280
height Viewport height 800
full-page Full page capture false
delay Wait before capture (ms) 0
output File path screenshot.png

Getting Started

  1. Get a free API key at grabshot.dev (100 screenshots/month, no credit card)
  2. Add it as a repository secret: Settings > Secrets > GRABSHOT_API_KEY
  3. Add the action to your workflow

The action is open source on GitHub.

Would love feedback on what features would make this more useful for your workflow. Thinking about adding automatic before/after image comparison and PR commenting next.

Top comments (0)