Playwright

Alles über Playwright

Die Suche nach dem perfekten Testautomatisierungstool für Ihre Software ist keine leichte Aufgabe. Zunächst einmal müssen wir akzeptieren, dass jede Software einzigartig ist und ihre eigene Art der Bereitstellung hat. Die Art der Automatisierungstools, die für die Anpassung an den Lebenszyklus von Softwaretests erforderlich sind, hängt in hohem Maße von den Ressourcen, dem Team und der Strategie des Unternehmens ab. Es gibt also nicht das beste Testautomatisierungstool. Es gibt jedoch eine Reihe beliebter Tools, die derzeit im Trend liegen und die sich leicht an Ihr Projekt anpassen lassen. Einige Beispiele für beliebte Automatisierungstools, die sowohl bei einfachen als auch bei komplexen Systemen eingesetzt werden, um eine zuverlässige und genaue Testqualität zu gewährleisten, sind Selenium, Appium, Katalon Studio, Cypress und Playwright.   

Heute wollen wir eines der neuesten Automatisierungstools, das sich als erfolgreich erwiesen hat, ins Rampenlicht stellen: Playwright. 

Wie jeder Tester stand auch ich bei meinen früheren Projekten vor einigen Herausforderungen, die den Prozess der Frontend-Automatisierung verlangsamten. Das Schreiben von übermäßigem Boilerplate-Code zum Einrichten der Browser, langsame Testausführungen, unzuverlässige Wartezeiten, Schwierigkeiten beim Auffinden der Selektoren und fehlerhafte Tests, um nur einige zu nennen. Erst als mir ein großartiger Kollege Playwright vorstellte, erhellte sich die Welt der Automatisierung für mich.   

Was ist Playwright?

Playwright is ein open source End-to-End-Framework zur Testautomatisierung, das von Puppeteer stammt, auf node.js basiert und von Microsoft gepflegt wird.    

Bei der traditionellen Selenium-Architektur wird jede HTTP-Anfrage separat gesendet und erhält eine JSON-Antwort, was zu einer Hin- und Her-Kommunikation führt und den gesamten Prozess verlangsamt. Playwright hingegen verwendet eine einzige API. 

Es verwendet einen einzigen WebSocket für die Kommunikation mit allen Treibern. Aus diesem Grund ist Playwright eines der schnellsten und einfachsten Automatisierungsframeworks in der Welt der Softwaretests. Schnell und einfach = Playwright. Wie präzise ist es also? Nach der Lektüre dieses Artikels werden Sie ein Gefühl dafür bekommen, ob dieses Framework zuverlässig genug ist, um es für die Software, an der Sie arbeiten, einzusetzen.    

Warum sollte man Playwright verwenden?

Ehrlich gesagt, war dies für mich das am einfachsten einzurichtende Framework. Mit einem einzigen Befehl wird die Automatisierungsumgebung eingerichtet, und Sie können mit der Automatisierung beginnen.   

Einige der Gründe, warum Software-Teams ihr Automatisierungs-Framework auf Playwright umgestellt haben, liegen darin, dass es mehrere Sprachen wie wie JavaScript, Java, Python und .NET C# unterstützt und darüber hinaus eine Vielzahl von Testläufern unterstützt: Mocha, Jest, Jasmine, Cucumber. Das Tolle an der Ausführung von Playwright-Tests ist, dass sie in Headless-Browsern mit ereignisgesteuerter Architektur ausgeführt werden.   

Wie richte ich es ein?

Playwright ist kompatibel mit allen modernen Betriebssystemen (Windows, Mac und Linux) mit der Anforderung von: 

  1. Node JS 
  2. Visual Studio Code   

Erstellen Sie einen Ordner im OS, wie z.B. LEARN-PLAYWRIGHT, öffnen Sie den Ordner mit VS Code. Führen Sie das Stammverzeichnis des Projekts mit dem folgenden Befehl aus 

npm init playwright@latest   

So sieht die Ordnerstruktur für ein typisches Playwright-Projekt aus. Sie erhalten ein Beispiel für die Struktur eines Testprojekts mit einer einfachen Struktur, die alle Voraussetzungen für die Erstellung einer Testspezifikation enthält. Im folgenden Beispiel habe ich Typescript als Sprache gewählt, daher sind die Dateinamen in ts.    

Die Datei playwright.config.ts enthält den Abschnitt namens Projekte, in dem der zu testende Prozess festgelegt wird. Hier können Sie die Browser-, Kontext- und Seitenfixtures konfigurieren. Sie können Optionen global oder lokal festlegen und die Aufzeichnung oder Testaufzeichnung aktivieren.

Hier sind die Browser, die standardmäßig ausgeführt werden. Die Tests werden unter Chromium, Firefox und WebKit (Safari) ausgeführt.

// playwright.config.ts

import { defineConfig, devices } from '@playwright/test';


export default defineConfig({
projects: [
  {
    name: 'chromium',
    use: { ...devices['Desktop Chrome'] },
  },
  {
    name: 'firefox',
    use: { ...devices['Desktop Firefox'] },
  },
  {
    name: 'webkit',
    use: { ...devices['Desktop Safari'] },
  },
],
});

Die Beispieltests, die ausgeführt werden, befinden sich in der Datei example.spec.ts.

Playwright stellt Ihnen die JSON-Datei zur Verfügung, die "test" als Skript für die Ausführung von Tests verwendet.

So sieht eine Standard-JSON-Datei aus.

{

"name": "LEARN-PLAYWRIGHT",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
 },
 "keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
  "@playwright/test": "^1.16.3"
}
}

Ein wesentliches Merkmal von Playwright ist, dass es standardmäßig alle Tests „headless“ ausführt. Um dieses Verhalten zu ändern, verwenden Sie headless: false als Startoption in der Konfigurationsdatei.

 

import { defineConfig } from '@playwright/test';
export default defineConfig({
use: {
  headless: false,
  viewport: { width: 1280, height: 720 },
  ignoreHTTPSErrors: true,
  video: 'on-first-retry',
},
});

Ausführen Ihres Beispieltests und Browserkompatibilität

Playwright ist mit allen modernen Browsern wie Microsoft Edge (Chromium), Apple Safari (mit Webkit), Mozilla Firefox und Chrome kompatibel. In der Standardeinstellung können mehrere Tests parallel ausgeführt werden. Ein weiterer Faktor, der die Ausführungszeit beschleunigt.

Führen Sie Ihren ersten Beispieltest mit dem untenstehenden Befehl aus.

npx playwright test

Der Befehl um die headed Tests zu führen ist:

npx playwright test --headed

Wenn Sie einen headed Browser mit npm User ausführen möchten:

npm run test -- --headed.

 Wenn Sie ein einzelnes Projekt, z.B. Chromium, ausführen wollen, dann können Sie den Befehl

npx playwright test --project=chromium
 

Und es wird nur in Chromium laufen.

Während der Ausführung warten die Tests automatisch darauf dass die Steuerelemente verfügbar sind, sodass keine zusätzliche Warte-/Schlafzeit für eine Aktion eingeplant werden muss. 

Da wir drei verschiedene Browser testen, teilt Playwright die Tests automatisch in drei separate Worker auf. Sobald der Testlauf abgeschlossen ist, werden die Ergebnisse in diesem Ordner namens playwright report gespeichert.

Tipps zum Schreiben von Tests

Wie ich bereits erwähnt habe, ist der Einstieg in das Schreiben von Testskripten in Playwright sehr einfach, da die Beispiel-Testdatei bereits ein sauberes, strukturiertes Format vorgibt. Für den Anfang können Sie einfach Ihre eigenen Skripte ersetzen. Später können Sie die Struktur Ihres Codes verbessern, um ihn sauberer und objektorientierter zu gestalten.

test.describe('navigate to website', () => {
test('navigate to website', async ({ page }) => {

  // Navigate to base url
  await page.goto('https://qestit.com/');

  })
 });

Schnelles Auffinden von Selektoren und iframes

Nutzen Sie die “page.waitForSelector()” Methode um auf das Erscheinen eines Elements auf der Seite zu warten. Diese Methode nimmt einen Selektor als Argument und gibt ein Versprechen zurück, das aufgelöst wird, wenn das Element gefunden wird. Sobald Sie den Selektor für das Element, mit dem Sie interagieren möchten, identifiziert haben, können Sie die Methode “page.click()” nutzen um mit dem Element zu interagieren.

Wenn die Tests im headed browser laufen, nutzen Sie die page.pause() Methode aus dem Script. page.pause() Methode eine einfache Möglichkeit, die Ausführung des Playwright-Skripts anzuhalten und die Seite in den Entwicklertools zu überprüfen. Außerdem wird der Playwright-Inspector geöffnet, der bei der Fehlersuche hilft.

Playwright ist auch für die Handhabung der Navigation zwischen verschiedenen Seiten, z. B. iframes und verschiedenen Registerkarten, bekannt. Dies ist eine zuverlässige Methode, um zu überprüfen, ob der richtige Inhalt an der aktuellen Stelle angezeigt wird, und vermeidet falsch positive/negative Ergebnisse.   

Leichtes Debugging

Es geht darum, alles aufzuschlüsseln. Die Fehlersuche wird durch die visuelle Aufschlüsselung der Zeilen mit dem Debugger von Playwright vereinfacht. Fügen Sie Haltepunkte hinzu, führen Sie den Test im Debug-Modus aus, und der laufende Test wird am Haltepunkt angehalten und zeigt Ihnen die Situation an. Playwright verfügt über einen Strict-Modus - wenn es also ähnliche Selektoren gibt, bricht der Test ab und schlägt ein paar Schritte vor dem eigentlichen Fehler fehl. 

Codegen-Erweiterung: Schreiben Sie einen Test von Grund auf, ohne Code zu schreiben

Codegen für Tester ist wie der GitHub Copilot für Entwickler. Es generiert Ihre Benutzerinteraktionen als Code. Codegen ist ein Code-Generator, der es Ihnen ermöglicht, Ihre Testskripte sofort und präzise zu erstellen, während Sie die Aktionen in Ihrem Browser ausführen. 

Wenn Sie zum Beispiel einen Testfall auf einer Seite automatisieren möchten, führen Sie den Befehl aus:

npx playwright codegen qestit.com

Es verkürzt die Zeit, die Sie für das Schreiben von Skripten benötigen, auf einen Klick. Sobald Ihr Code fertig ist, können Sie ihn kopieren und in Ihre Testklasse einfügen. Das beschleunigt Ihre Implementierung und Ausführung! 

Erweiterungen, die die Identifizierung von Selektoren und das Debugging beschleunigen:

Mit der Playwright Test for VS Code-Erweiterung müssen Sie nicht einmal Befehle eingeben. Diese Erweiterung vereinfacht die Identifizierung von Selektoren, indem Sie einfach mit der Maus über das Element fahren, während der Locator für Sie geschrieben wird. Alles, was Sie tun müssen, ist klicken, eingeben, kopieren und einfügen.

  1. 1.Erweiterung installieren

2. Gehen Sie auf Test Case in ihrem Explorer

3. Klicken Sie auf “show browser”

4. Klicken Sie auf “pick locator”

5. Bewegen Sie den Mauszeiger über das Element, das Sie nicht finden können, klicken Sie es an, und der Locator erscheint in Ihrem Editor.

Berichte mit interaktiven Trace-Dateien

Playwright wird standardmäßig mit vielen großartigen Reportern wie List, Dot, Line, JSON, JUnit und HTML Reportern ausgeliefert.

Der Befehl zum Abrufen von Testberichten lautet npx playwright show-report. Er zeigt einen sauberen Bericht in einem Browser an, in dem Sie jeden Schritt erweitern oder minimieren können, um zu sehen, wo der Fehler aufgetreten ist, wenn ein Test fehlschlägt. 

Playwright erstellt auch Trace-Dateien. Dabei handelt es sich um Zip-Dateien, die die Zeitachse und die für den Test durchgeführten Aktionen anzeigen. Es handelt sich einfach um einen DOM-Snapshot (mit dem Sie interagieren können). Wenn Sie nun den Befehl für show report ausführen, erhalten Sie Ihren interaktiven Bericht.

Traces werden normalerweise in einer CI-Umgebung ausgeführt, aber Sie können ein Trace auch lokal mit dem folgenden Befehl ausführen:

npx playwright test --trace on

Um den Bericht zu öffnen, führen Sie aus: 

npx playwright show-report

Einfach zu integrieren

Da Methoden der kontinuierlichen Integration sehr beliebt sind, kann Playwright leicht in CI/CD-Pipelines in CI-Tools integriert werden. Playwright kann auch in die Docker-Umgebung und Selenium Grid integriert werden. 

Nachteile

Playwright hat noch eine recht kleine Community. Es ist nicht so komplex wie die anderen Testautomatisierungs-Frameworks, was bedeutet, dass es Probleme geben kann, die noch nicht bekannt sind. Mit der Zeit wird sich jedoch die Dokumentation von Lösungen und Abhilfemaßnahmen weiterentwickeln.

Ein weiterer Nachteil ist, dass es im Gegensatz zu Cypress keine realen Geräte für Mobile Browser Tests unterstützt, wohl aber Emulatoren.

Playwright verfügt über eine Komponententestfunktion, die noch nicht vollständig stabil ist. Daran wird noch gearbeitet. Das Framework verfügt jedoch über eine aktive und tatkräftige Gemeinschaft, die daran arbeitet, das Beste aus den Verbesserungen herauszuholen. 

Zusammenfassung

Mehrere IT-Fachleute auf der ganzen Welt haben zum Ausdruck gebracht, dass die Testautomatisierung zu einer "lebenden Dokumentation" wird, die sowohl von Testern als auch von wichtigen technischen Interessengruppen gelesen werden kann. Sie hat die Fähigkeit, die interaktiven Hintergründe eines Systems für aktuelle und neue Teammitglieder darzustellen. Mit anderen Worten: Die Testskripte und die Struktur sollen leicht verständlich und nicht personenabhängig sein. Aspekte wie Wartbarkeit und Einfachheit können eine Herausforderung darstellen, wenn es um die Menge der automatisierten Tests geht. 

Playwright trägt wesentlich dazu bei, die Vorgänge während der Testausführung zu visualisieren, was sie interaktiv und lohnend für Tester und sogar Entwickler macht. Playwright kann ein großartiges Automatisierungstool sein, das sich für Ihre Projekte lohnt, da es eine saubere Darstellung von Testskripten bietet und auf der Grundlage einiger der oben genannten hilfreichen Erweiterungen Minuten und sogar Stunden Ihrer Testzeit einsparen kann. 

Give it a shot: https://playwright.dev/docs/intro

Über den Autor

ist eine technische Testerin und hat verschiedene Rollen innerhalb des QA-Prozesses gehabt. Von der Anforderungsanalyse über manuelle Tests bis hin zur Entwicklung automatisierter Tests. Sie ist zielstrebig und positiv, hat ein breites technisches Wissen und große Erfahrung im Testen und Testdesign.

Möchten Sie mehr über Testing erfahren?