Playwright ist ein Framework für Webtests und -automatisierung. Es ermöglicht das Testen von Chromium, Firefox und WebKit mit einer einzigen API. Playwright wurde entwickelt, um eine browserübergreifende Webautomatisierung zu ermöglichen, die stets umweltfreundlich , leistungsfähig , zuverlässig und schnell ist.
| Linux | macOS | Windows | |
|---|---|---|---|
| Chrom 131.0.6778.33 | ✅ | ✅ | ✅ |
| WebKit 18.0 | ✅ | ✅ | ✅ |
| Firefox 132.0 | ✅ | ✅ | ✅ |
Die Headless-Ausführung wird für alle Browser auf allen Plattformen unterstützt. Weitere Informationen finden Sie in den Systemanforderungen.
Suchen Sie einen Dramatiker für Python, .NET oder Java?
Playwright verfügt über einen eigenen Testläufer für End-to-End-Tests, wir nennen ihn Playwright Test.
Der einfachste Weg, mit Playwright Test zu beginnen, besteht darin, den Befehl init auszuführen.
# Run from your project's root directory
npm init playwright@latest
# Or create a new project
npm init playwright@latest new-projectDadurch wird eine Konfigurationsdatei erstellt, optional Beispiele, ein GitHub-Aktionsworkflow und ein erster Test example.spec.ts hinzugefügt. Sie können jetzt direkt zum Abschnitt zum Schreiben von Behauptungen springen.
Abhängigkeit hinzufügen und Browser installieren.
npm i -D @playwright/test
# install supported browsers
npx playwright installSie können optional nur ausgewählte Browser installieren. Weitere Informationen finden Sie unter Browser installieren. Oder Sie installieren überhaupt keine Browser und nutzen bestehende Browserkanäle.
Automatisches Warten . Der Dramatiker wartet darauf, dass Elemente umsetzbar sind, bevor er Aktionen ausführt. Es gibt auch eine reichhaltige Auswahl an Selbstbeobachtungsveranstaltungen. Die Kombination beider macht künstliche Zeitüberschreitungen überflüssig – eine Hauptursache für unzuverlässige Tests.
Web-First-Behauptungen . Dramatiker-Behauptungen werden speziell für das dynamische Web erstellt. Die Prüfungen werden automatisch wiederholt, bis die erforderlichen Bedingungen erfüllt sind.
Aufspüren . Konfigurieren Sie die Testwiederholungsstrategie, erfassen Sie Ausführungsverfolgungen, Videos und Screenshots, um Flakes zu vermeiden.
Browser führen Webinhalte unterschiedlicher Herkunft in unterschiedlichen Prozessen aus. Playwright ist auf die Architektur moderner Browser abgestimmt und führt Tests außerhalb des Prozesses durch. Dadurch ist Playwright frei von den typischen Einschränkungen für In-Process-Test-Runner.
Alles mehrfach . Testszenarien, die mehrere Registerkarten, mehrere Ursprünge und mehrere Benutzer umfassen. Erstellen Sie Szenarien mit unterschiedlichen Kontexten für verschiedene Benutzer und führen Sie diese auf Ihrem Server aus – alles in einem Test.
Vertrauenswürdige Veranstaltungen . Bewegen Sie den Mauszeiger über Elemente, interagieren Sie mit dynamischen Steuerelementen und erzeugen Sie vertrauenswürdige Ereignisse. Playwright verwendet eine echte Browser-Eingabepipeline, die nicht vom echten Benutzer zu unterscheiden ist.
Testen Sie Frames, durchdringen Sie das Shadow DOM. Dramatiker-Selektoren durchdringen das Schatten-DOM und ermöglichen die nahtlose Eingabe von Frames.
Browserkontexte . Playwright erstellt für jeden Test einen Browserkontext. Der Browserkontext entspricht einem brandneuen Browserprofil. Dies ermöglicht eine vollständige Testisolation ohne Overhead. Das Erstellen eines neuen Browserkontexts dauert nur wenige Millisekunden.
Einmal anmelden . Speichern Sie den Authentifizierungsstatus des Kontexts und verwenden Sie ihn in allen Tests wieder. Dadurch werden sich wiederholende Anmeldevorgänge bei jedem Test umgangen, dennoch wird eine vollständige Isolierung unabhängiger Tests gewährleistet.
Codegen . Generieren Sie Tests, indem Sie Ihre Aktionen aufzeichnen. Speichern Sie sie in einer beliebigen Sprache.
Dramatiker-Inspektor . Überprüfen Sie die Seite, generieren Sie Selektoren, durchlaufen Sie die Testausführung, sehen Sie sich Klickpunkte an und erkunden Sie Ausführungsprotokolle.
Trace-Viewer . Erfassen Sie alle Informationen, um den Testfehler zu untersuchen. Playwright Trace enthält einen Testausführungs-Screencast, Live-DOM-Snapshots, einen Aktions-Explorer, eine Testquelle und vieles mehr.
Suchen Sie einen Dramatiker für TypeScript, JavaScript, Python, .NET oder Java?
Um zu erfahren, wie Sie diese Playwright-Testbeispiele ausführen, sehen Sie sich unsere Dokumentation zu den ersten Schritten an.
Dieses Code-Snippet navigiert zur Playwright-Homepage und speichert einen Screenshot.
import { test } from '@playwright/test' ;
test ( 'Page Screenshot' , async ( { page } ) => {
await page . goto ( 'https://playwright.dev/' ) ;
await page . screenshot ( { path : `example.png` } ) ;
} ) ; Dieses Snippet emuliert Mobile Safari auf einem Gerät an einem bestimmten Standort, navigiert zu maps.google.com, führt die Aktion aus und erstellt einen Screenshot.
import { test , devices } from '@playwright/test' ;
test . use ( {
... devices [ 'iPhone 13 Pro' ] ,
locale : 'en-US' ,
geolocation : { longitude : 12.492507 , latitude : 41.889938 } ,
permissions : [ 'geolocation' ] ,
} )
test ( 'Mobile and geolocation' , async ( { page } ) => {
await page . goto ( 'https://maps.google.com' ) ;
await page . getByText ( 'Your location' ) . click ( ) ;
await page . waitForRequest ( / .*preview/pwa / ) ;
await page . screenshot ( { path : 'colosseum-iphone.png' } ) ;
} ) ; Dieses Code-Snippet navigiert zu example.com und führt ein Skript im Seitenkontext aus.
import { test } from '@playwright/test' ;
test ( 'Evaluate in browser context' , async ( { page } ) => {
await page . goto ( 'https://www.example.com/' ) ;
const dimensions = await page . evaluate ( ( ) => {
return {
width : document . documentElement . clientWidth ,
height : document . documentElement . clientHeight ,
deviceScaleFactor : window . devicePixelRatio
}
} ) ;
console . log ( dimensions ) ;
} ) ; Dieses Code-Snippet richtet das Anforderungsrouting für eine Seite ein, um alle Netzwerkanforderungen zu protokollieren.
import { test } from '@playwright/test' ;
test ( 'Intercept network requests' , async ( { page } ) => {
// Log and continue all network requests
await page . route ( '**' , route => {
console . log ( route . request ( ) . url ( ) ) ;
route . continue ( ) ;
} ) ;
await page . goto ( 'http://todomvc.com' ) ;
} ) ; 
