Testen von Webanwendungen mit Node.js und Playwright

Die moderne Anwendungsentwicklung hängt von automatisierten Tests ab, bei denen Testframeworks verwendet werden, um sicherzustellen, dass der Code für Anwendungspakete und für Endbenutzer bereit ist. Um das Beste aus dem Testen herauszuholen, werden Tests vor dem Code geschrieben und können in die Quellcodeverwaltung und CI / CD-Pipelines (Continuous Integration / Continuous Deployment) integriert werden. Tests sollten überall in Ihrem Entwicklungsprozess sein. Müssen Sie eine Pull-Anfrage zusammenführen? Testen Sie den Code. Müssen Sie sich für eine Niederlassung engagieren? Testen Sie den Code.

Es gibt jedoch einen Bereich, in dem das Testen schwierig ist, insbesondere wenn es automatisiert werden muss. Ich spreche von der Notwendigkeit, mit dynamischen Benutzeroberflächen zu interagieren und diese zu testen. Das Testen von Webanwendungen ist ein komplexer Prozess. Tools wie Selenium und Webdriver sind Schlüsselelemente für die Automatisierung des Seiteninhalts und für die Sicherstellung, dass Sie sowohl Seitenelemente als auch die gesamte Anwendung testen. Sie sind wichtig, wenn Sie in einer Anwendung kopflose Browser verwenden. Ich habe eine Reihe von Python-Skripten in einer Twitter-Anwendung verwendet, die auf der Unterstützung von Selenium und Chromium für Webdriver basiert, um das Erstellen von Screenshots aus einer Flugzeugverfolgungsanwendung zu automatisieren.

Einführung in Playwright, das Web-Test-Framework von Microsoft

Selen und Webdriver sind nicht die einzigen Tools zum Erstellen von End-to-End-Tests für moderne Webanwendungen und Browser. Eine beliebte Alternative ist Googles Puppeteer, der sowohl das Senden von Klicks an Browser mit denselben Techniken wie das Webdriver-Tool von Chrome als auch den Zugriff auf Debugging-Informationen über die APIs der bekannten Entwicklertools verarbeitet. Playwright ist ein neuer Anbieter in der Liga der Browsertests und wird von Microsoft als Open-Source-Projekt entwickelt, das auf GitHub gehostet wird.

Playwright verwendet die grundlegende Puppeteer-Architektur und verschiebt sie mehr in Richtung Selenium, fügt ein Webautomatisierungs-Framework hinzu und verbessert die Interaktion von Puppeteer mit Seiteninhalten. Es wurde entwickelt, um schnell und einfach mit der bekannten npm-Syntax zu installieren und JavaScript zum Erstellen der Automatisierung und zum Testen von Webanwendungen zu verwenden. Es funktioniert mit mehr Browsern und unterstützt Chromium-basierte Browser wie Edge sowie Firefox und Apples WebKit.

Die Liste der unterstützten Browser von Playwright enthält eine wichtige Meldung: Sie können sie nicht mit Trident- oder EdgeHTML-basierten Browsern verwenden. Es ist nicht überraschend. Microsoft hat sich in seinem neuen Edge fest zu seiner Chromium-Niederlassung verpflichtet, und sowohl der alte Edge als auch der Internet Explorer stehen kurz vor dem Ende ihrer Lebensdauer. Wenn Sie Playwright zum Testen verwenden möchten, entscheiden Sie sich, nur moderne Mainstream-Browser zu unterstützen. Daher müssen Sie die Benutzer darüber informieren, was für zukünftige Versionen von Webanwendungen, die Sie erstellen und unterstützen, auf Lager ist.

Testen des Webs mit Playwright

Die Möglichkeit, plattformübergreifende Tests in allen gängigen Browsern mit denselben Skripten durchzuführen, ist ebenso wichtig wie die Unterstützung für mobile Versionen von Websites (da die beiden wichtigsten mobilen Plattformen Varianten ihrer Desktop-Browser verwenden, emuliert Playwright derzeit mobile Ansichten in Desktop-Browsern ). Wichtig ist auch die Unterstützung von Headless-Tests, bei denen Sie keine Browser-Benutzeroberfläche rendern und stattdessen mit dem generierten Dokumentobjektmodell arbeiten (und einem Schatten-DOM, wenn Sie moderne Browserfunktionen und -technologien wie Webkomponenten verwenden).

Mit Playwright können Sie einen laufenden Browser auf Entwicklungsdesktops automatisieren, um Fehler im Rahmen des Anwendungsdebuggens zu überprüfen. So stellen Sie sicher, dass Sie alle Testpfade konsistent durchlaufen, zusätzliche Leistungsinformationen aufzeichnen und auf nicht nachverfolgte UI-Störungen achten. Alternativ kann es als Teil einer GitHub-Aktion eingerichtet werden, um neuen Code als Teil eines Commits oder einer Zusammenführung zu testen und so einen automatisierten manuellen Test zu automatisieren.

Erstellen und Ausführen von Playwright-Tests

Der Einstieg in Playwright ist so einfach wie das Einrichten eines neuen Node.js-Projekts. Lassen Sie zunächst Node.js auf Ihren Testgeräten installieren. Da Playwright Node verwendet, können Sie es auf Entwicklungs-PCs oder Servern in Ihrer CI / CD-Pipeline ausführen. Dies macht es zu einem Teil einer GitHub-Aktion, die während Ihres gesamten Softwareentwicklungsprozesses verwendet werden kann. Sie benötigen lediglich einen einzigen npm-Befehl, mit dem das Playwright-Paket sowie die Binärdateien für alle unterstützten Browser installiert werden. Nach Abschluss der Installation können Sie Automatisierungsskripte mit JavaScript oder TypeScript erstellen, um Playwright-APIs aufzurufen. Dies sind alles asynchrone Aufrufe. Verwenden Sie also await-Anweisungen, um ihre Versprechen zu verwalten.

Das Ergebnis ist eine sehr übersichtliche Methode zum Erstellen von Skripten. Beginnen Sie mit dem Öffnen einer kopflosen Browserinstanz und navigieren Sie dann zu einer Seite, bevor Sie mit Seiteninstanzen interagieren. Es ist eine gute Idee, zunächst Tests mit vollständigen Browsern zu erstellen, damit Sie verfolgen können, wie Playwright mit Ihrer Anwendung interagiert. Eine nützliche Zeitlupenoption führt Interaktionen mit einer höheren Geschwindigkeit aus, um die Visualisierung und Verwaltung von Tests in Desktop-Browsern zu vereinfachen. Sobald ein Test debuggt wurde und ordnungsgemäß ausgeführt wird, können Sie ihn in den Headless-Modus versetzen und dann als Teil einer CI / CD-Implementierung ausführen.

Playwright enthält ein CLI-Tool, das Interaktionen mit Websites aufzeichnen und automatisch das JavaScript generieren kann, das zum Ausführen von Tests erforderlich ist. Die Codegen-Option ist ein nützliches Tool für den schnellen Einstieg in Playwright. Sie zeigt Ihnen den Code, der mit Seitenelementen interagiert, die Sie dann als Vorlage für Ihre eigenen Tests verwenden und den generierten Code nach Bedarf kopieren und bearbeiten können. Die TypeScript-Unterstützung kann dabei helfen, komplexere Tests zu schreiben, indem Variablen mithilfe einer starken Typisierung verwaltet werden.

Arbeiten mit Webanwendungen in Playwright

Eine der hilfreichsten Funktionen von Playwright ist die Unterstützung von Browserkontexten. Mit diesen können Sie isolierte Aktionen in einer einzelnen Browserinstanz ausführen, sodass Sie mehrere Kontexte einrichten können, um mehrere Interaktionen gleichzeitig zu testen. In jedem Kontext erstellen Sie Seiten, die am besten als Registerkarten in einem Desktop-Browser betrachtet werden. Seiten unterstützen ihre eigenen Klickinteraktionen und können parallel überwacht werden. Sobald Sie sich auf einer Seite befinden, können Sie mithilfe von CSS- oder XPath-Selektoren, HTML-Attributen oder Text verschiedene Methoden zum Suchen von Inhalten für die Interaktion verwenden. Wenn Sie mit Selenium vertraut sind, sollten Sie durch vertraute Seiten navigieren und zusätzlich warten, bis eine Seite vollständig geladen ist oder dynamische Inhalte in einer einseitigen Webanwendung gerendert werden.

Sie können Auswertungsfunktionen verwenden, um Parameter an und von Webseiten an JavaScript-Code zu senden, der im Seitenkontext ausgeführt wird. Die Ergebnisse werden zur Analyse an einen Testskript-Runner in Node.js zurückgegeben, sodass Sie die Tools erhalten, die zum Bestehen oder Nichtbestehen von Tests erforderlich sind. Playwright arbeitet mit den F12-Browser-Devtools, sodass es viel mehr kann, als nur mit Seiteninhalten zu interagieren. Es kann den Netzwerkverkehr überwachen, sodass Sie damit unter anderem sowohl die Authentifizierung als auch den Dateidownload testen können. Es kann auf die Browserkonsole zugreifen und Fehler aufzeichnen, die auf einer gerenderten Seite möglicherweise nicht sofort sichtbar sind: Zum Beispiel das Verfolgen von CSS-Problemen oder JavaScript-Bibliotheken, die nicht geladen werden können.

Playwright enthält eine Menge und ist eine überzeugende Alternative zu Selenium zum Testen von Browseranwendungen. Da Microsoft die F12-Entwicklertools in Edge kontinuierlich erweitert, wird es interessant sein zu sehen, wie Playwright neue Funktionen hinzufügt, die Ihre Optionen zum Testen von im Browser gehosteten Anwendungen und progressiven Webanwendungen neben herkömmlichen Webanwendungen erweitern.

Jenseits von JavaScript: Testen in Python und C #

Microsoft hat kürzlich eine neue Version von Playwright für Entwickler veröffentlicht, die Tests lieber in Python als in JavaScript erstellen möchten. Dies ist eine nützliche Option, da viele vorhandene Selenium-Test-Frameworks Python-basiert sind und Sie Ihren Testcode mit Analysepaketen verknüpfen können, um eine detailliertere Ergebnisanalyse mit Pythons reichhaltigem Ökosystem statistischer Anwendungen und Tools durchzuführen.

Playwright enthält Sprachbindungen für C #, sodass Sie Playwright in vorhandene Testframeworks für ASP.NET oder andere .NET-Tools integrieren können. Sie sollten Ihre Arbeitsweise nicht ändern müssen, um neue Tools einzuführen, und Microsoft verspricht zusätzliche Sprachbindungen für Java und Ruby. Es besteht die Aussicht auf mehr in der Zukunft, da in der Playwright-Dokumentation angegeben ist, dass Bindungen für jede Sprache unterstützt werden sollen. Mit dem gesamten Code auf GitHub besteht die Möglichkeit, eigene Bindungen für die Testsprache Ihrer Wahl zu erstellen und diese als Pull-Anfrage an das Projekt zu senden.