Alles über Playwright

Playwright ist ein Open-Source-Framework für End-to-End-Testautomatisierung, das von Puppeteer stammt, das auf node.js basiert und von Microsoft verwaltet wird. 

In 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, um mit allen Treibern zu kommunizieren. Aus diesem Grund erweist sich Playwright als eines der schnellsten und einfachsten Automatisierungsframeworks in der Welt der Softwaretests. Schnell und einfach = Playwright. Wie genau ist es also? Nach dem Lesen dieses Artikels werden Sie ein Gefühl dafür bekommen, ob dieses Framework für die Software, an der Sie arbeiten, zuverlässig genug ist. 

Warum Playwright verwenden? 

Ehrlich gesagt war dies für mich das am einfachsten einzurichtende Framework. Ein Einzeiler-Befehl richtet Ihre Automatisierungsumgebung ein und Sie können mit der Automatisierung beginnen. 

Einige der Gründe, warum Softwareteams ihr Automatisierungsframework auf Playwright umgestellt haben, sind, dass es mehrere Sprachen wie JavaScript, Java, Python und .NET C# unterstützt. Darüber hinaus wird eine Vielzahl von Testläufern unterstützt: Mocha, Jest, Jasmine, Cucumber. Das Coole an der Ausführung von Playwright-Tests ist, dass es Headless-Browser mit ereignisgesteuerter Architektur ausführt. 

Wie richte ich es ein? 

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 zum Ausführen 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 wichtiges Merkmal von Playwright ist, dass es standardmäßig alle Tests ohne 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 kompatibel, darunter Microsoft Edge (Chromium), Apple Safari (mit Webkit), Mozilla Firefox und Chrome. Standardmäßig ist die parallele Ausführung mehrerer Tests aktiviert. Ein weiterer Faktor, der die Ausführungszeit beschleunigt. 

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

ds up the execution time.

npx playwright test

Der Befehl zum Ausführen von Headed-Tests lautet 

npx playwright test --headed

Wenn Sie den Headed-Browser mit dem NPM-Benutzer ausführen möchten: 

npm run test -- --headed.

Wenn Sie ein einzelnes Projekt ausführen möchten, beispielsweise Chromium, können Sie den Befehl 

npx playwright test --project=chromium

ausführen. Dann wird es nur in Chromium ausgeführt. 

Während der Ausführung warten die Tests automatisch, damit die Steuerelemente verfügbar sind. Es ist also nicht nötig, für eine Aktion eine zusätzliche Warte-/Ruhezeit festzulegen. 

Da wir drei verschiedene Browser testen, teilt Playwright sie automatisch in drei separate Worker auf. Sobald der Testlauf abgeschlossen ist, werden die Ergebnisse in diesem Ordner namens „Playwright Report“ generiert. 

Tipps zum Schreiben von Tests 

Wie ich bereits erwähnt habe, dauert es nicht lange, mit dem Schreiben von Testskripten in Playwright zu beginnen, da die Beispieltestdatei bereits ein sauberes, strukturiertes Format bietet. Sie können einfach Ihre persönlichen Skripte ersetzen, um loszulegen. Später können Sie Ihre Codestruktur verbessern, um sie 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/');

   })
 });

Schnelle Methode zum Auffinden von Selektoren und Iframes 

Verwenden Sie die Methode „page.waitForSelector()“, um zu warten, bis ein Element auf der Seite angezeigt wird. Diese Methode verwendet einen Selektor als Argument und gibt ein Versprechen zurück, das eingelöst wird, wenn das Element gefunden wird. Sobald Sie den Selektor für das Element identifiziert haben, mit dem Sie interagieren möchten, können Sie die Methode „page.click()“ verwenden, um mit dem Element zu interagieren. 

Rufen Sie beim Ausführen im Header-Browser die Methode page.pause() aus Ihrem Skript auf. Die Verwendung einer Methode page.pause() ist eine einfache Möglichkeit, die Ausführung des Playwright-Skripts anzuhalten und die Seite in den Entwicklertools zu überprüfen. Außerdem wird Playwright Inspector geöffnet, um beim Debuggen zu helfen. 

Codegen für Tester ist wie der GitHub-Copilot für Entwickler. Es generiert Ihre Benutzerinteraktionen in Code. Codegen ist ein Codegenerator, mit dem Sie Ihre Testskripte sofort präzise erstellen können, während Sie die Aktionen in Ihrem Browser ausführen. 

 

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

 

npx playwright codegen qestit.com

 

Er verkürzt Ihre Codierzeit im Grunde vom Schreiben von Skripten auf bloßes Klicken. Sobald Ihr Code fertig ist, kopieren Sie ihn und fügen ihn in Ihre Testklasse ein. Dies beschleunigt Ihre Implementierung und Ausführung! 

 

Mit der Erweiterung „Playwright Test for VS Code“ müssen Sie nicht einmal Befehle eingeben. Diese Erweiterung vereinfacht das Identifizieren von Selektoren, indem Sie einfach mit der Maus über das Element fahren und der Locator für Sie geschrieben wird. Sie müssen nur klicken, eingeben, kopieren und einfügen

 

1. Installieren Sie die Erweiterung:

 

2. Gehen Sie in Ihrem Test-Explorer zum Testfall 

 

3. Klicken Sie auf „Locator auswählen“

 

4. Aktivieren Sie „Browser anzeigen“

 

5. Bewegen Sie den Mauszeiger über das Element, das Sie nicht finden können, klicken Sie darauf und der Locator wird in Ihrem Editor angezeigt.

 

 

Berichte mit interaktiven Trace-Dateien 

 

Playwright verfügt standardmäßig über viele großartige Reporter wie List-, Dot-, Line-, JSON-, JUnit- und HTML-Reporter. 

 

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 Ihnen die Zeitleiste und die für den Test durchgeführten Aktionen zeigen. Es handelt sich einfach um einen DOM-Schnappschuss (mit dem Sie interagieren können). Wenn Sie jetzt den Befehl zum Anzeigen des Berichts ausführen, erhalten Sie Ihren interaktiven Bericht. 

 

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

npx playwright test --trace on

 

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

npx playwright show-report