Von Puppeteer zu Playwright: Ist diese Migration lohnenswert?

Hallo zusammen! Habt ihr Schwierigkeiten mit der Entscheidung, von Puppeteer zu Playwright zu wechseln? Wie einfach oder schwierig ist dieser Übergang? Und lohnt er sich wirklich? Welche unerwarteten Änderungen wird es auf der Code-Ebene geben? Welche neuen und interessanten Funktionen versteckt Playwright? Keine Sorge. Dieser Artikel wird über diese interessanten Dinge sprechen.

Eine große Enthüllung der aktuellen Situation von Puppeteer und Playwright

Auf den ersten Blick haben diese beiden Tools viele Gemeinsamkeiten. Aber in den letzten zwei Jahren war ihre Entwicklungsgeschwindigkeit wie bei zwei Sportwagen mit unterschiedlicher PS-Zahl, die sich allmählich auseinander bewegten. Playwright entwickelt sich so dynamisch, dass es Puppeteer in den Schatten gestellt hat. Dieser starke Schwung hat viele Leute dazu gebracht, zu Playwright zu wechseln. Dieser Artikel erklärt im Detail, wie man migriert und welche coolen neuen Funktionen diese Änderung mit sich bringen kann. Obwohl der Artikel etwas lang ist, ist der Inhalt super einfach und leicht zu erlernen!

Warum migrieren?

Wir haben zuvor vergleichende Tests von Cypress, Selenium, Playwright und Puppeteer durchgeführt (für Details klicke auf den Artikel-Link). Um es kurz zusammenzufassen, sind die Gründe folgende:

• Playwright wird sehr häufig aktualisiert und hat viel mehr neue Funktionen als Puppeteer!
• In realen End-to-End (E2E)-Tests hat Playwright eine ausgezeichnete Leistung und führt Testfälle mit extrem hoher Geschwindigkeit aus (siehe Artikel-Link für Details)!
• Playwright ist stabiler, wie ein zuverlässiger Partner.
• Auf Communities wie GitHub, Twitter und Slack ist Playwright sehr beliebt, während die Puppeteer-Community etwas verlassen wirkt.

Ein Vergleich der Änderungslisten

Werfen wir zunächst einen Blick auf eine Vergleichstabelle. Nehmt euch ein paar Minuten Zeit, um sie zu überfliegen, und dann werden wir sie später eingehend studieren.

Eine große Enthüllung der Änderungsdetails

Paketimport

In Puppeteer könnte der Beginn eines Skripts so aussehen:

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    //...

In Playwright ist es so:

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

(async () => {
    const browser = await chromium.launch();
    const page = await browser.newPage();
    //...

Playwright ist sehr rücksichtsvoll und bietet Cross-Browser-Support. Du kannst den Browser, der ausgeführt werden soll, frei wählen, z. B. const { webkit } = require('playwright');. In Puppeteer muss dies durch die Konfiguration der Launch-Schnittstelle erreicht werden, zum Beispiel:

const browser = await puppeteer.launch({ product: 'firefox' })

Browser-Kontext

In Puppeteer wird der Browser-Kontext wie folgt verwendet:

const browser = await puppeteer.launch();
const context = await browser.createIncognitoBrowserContext();
const page = await context.newPage();

In Playwright ist der Kontext noch wichtiger und die Verwendung ist etwas anders:

const browser = await chromium.launch();
const context = await browser.newContext();
const page = await context.newPage();

Genau wie in Puppeteer kann für den grundlegenden Gebrauch oder einen Single-Page-Flow der Standardkontext verwendet werden:

const browser = await chromium.launch();
const page = await browser.newPage();

Warten

Playwright verfügt über einen leistungsstarken Auto-Warte-Mechanismus, was bedeutet, dass du möglicherweise nicht immer manuell warten musst. Allerdings ist das Warten einer der mühsamsten Teile in der UI-Automatisierung, und du musst immer noch wissen, wie man das Skript dazu bringt, gehorsam auf eine oder mehrere Bedingungen zu warten. In dieser Hinsicht hat Playwright diese Änderungen gebracht:

• page.waitForNavigation und page.waitForSelector sind immer noch vorhanden, aber mit dem Auto-Warte-Mechanismus sind sie in vielen Fällen nicht immer notwendig.
• page.waitForEvent wurde hinzugefügt.
• page.waitForXPath von Puppeteer ist in page.waitForSelector integriert und kann XPath-Ausdrücke automatisch erkennen.
• page.waitForFileChooser wurde entfernt. Informationen zur neuen Verwendung findest du unter Dateien hochladen, E2E-Kontoeinstellungen.
• page.waitForNetworkIdle ist in page.waitForLoadState integriert.
• page.waitForUrl wurde hinzugefügt, wodurch auf das Laden einer URL durch den Hauptframe der Seite gewartet werden kann.
• page.waitFor(timeout) wird zu page.waitForTimeout(timeout). Beachte, dass page.waitForTimeout nicht in einem formalen Produkt verwendet werden sollte. Dieses harte Warten ist nur für Tests geeignet.

Einstellen des Viewports

page.setViewport von Puppeteer wird in Playwright zu page.setViewportSize.

Tippen

page.type von Puppeteer kann weiterhin verwendet werden. Wenn du detaillierte Tastaturereignisse steuern möchtest, ist dies immer noch ein guter Helfer. Außerdem hat Playwright page.fill hinzugefügt, was sehr praktisch zum Ausfüllen und Löschen von Formularen ist.

Cookies

Bei der Verwendung von Puppeteer werden Cookies auf Seitenebene gehandhabt; in Playwright kannst du sie auf BrowserContext-Ebene manipulieren. Vorher:

page.cookies([...urls])
page.deleteCookie(...cookies)
page.setCookie(...cookies)

Jetzt:

browserContext.cookies([urls])
browserContext.clearCookies()
browserContext.addCookies(cookies)

Beachte, dass es einige kleine Unterschiede zwischen diesen Methoden gibt, sei also vorsichtig beim Übergeben von Cookies.

XPath-Selektoren

Playwright kann XPath-Selektoren, die mit // oder .. beginnen, automatisch erkennen, während es in Puppeteer eine separate Schnittstelle gibt.

Geräteemulation

Die Geräteemulation von Playwright kann auf Browserkontext-Ebene durchgeführt werden, wie folgt:

const pixel2 = devices['Pixel 2'];
const context = await browser.newContext({
...pixel2,
});

Und es kann auch Berechtigungen, den Standort und andere Geräteparameter steuern. Cool, oder?

Datei-Download

Das Herunterladen von Dateien im Headless-Modus ist in Puppeteer recht mühsam, aber in Playwright ist es viel einfacher:

const [download] = await Promise.all([
    page.waitForEvent('download'),
    page.click('#orders > ul > li:nth-child(1) > a')
])

const path = await download.path();

Dies ist ein vollständiges Beispiel.

Datei-Upload

elementHandle.uploadFile von Puppeteer wird zu elementHandle.setInputFiles. Weitere Informationen findest du im Beispiel zum Hochladen von Dateien.

Anfrage-Abfangen

In Puppeteer erfolgt das Abfangen von Anfragen wie folgt:

await page.setRequestInterception(true)

page.on('request', (request) => {
    if (request.resourceType() === 'image') request.abort()
    else request.continue()
})

In Playwright kannst du URLs eines bestimmten Musters über page.route abfangen:

await page.route('**/*', (route) => {
  return route.request().resourceType() === 'image'
? route.abort()
    : route.continue()
})

Ein vollständiges Beispiel findest du hier.

Neue Funktionen, die es wert sind, beachtet zu werden

Beim Wechsel von Puppeteer zu Playwright musst du die neuen Funktionen von Playwright gut verstehen, die deinen Test- oder Monitoring-Setup neue Überraschungen bringen könnten!

Neue Selektor-Engine

Playwright bietet eine äußerst flexible Möglichkeit, auf UI-Elemente zu verweisen. Neben CSS und XPath gibt es auch diese:

• Playwright-spezifische Selektoren, wie z. B. :nth - match(:text("Buy"), 3).
• Textselektoren, wie z. B. text=Add to Car.
• Kettenselektoren, wie z. B. css=preview >> text=In stock. Und du kannst sogar deine eigene benutzerdefinierte Selektor-Engine erstellen. Weitere Informationen und Verwendung von Selektoren findest du unter Arbeiten mit Selektoren.

Zustand speichern und wiederverwenden

Playwright kann den Authentifizierungsstatus (Cookies und localStorage) einer bestimmten Sitzung einfach speichern, der direkt beim nächsten Ausführen des Skripts verwendet werden kann, wodurch Authentifizierungszeit gespart wird. So rücksichtsvoll, oder?

Locator-API

Die Locator-API von Playwright kapselt die Logik zum Abrufen eines bestimmten Elements, sodass du auf einfache Weise das neueste DOM-Element im Skript zu verschiedenen Zeitpunkten abrufen kannst.

Inspector

Der Inspector von Playwright ist ein GUI-Tool, das beim Debuggen von Skripten sehr nützlich ist. Er ermöglicht es dir, Anweisungen im Skript schrittweise auszuführen, wodurch es einfach ist, die Ursache des Fehlers zu finden.

Test

Playwright verfügt über einen Testmechanismus, der in E2E-Tests sehr nützlich ist, wie z. B. Out-of-the-Box-Parallelisierung, Hooks usw.

Trace Viewer

Mit dem Trace Viewer von Playwright kannst du die von Playwright-Tests oder der BrowserContext-Tracking-API aufgezeichneten Spuren untersuchen. Durch das Tracking kannst du die Ausführung des Skripts deutlich erkennen.

Test Generator

Du kannst den Test Generator von Playwright verwenden, um Interaktionen im Browser aufzuzeichnen, und die Ausgabe ist ein vollständiges Skript, das überprüft und ausgeführt werden kann.

Vorsichtsmaßnahmen während des Migrationsprozesses

Während des Migrationsprozesses von Puppeteer zu Playwright müssen wir zusätzlich zum Verständnis der verschiedenen oben genannten Änderungen und neuen Funktionen auch einige Details besonders beachten.

Probleme mit der Versionskompatibilität

Stelle bei der Installation und Verwendung von Playwright sicher, dass die Version mit anderen von deinem Projekt verwendeten abhängigen Bibliotheken kompatibel ist. Unterschiedliche Versionen von Playwright können geringfügige Unterschiede in der Art der Verwendung der API und der funktionellen Funktionen aufweisen. Beziehe dich daher sorgfältig auf die offizielle Dokumentation und wähle die für dein Projekt geeignete Version aus. Achte gleichzeitig auch auf die Kompatibilität zwischen Playwright und der von dir verwendeten Browserversion. Einige neue Funktionen erfordern möglicherweise eine bestimmte Version des Browsers, um ordnungsgemäß ausgeführt zu werden.

Konfigurationsanpassung

Nach der Migration musst du möglicherweise entsprechende Anpassungen an einigen Konfigurationen vornehmen. Beispielsweise bist du in Puppeteer möglicherweise an bestimmte Startparameter und Konfigurationsoptionen gewöhnt, während in Playwright die Art der Konfiguration und die Parameternamen unterschiedlich sein können. Du musst die Konfiguration zum Starten des Browsers gemäß der Playwright-Dokumentation neu einstellen, einschließlich der Frage, ob der Headless-Modus aktiviert, ein Proxy eingerichtet, Browserleistungsparameter angepasst usw. werden sollen.

Fehlerbehandlung

Der Fehlerbehandlungsmechanismus von Playwright unterscheidet sich ebenfalls von dem von Puppeteer. Stelle während des Migrationsprozesses sicher, dass dein Code verschiedene von Playwright ausgelöste Ausnahmen korrekt abfangen und behandeln kann. Playwrights Fehlermeldungen enthalten normalerweise detaillierte Fehlerursachen und Stapelüberprüfungen, die dir helfen, Probleme schnell zu lokalisieren und zu lösen. Du kannst Try-Catch-Anweisungen verwenden, um Ausnahmen abzufangen und sie je nach Fehlertyp zu behandeln, z. B. Operationen wiederholen, Fehlermeldungen protokollieren usw.

Teamzusammenarbeit

Wenn dein Projekt ein Team-Kooperationsentwicklungsprojekt ist, stelle dann bei der Migration zu Playwright sicher, dass alle Teammitglieder diese Änderungen kennen. Du kannst Teamtrainings organisieren, um die neuen Funktionen und Verwendungsmethoden von Playwright zu teilen, sodass sich jeder so schnell wie möglich mit dem neuen Tool vertraut machen kann. Aktualisiere gleichzeitig die Codespezifikationen und die Dokumentation des Projekts, um sicherzustellen, dass die Teammitglieder bei der Verwendung von Playwright einen einheitlichen Standard befolgen.

Optimierungsvorschläge nach der Migration

Nach Abschluss der Migration ist die Arbeit noch nicht abgeschlossen. Um die Vorteile von Playwright voll auszuschöpfen, kannst du auch deinen Code optimieren.

Verwende die Parallelisierungsfunktion

Der Playwright-Testmechanismus bietet Out-of-the-Box-Parallelisierung, die die Ausführungszeit von Testfällen erheblich verkürzen kann. Du kannst die Anzahl der parallel auszuführenden Testfälle entsprechend der tatsächlichen Situation des Projekts sinnvoll konfigurieren, die Leistung von Multi-Core-CPUs voll ausschöpfen und die Testeffizienz verbessern.

Optimiere die Warte-Strategie

Obwohl der Auto-Warte-Mechanismus von Playwright bereits sehr leistungsstark ist, musst du in einigen komplexen Szenarien möglicherweise die Warte-Strategie weiter optimieren. Lege beispielsweise entsprechend den Ladeeigenschaften von Seitenelementen das Warte-Timeout sinnvoll fest, um eine geringe Testeffizienz aufgrund übermäßiger Wartezeit zu vermeiden. Vermeide gleichzeitig die Verwendung fester Wartezeiten, sondern verwende intelligentere Wartebedingungen, z. B. das Warten darauf, dass ein Element sichtbar oder anklickbar ist.

Code-Refactoring

Während des Migrationsprozesses stellst du möglicherweise fest, dass einiges, ursprünglich in Puppeteer geschriebener Code in Playwright prägnanter und effizienter implementiert werden kann. Zu diesem Zeitpunkt kannst du den Code entsprechend refaktorieren, redundanten Code entfernen und die Lesbarkeit und Wartbarkeit des Codes verbessern. Nutze gleichzeitig die von Playwright bereitgestellten neuen Funktionen, um Testfälle zu optimieren und sie robuster und zuverlässiger zu machen.

Zusammenfassung

Obwohl die Migration von Puppeteer zu Playwright erfordert, dass wir einige Zeit und Energie aufwenden, um neue Änderungen zu lernen und uns an sie anzupassen, lohnt es sich langfristig auf jeden Fall. Playwright hat offensichtliche Vorteile in Bezug auf Leistung, Stabilität und neue Funktionen, die eine höhere Effizienz und eine bessere Erfahrung bei unseren Test- und Automatisierungsaufgaben bringen können. Solange wir die wichtigsten Punkte der Migration beherrschen, während des Migrationsprozesses auf verschiedene Details achten und den Code nach der Migration optimieren, können wir diese Migration erfolgreich abschließen und unser Projekt mit Hilfe von Playwright auf ein neues Level heben!

Leapcell: Die Serverless-Plattform der nächsten Generation für Webhosting, asynchrone Aufgaben und Redis

Abschließend möchte ich eine Plattform Leapcell empfehlen, die sich am besten für die Bereitstellung von Playwright eignet.

1. Multi-Sprachen-Unterstützung

• Entwickle mit JavaScript, Python, Go oder Rust.

2. Stelle unbegrenzt Projekte kostenlos bereit

• Zahle nur für die Nutzung – keine Anfragen, keine Gebühren.

3. Unschlagbare Kosteneffizienz

• Pay-as-you-go ohne Leerlaufgebühren.
• Beispiel: 25 $ unterstützen 6,94 Mio. Anfragen bei einer durchschnittlichen Antwortzeit von 60 ms.

4. Optimierte Entwicklererfahrung

• Intuitive Benutzeroberfläche für mühelose Einrichtung.
• Vollautomatische CI/CD-Pipelines und GitOps-Integration.
• Echtzeitmetriken und Protokollierung für umsetzbare Erkenntnisse.

5. Mühelose Skalierbarkeit und hohe Leistung

• Auto-Skalierung zur einfachen Bewältigung hoher Parallelität.
• Kein Betriebsaufwand – konzentriere dich einfach auf den Aufbau.

Erfahre mehr in der Dokumentation!

Leapcell Twitter: https://x.com/LeapcellHQ