Screenshots von Webseiten als Bild oder PDF abspeichern

Mit der Veröffentlichung von Chrome-/Chromium-Headless ist es recht einfach, Screenshots zu erstellen.

Früher musste man zb auf PhantomJS zurückgreifen, doch PhantomJS war nicht ganz so zuverlässig.

Wie also Screenshots erstellen?

Screenshots mit Puppeteer (node.js) und Headless-Chrome

Puppeteer kommt vom Chrome-Team und ist eine Node.js Bibliothek.

Puppeteer bietet eine API um einfach mit Chrome-Headless zu sprechen.

Was kann Puppeteer?

  • PDFs und Bilder von Webseiten screenshotten
  • Webscraping, Contentscraping
  • Formulare abschicken
  • Tastatureingaben
  • UI-Testing

Beispiele für die Verwendung findet man auf der GitHub Seite.

Folgendes Tutorial bietet auch einen Startpunkt:

https://tutorialzine.com/2017/08/automating-google-chrome-with-node-js

Screenshots mit Chrome-Headless und Linux-Terminal

Mit einem Terminal lassen sich leicht Screenshots als PDF oder Bild speichern:

chrome --headless --disable-gpu --screenshot https://www.kaoh.at

# Screenshot in Nexus 5x Auflösung
chrome --headless --disable-gpu --screenshot --window-size=412,732 https://www.kaoh.at

Ein guter Artikel und Anleitung dazu findet sich hier:

Echter Headless Chrome (oder Chromium) – Bedien deinen Browser per Kommandozeile, Selenium oder node.js!

Was ist Chrome-Headless?

  • Mit Chrome-Headless kann man den Browser per Kommandozeile/Terminal, Selenium, node.js oder C++ verwenden.
  • Chrome kann daher ressourcenschonend ohne grafische Ausgabe am Server laufen.
  • Man kann per Code Screenshots oder PDFs erstellen, Webseiten debuggen, Formulare ausfüllen und versenden und eben alles machen, was man auch mit der Maus, Tastatur oder per Touch machen kann!

 Gibt es auch Chromium Headless?

Natürlich lässt sich Chromium auch headless starten, und das geht zb im Linux-Terminal so:

$ chromium-browser --headless

Verwendung

Speichern als PDF

$ chromium-browser --headless --disable-gpu --print-to-pdf https://www.kaoh.at

Dieser Befehl erzeugt ein PDF von der angegebenen Seite. Das Ergebnis schaut dann zb so aus:


Es wird also ein PDF mit mehreren Seiten generiert.

Screenshots

chrome --headless --disable-gpu --screenshot https://www.kaoh.at

# Screenshot in Nexus 5x Auflösung
chrome --headless --disable-gpu --screenshot --window-size=412,732 https://www.kaoh.at

Der normale Screenshot liefert folgendes Bild:

Der Screenshot mit der Nexus 5x Auflösung schaut so aus:

Hilfestellungen

Brauche ich die –disable-gpu Flag?

Ja, weil dadurch ein paar Bugs umgangen werden

Wo liegt der Unterschied zu PhantomJS?

PhantomJS verwendet eine ältere Renderengine (eine ältere WebKit-Version).

Viel wichtiger: PhantomJS ist unzuverlässiger, liefert nicht so gute und nachvollziehbare Ergebnisse und macht Probleme mit manchen JavaScript-Dingen.

 

Interessante Links

WhatsApp API? WhatsApp per Code ansprechen. Ein paar Lösungsansätze mit WA-Web und Selenium

tl;dr

Selenium Docker (oder Vagrant) + WhatsApp Web + Selenium + Python Skripte bringen uns zum Ziel!

Lesen und schreiben von Nachrichten an einzelne und in Gruppen funktioniert!

Mit Headless-Chrome und Puppeteer (node.js) kommt man auch zum Ziel!

Links

WhatsApp Web + Selenium (+ Python)

Der wahrscheinlich beste Weg um mit WhatsApp per Code zu arbeiten dürfte Selenium sein. Also die Weboberfläche von WA im Browser per JavaScript ansteuern.

WhatsApp-Web

WhatsApp Web Bot

https://github.com/nosahama/whatsapp-web-bot
Exkurs: Selenium Gschichtln

Diverse Bibliotheken

yowsup – Funktioniert (bald) nicht mehr

Alte, nicht mehr funktoinierende Chat-API:

  • https://github.com/mgp25/Chat-API