Playwright für JavaScript (Node.js): Komplettes Tutorial mit Beispielen

Playwright ist eine moderne Open-Source-Bibliothek zur Browser-Automation, entwickelt von Microsoft. Sie bietet eine einheitliche API zur Steuerung von Chromium, Firefox und WebKit (Safari-Engine) über das DevTools-Protokoll. Im Gegensatz zu Selenium wurde Playwright von Grund auf für moderne Webanwendungen konzipiert und unterstützt Szenarien wie das Abfangen von Netzwerkanfragen, die Emulation mobiler Geräte, die Arbeit mit mehreren Seiten und Tabs sowie das automatische Warten auf Elemente.

Der Hauptzweck von Playwright ist das End-to-End (E2E) Testing von Webanwendungen. Seine Möglichkeiten gehen jedoch weit über das Testen hinaus: Die Bibliothek wird zum Scraping dynamischer Websites (SPAs), zur Automatisierung von Routineaufgaben (z. B. Formularausfüllung), zur Erstellung von Screenshots und PDF-Berichten sowie zur Überwachung der Leistung von Webseiten eingesetzt. Dank der Unterstützung aller drei großen Browser-Engines können Sie sicher sein, dass Ihre Anwendung in jeder Umgebung korrekt funktioniert.

Der entscheidende Vorteil von Playwright gegenüber der Konkurrenz ist Geschwindigkeit und Zuverlässigkeit. Die Bibliothek verwendet eine asynchrone Architektur auf Basis von Promises, wartet automatisch auf das Erscheinen von Elementen (kein sleep() notwendig) und kann mit iframes, Pop-ups und Browser-Konsolenmeldungen umgehen. Playwright bietet außerdem einen integrierten Test-Generator (codegen), der Ihre Aktionen im Browser aufzeichnet und in fertigen Code umwandelt.

Playwright Installation

Für die Installation von Playwright in einem Node.js-Projekt führen Sie folgende Befehle im Terminal aus:

npm init -y
npm install playwright
npx playwright install

Der erste Befehl erstellt die Datei package.json, der zweite installiert die Bibliothek selbst und der dritte lädt die Browser herunter (Chromium, Firefox und WebKit). Wenn Sie nur einen Browser installieren möchten, verwenden Sie npx playwright install chromium.

Für TypeScript installieren Sie zusätzlich die Typen:

npm install -D @playwright/test

Wenn Sie Playwright als Test-Framework verwenden, empfiehlt sich die Installation von @playwright/test, das einen Test-Runner, Fixtures und Konfiguration enthält.

Schnellstart: Minimales funktionierendes Beispiel

Erstellen Sie eine Datei example.js und fügen Sie folgenden Code ein:

const { chromium } = require('playwright');

(async () => {
  // Browser starten (headless: true — ohne grafische Oberfläche)
  const browser = await chromium.launch({ headless: true });
  // Neue Seite (Tab) erstellen
  const page = await browser.newPage();
  
  // Website aufrufen
  await page.goto('https://example.com');
  
  // Seitentitel abrufen
  const title = await page.title();
  console.log('Seitentitel:', title);
  
  // Screenshot erstellen
  await page.screenshot({ path: 'example.png' });
  
  // Browser schließen
  await browser.close();
})();

Starten Sie das Skript mit dem Befehl node example.js. In der Konsole wird der Seitentitel angezeigt, und im Ordner erscheint die Datei example.png mit dem Screenshot.

Dieses Beispiel zeigt den grundlegenden Arbeitsablauf mit Playwright: Browser starten, Seite erstellen, Navigation, Interaktion mit dem DOM und Schließen.

Wichtige Playwright Methoden und Klassen

Nachfolgend finden Sie die wichtigsten Methoden und Klassen der Bibliothek. Für jede Methode sind Signatur, kurze Beschreibung und ein funktionierendes Beispiel angegeben.