shot-scraper¶

shot-scraper ist ein Werkzeug, mit dem sich die Aktualisierung von Screenshots automatisieren lässt.

Installation¶

$ uv add --group docs shot-scraper
$ uv run shot-scraper install

Bemerkung

Die zweite Zeile installiert den benötigten Browser.

Siehe auch

shot-scraper Installation

Verwendung¶

shot-scraper kann auf mehrere Arten verwendet werden

…für einzelne Screenshots auf der Kommandozeile:

$ uv run shot-scraper https://jupyter-tutorial.readthedocs.io/de/latest/clean-prep/index.html -o ~/Downloads/clean-prep.png

…oder mit zusätzlichen Optionen, z. B. für JavaScript- und CSS-Selektoren:

$ uv run shot-scraper https://jupyter-tutorial.readthedocs.io/de/latest/clean-prep/index.html -s '#overview' -o ~/Downloads/clean-prep.png

…für eine Reihe von Screenshots, die in einer YAML-Datei konfiguriert sind:

- url: https://jupyter-tutorial.readthedocs.io/de/latest/clean-prep/index.html
  output: ~/Downloads/clean-prep.png
- url: https://www.example.org/
  width: 736
  quality: 40
  output: example.jpg

Anschließend kann shot-scraper multi verwendet werden, z. B.:

$ shot-scraper multi shots.yaml
Screenshot of 'https://jupyter-tutorial.readthedocs.io/de/latest/clean-prep/index.html' written to '~(Downloads/clean-prep.png'
Screenshot of 'https://www.example.org/' written to 'example.jpg'

Siehe auch

Taking multiple screenshots
Im shot-scraper-demo-Repository findet ihr eine deutlich umfangreichere shots.yaml-Datei.

…für Videos:

Der shot-scraper video-Befehl nimmt ein WebM-Video anhand eines YAML-Storyboards auf. Storyboards beschreiben das Video als Abfolge von Szenen. Jede Szene kann eine Seite öffnen, auf Inhalte warten, Aktionen ausführen und zwischen den Schritten eine Pause einlegen, z. B.:

storyboard.yml¶

output: demo.webm
url: https://python-basics-tutorial.readthedocs.io/en/latest/

viewport:
  width: 1280
  height: 720

cursor: true
wait_for: "text=Python für Data Science"

scenes:
- name: Home
  do:
  - pause: 1

- name: Introduction
  do:
  - click: ".sidebar-tree a[href='intro.html']"
  - wait_for: 'h1:has-text("Introduction")'
  - screenshot: intro.png
  - pause: 1

- name: Search
  do:
  - click: "input.sidebar-search"
  - type:
      into: "input.sidebar-search"
      text: "shot-scraper"
      delay_ms: 25
  - press:
      selector: "input.sidebar-search"
      key: Enter
  - wait_for: "text=Search Results"
  - pause: 2

Führt anschließend folgenden Befehl aus:

$ uv run shot-scraper video storyboard.yml

Dadurch wird url geöffnet, die Szenen werden aufgezeichnet und das Video wird unter dem Namen demo.webm gespeichert.

Sofern FFmpeg installiert ist, könnt ihr mit der Option --mp4 das aufgezeichnete WebM-Video zusätzlich in MP4 konvertieren.

Siehe auch

Recording videos

GitHub-Actions¶

shot-scraper lässt sich einfach in GitHub Actions einbinden. Im shot-scraper-demo-Repository findet sich auch eine exemplarische shots.yml. Einmal am Tag werden zwei Screenshots erzeugt und zurück in das Repository übertragen. Beachtet jedoch, dass das Speichern von Bilddateien, die sich häufig ändern, die Revisionshistorie sehr unleserlich machen können. Daher solltet ihr shot-scraper mit Bedacht zusammen mit GitHub Actions verwenden.