Tests sind wichtig. Es ist ein wichtiger Schritt, bevor Sie prüfen, ob das, was Sie erstellt haben, für Nutzer verfügbar ist – ob es sich um eine ganze Website, eine Anwendung oder eine neue Funktion handelt. Viele Tests werden jedoch immer noch manuell durchgeführt, wobei Kollegen oder Testentwickler die neue Funktion ausprobieren und Probleme melden sollen.
Bei diesen manuellen Tests können zwar bestimmte Arten von Problemen auftreten, es werden aber noch viele weitere übersehen. Die Personen, die die Tests durchführen, können Grenzfälle übersehen oder eine bestimmte Nutzung der App überhaupt nicht testen. Sie haben auch nicht alle Informationen, die Sie beim Schreiben des Codes erhalten haben, sie wissen nicht, welche Probleme Sie mit dem eingefügten Code vermeiden sollten. Und wenn die Zeit vergeht und neue Funktionen hinzukommen, wird sie all die zuvor funktionierenden Elemente noch einmal testen, um sicherzustellen, dass die Änderungen sie nicht beeinträchtigt haben?
Das Chrome-Team glaubt daher an die Bedeutung automatischer Tests. Wenn Sie eine Testsuite verwenden, die Ihr Feature zuverlässig und wiederholt auf Fehler testet, können Sie sicher sein, dass jedes kleine Detail jetzt und nach der zukünftigen Entwicklung getestet wird. Ihr Wissen als Entwickler einer Funktion wird in einem Test zusammengefasst.
Wir wissen aber, dass automatisierte Tests eine Herausforderung sein können. Aus diesem Grund bietet das Chrome-Team die folgenden Tools und Anleitungen an, um die Nutzung für Sie so reibungslos wie möglich zu gestalten.
Puppenspiel
Puppeteer ist eine Node.js-Bibliothek. Sie können Chrome, Chromium und Firefox mit einer nutzerfreundlichen übergeordneten API automatisieren.
Diese API basierte ursprünglich auf dem Chrome DevTools Protocol. Ziel ist es aber, das neue, erweiterte WebDriver BiDi-Protokoll bis Ende des Jahres zur Grundlage von Puppeteer zu machen. WebDriver BiDi, das von allen großen Browseranbietern mitgestaltet wurde, vereinfacht viele Automatisierungsanwendungsfälle und ermöglicht viele neue Anwendungsfälle und ist browserübergreifend kompatibel.
Aber Sie müssen nicht warten. Die API von Puppeteer ermöglicht bereits viele Anwendungsfälle für die Automatisierung, die sich nur mit WebDriver BiDi verbessern werden. Von Tests über das visuelle Crawling bis hin zur Prozessautomatisierung können Sie mit Funktionen wie Seiteninteraktionen, Abfangen von Anfragen und Screenshots viel tun. Sie können damit sogar Ihre Web-KI-Modelle in der Cloud mit WebGPU und WebGL testen.
Puppeteer wird auch von Tools wie WebdriverIO, einem vollwertigen Browser-Test-Framework, und dem Privacy Sandbox-Analysetool verwendet, mit dem Sie die Verwendung von Cookies und Nutzerdaten auf Ihrer Website besser nachvollziehen können.
Headless Chrome
Wenn Sie Chrome jemals mit Puppeteer automatisiert haben, haben Sie möglicherweise festgestellt, dass während der Tests kein Browserfenster angezeigt wird. Standardmäßig startet Puppeteer Chrome im Headless-Modus. Während der Automatisierung wird also kein Browserfenster geöffnet.
Aber wussten Sie, dass der monitorlose Modus von Chrome nicht nur Chrome ohne Fenster war, sondern eine vollständig separat verwaltete Version von Chrome? Das führte lange Zeit zu Verwirrung und führte zu Fehlern und Problemen.
Ab Chrome 112 haben wir einen neuen monitorlosen Modus eingeführt, der jetzt auf derselben Codebasis wie die reguläre Chrome-Version basiert. So werden nicht nur frühere Unklarheiten vermieden, sondern es entstehen auch Funktionen, die zuvor nicht möglich waren, wie die Verwendung von Erweiterungen bei der Automatisierung.
Puppeteer verwendet diesen neuen monitorlosen Modus seit Version 22 als Standard. Wenn Sie Chrome Headless mit anderen Automatisierungslösungen verwenden, können Sie den neuen monitorlosen Modus mit der --headless=new-Befehlszeile erzwingen.
Der neue monitorlose Modus von Chrome ist zwar leistungsstärker, ist aber nicht so leicht wie der alte monitorlose Modus. Wenn Ihre Ressourcen stark beschränkt sind oder nicht alle Chrome-Funktionen benötigen, können Sie den alten monitorlosen Modus als chrome-headless-shell verwenden.
Chrome for Testing
Für den Test benötigen Sie eine detaillierte Kontrolle über Ihre Testumgebung, also das Betriebssystem, den Browser und die Browserversion. Mit den automatischen Updates kann das schwierig sein.
Aus diesem Grund haben wir Chrome for Testing entwickelt – eine Version von Chrome ohne automatische Updates, die zusammen mit jeder Chrome-Version und für jedes Hauptbetriebssystem veröffentlicht wird und über ein versioniertes Archiv zugänglich ist. So können Sie Ihre automatisierten Workflows problemlos mit einer bestimmten Chrome-Version ausführen.
Sie können über das Chrome for Testing-Verfügbarkeitsdashboard, die JSON API oder das Puppeteer-Befehlszeilendienstprogramm auf die Binärdateien von Chrome for Testing zugreifen.
Puppeteer, der aktualisierte Headless-Modus von Chrome und Chrome for Testing sind nur Teil der Arbeit, die unser Team derzeit leistet, um die Browserautomatisierung und die Durchführung von Tests so reibungslos wie möglich zu gestalten. Ähnliche Tools wie DevTools Recorder unterstützen Sie beim Erstellen von Tests. Sie können beispielsweise einen Nutzerfluss in Chrome aufzeichnen und in Puppeteer wiedergeben.
Auf web.dev testen
Mit den Tools, die in diesem Beitrag behandelt werden, kannst du deine automatisierten Tests verbessern. Aber wenn Sie gerade erst anfangen, kann es auf den ersten Blick erscheinen, zu verstehen und zu lernen. Aus diesem Grund haben wir einen neuen, aus zehn Modulen bestehenden Kurs erstellt: Learn Testing on web.dev (Testen auf web.dev), in dem die Kernkonzepte des Testens behandelt werden, wo und wie Tests durchgeführt werden, Testtypen und was getestet werden sollte. Es ist ein guter Ausgangspunkt für Ihre Tests. Sobald Sie die Grundlagen haben, können Sie sich unsere Sammlung zur Testautomatisierung ansehen. Sie enthält ausführliche Informationen und praktische Tipps zu spezifischeren Testfragen.