Was ist Puppeteer?

Puppeteer stellt eine Node-Bibliothek dar und ist Open Source. Es bietet eine High-Level-API zur Steuerung von Chrome oder Chromium über das DevTools Protocol. Es ermöglicht Entwicklern, Headless-Browser- oder Full-Browser-Tests durchzuführen, Inhalte zu rendern, Seiten zu scannen und viele andere automatisierte Aufgaben in Webseiten durchzuführen.

Das Projekt wird von Google Chrome entwickelt und steht auf GitHub zur Verfügung. Interessierte Entwickler können den Quellcode einsehen, Änderungen vorschlagen, Fehler melden oder sogar zur Weiterentwicklung des Projekts beitragen. Da es Open Source ist, fördert es eine aktive Gemeinschaftsbeteiligung und bietet Transparenz in Bezug auf Funktionalität und Sicherheit.

Die Entstehung von Puppeteer

Google Chrome hat es entwickelt und 2017 erstmals veröffentlicht. Die primäre Intention lag darin, Entwicklern eine Möglichkeit zu bieten, ihre Webanwendungen automatisch zu testen und die Performance ihrer Seiten zu analysieren. Da Puppeteer direkt von dem Team hinter Chrome stammt, genießt es nahtlose Integrationen und ständige Updates, die mit den neuesten Browserfunktionen übereinstimmen.

Puppeteer nutzen

Um es optimal zu nutzen, benötigen Entwickler Grundkenntnisse in JavaScript, da die Bibliothek auf Node.js basiert. Hier einige Hauptfunktionen und wie man sie nutzt:

1. Seiten öffnen und Screenshots erstellen

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({ path: 'screenshot.png' });
  await browser.close();
})();

1. Automatisiertes Formularausfüllen und Klicken

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com/form');
  
  await page.type('#username', 'myUser');
  await page.type('#password', 'myPassword');
  await page.click('[type="submit"]');
  
  await browser.close();
})();

Installation

Die Einrichtung erfolgt in wenigen Schritten:

1. Node.js installieren: Node.js ist eine Voraussetzung. Daher sollte man zuerst Node.js und npm (Node Package Manager) auf dem System installieren.
2. Puppeteer über npm installieren: npm install puppeteer
3. Nach erfolgreicher Installation lässt es sich in jedem Node.js-Skript verwenden.

Fazit

Puppeteer revolutioniert die Art und Weise, wie Entwickler das Web automatisieren und testen. Mit einer aktiven Community und der starken Unterstützung von Google bleibt es ein wertvolles Tool für jeden Webentwickler. Es bietet nicht nur Testmöglichkeiten, sondern auch Performance-Optimierungen, Content-Scraping und mehr. Mit der einfachen Einrichtung und der umfangreichen Dokumentation starten Entwickler in kürzester Zeit mit der Automatisierung ihrer Webanwendungen.

Der Beitrag Puppeteer – Automatisierung und End-to-End-Tests im Web erschien zuerst auf CEOsBay.

Minimierung (Minification / Minify)

Unter Minifizierung versteht man das Entfernen aller überflüssigen Zeichen aus dem Quellcode von interpretierten Programmiersprachen oder Markup-Sprachen, ohne dessen Funktionalität zu verändern. Dazu in einem separaten Beitrag mehr.

CSS (Cascading Style Sheets)

Eine Programmiersprache, die es ermöglicht, das Design von elektronischen Dokumenten zu bestimmen. Auch hier bei einem separaten Beitrag mehr.

Sass (Syntactically Awesome Stylesheets)

CSS mit Superkräften bzw. auf Steroiden. Dies werde ich auch in einem separaten Beitrag ausführlich thematisieren.

npm

Der Node Package Manager ist ein Paketmanager für die JavaScript-Programmiersprache, der von npm, Inc. gepflegt wird. npm ist der Standard-Paketmanager für die JavaScript-Laufzeitumgebung Node. Es vereinfacht das Installieren von Node-„Paketen“. Ein Paket, auch Modul genannt, ist lediglich eine Code-Bibliothek, die Node um nützliche Funktionen erweitert. Das Modul „request“ zum Beispiel vereinfacht https-Anfragen, so dass man problemlos Webressourcen von anderen Websites abrufen kann. npm wird bei der Installation von Node mitinstalliert. Obwohl es auf der Node-Website ein MacOS-Installationsprogramm gibt, wird die Verwendung von Homebrew zur Installation und Aktualisierung von Node empfohlen. Über und wie man Homebrew installiert bzw. verwendet, kann in einem anderen Beitrag gelesen werden, den ich geschrieben habe.

Grundsätzlich sollte man mit dem Mac-Terminal vertraut sein, da es zum Installieren und Testen von Node und npm verwenden werden muss. Die Terminal-Anwendung befindet sich im Dienstprogramme Ordner unter den Programmen. Ansonsten kann man auch einfach mit der Tastenkombination Command + Leertaste im Spotlight nach dem Terminus Terminal suchen. Durch die Verwendung von Homebrew können etwaige Sicherheitsprobleme vermieden werden, die mit der Verwendung des sudo-Befehls zur Installation von Software wie Node und Node-Modulen einhergehen.

Installation

Die Installation von Node.js® und npm ist mit Homebrew relativ einfach. Homebrew übernimmt das Herunterladen, Entpacken (Eine komprimierte bzw. archivierte Datei extrahieren) und Installieren von Node.js® und npm auf dem System. Der Installationsprozess dauert lediglich ein paar Minuten.

Ist das Terminal geöffnet, geht es folgendermaßen weiter:

brew update

brew update aktualisiert die Repository

brew install node

Hiermit lässt sich Node.js® installieren

node -v

Mit diesem Befehl lässt sich überprüfen, ob und in welcher Version Node installiert ist.

npm -v

Und hiermit, ob und in welcher Version npm installiert ist.

Damit sind Node.JS® und npm erfolgreich installiert!

Der Beitrag Node.js® mit npm auf MacOS erschien zuerst auf CEOsBay.