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.