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. 

npx playwright test --trace on

npx playwright show-report