Using shot-scraper with GitHub Actions

shot-scraper was designed with GitHub Actions for screenshot automation in mind.

shot-scraper-template

The shot-scraper-template template repository can be used to quickly create your own GitHub repository with GitHub Actions configured to take screenshots of a page and write it back to the repository. Read Instantly create a GitHub repository to take screenshots of a web page for details.

Building a workflow from scratch

This Actions workflow can be used to install shot-scraper and its dependencies, take screenshots defined in the shots.yml file in that repository and then write the resulting screenshots back to the same repository:

name: Take screenshots

on:
  push:
  workflow_dispatch:

permissions:
  contents: write

jobs:
  shot-scraper:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - name: Set up Python 3.10
      uses: actions/setup-python@v3
      with:
        python-version: "3.10"
    - uses: actions/cache@v3
      name: Configure pip caching
      with:
        path: ~/.cache/pip
        key: ${{ runner.os }}-pip
    - name: Cache Playwright browsers
      uses: actions/cache@v3
      with:
        path: ~/.cache/ms-playwright/
        key: ${{ runner.os }}-playwright
    - name: Install dependencies
      run: |
        pip install shot-scraper
        shot-scraper install
    - name: Take shots
      run: |
        shot-scraper multi shots.yml
    - name: Commit and push
      run: |-
        git config user.name "Automated"
        git config user.email "actions@users.noreply.github.com"
        git add -A
        timestamp=$(date -u)
        git commit -m "${timestamp}" || exit 0
        git pull --rebase
        git push

The actions/cache@v3 steps set up caching, so your workflow will only download and install the necessary software the very first time it runs.

Optimizing PNGs using Oxipng

You can losslessy compress the PNGs generated using shot-scraper by running them through Oxipng. Add the following steps to the beginning of your workflow to install Oxing:

    - name: Cache Oxipng
      uses: actions/cache@v3
      with:
        path: ~/.cargo/
        key: ${{ runner.os }}-cargo
    - name: Install Oxipng if it is not installed
      run: |
        which oxipng || cargo install oxipng

Then after running shot-scraper add this step to compress the images:

    - name: Optimize PNGs
      run: |-
        oxipng -o 4 -i 0 --strip safe *.png

simonw/datasette-screenshots is an example of a repository that uses this pattern.

See Optimizing PNGs in GitHub Actions using Oxipng for more on how this works.