Tests sind wichtig. Bevor Sie Ihre Website, App oder neue Funktion für Nutzer freigeben, sollten Sie unbedingt prüfen, ob sie wie erwartet funktioniert. Viele Tests werden jedoch noch manuell durchgeführt. Kollegen oder Testingenieure werden gebeten, die neue Funktion zu prüfen und Probleme zu melden.
Bei diesen manuellen Tests können zwar bestimmte Arten von Problemen erkannt werden, aber viele andere können übersehen werden. Die Testpersonen können Grenzfälle übersehen oder einen bestimmten Navigationspfad durch die App nicht testen. Außerdem haben sie nicht alle Informationen, die Sie beim Schreiben des Codes hatten, und kennen die spezifischen Probleme nicht, die Sie mit dem Code verhindern wollten. Und werden sie im Laufe der Zeit, wenn neue Funktionen hinzugefügt werden, alle zuvor funktionierenden Funktionen noch einmal testen, um sicherzustellen, dass die Änderungen sie nicht beeinträchtigt haben?
Deshalb ist das Chrome-Team der Meinung, dass automatisierte Tests wichtig sind. Wenn Sie eine Testsuite verwenden, mit der Ihre Funktion zuverlässig und wiederholt auf Fehler geprüft wird, können Sie sicher sein, dass jedes Detail jetzt und nach der zukünftigen Entwicklung getestet wird. Ihr Wissen als Entwickler einer Funktion wird in einem Test verpackt.
Wir wissen jedoch, dass automatisierte Tests eine Herausforderung sein können. Deshalb stellt das Chrome-Team die folgenden Tools und Anleitungen zur Verfügung, damit Sie die Umstellung so reibungslos wie möglich gestalten können.
Puppeteer
Puppeteer ist eine Node.js-Bibliothek. Mit der Chrome OS API können Sie Chrome, Chromium und Firefox mit einer nutzerfreundlichen High-Level-API automatisieren.
Diese API basierte ursprünglich auf dem Chrome DevTools-Protokoll. Ziel ist es jedoch, bis Ende des Jahres das neue, erweiterte WebDriver BiDi-Protokoll als Grundlage für Puppeteer zu verwenden. WebDriver BiDi wurde von allen großen Browseranbietern gemeinsam entwickelt. Es vereinfacht viele Automatisierungsfälle, ermöglicht viele neue und ist browserübergreifend kompatibel.
.Aber Sie müssen nicht warten. Die Puppeteer API ermöglicht bereits viele Automatisierungsfälle, die sich mit WebDriver BiDi noch verbessern werden. Mit Funktionen wie Seiteninteraktionen, Anfrageabfang und Screenshots können Sie viel tun – von Tests bis hin zum visuellen Crawling und zur Prozessautomatisierung. 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 umfassenden Browser-Testframework, und dem Privacy Sandbox Analysis Tool verwendet. So können Sie die Verwendung von Cookies und Nutzerdaten auf Ihrer Website besser nachvollziehen.
Chrome Headless
Wenn Sie Chrome schon einmal mit Puppeteer automatisiert haben, haben Sie möglicherweise festgestellt, dass beim Ausführen der Tests kein Browserfenster angezeigt wird. Standardmäßig startet Puppeteer Chrome im Headless-Modus. Das bedeutet, dass während der Ausführung der Automatisierung kein Browserfenster geöffnet ist.
Wussten Sie aber, dass der headless Modus von Chrome nicht nur Chrome ohne Fenster war, sondern eine völlig separat gepflegte Version von Chrome? Das führte lange Zeit zu Verwirrung und schwer zu verfolgenden Fehlern und Problemen.
Ab Chrome 112 haben wir einen neuen Headless-Modus eingeführt, der jetzt auf derselben Codebasis wie der normale Chrome basiert. Dadurch wird nicht nur die bisherige Verwirrung reduziert, sondern es werden auch Funktionen eingeführt, die zuvor nicht möglich waren, z. B. die Verwendung von Erweiterungen während der Automatisierung.
Puppeteer verwendet diesen neuen Headless-Modus seit Version 22 als Standard. Wenn Sie Chrome Headless über andere Automatisierungslösungen verwenden, können Sie den neuen Headless-Modus mit dem Befehlszeilenschalter --headless=new erzwingen.
Der neue Headless-Modus von Chrome ist zwar leistungsstärker, aber nicht so effizient wie der alte Headless-Modus. Wenn Sie sehr knapp bei den Ressourcen sind oder nicht alle Funktionen von Chrome benötigen, können Sie den alten Headless-Modus als chrome-headless-shell verwenden.
Chrome for Testing
Bei Tests benötigen Sie eine detaillierte Kontrolle über die Testumgebung: das Betriebssystem, den Browser und die Browserversion. Das kann aufgrund der automatischen Updates von Chrome schwierig sein.
Aus diesem Grund haben wir Chrome for Testing entwickelt – eine Version von Chrome ohne automatische Updates, die zusammen mit jeder Chrome-Version für alle gängigen Betriebssysteme veröffentlicht wird und über ein versioniertes Archiv zugänglich ist. So können Sie Ihre Automatisierungsabläufe ohne großen Aufwand für eine bestimmte Chrome-Version ausführen.
Sie können über das Dashboard zur Verfügbarkeit von Chrome for Testing, die JSON API oder das Puppeteer-Befehlszeilentool auf Chrome for Testing-Binärprogramme zugreifen.
Puppeteer, der aktualisierte Headless-Modus von Chrome und Chrome for Testing sind nur ein Teil der Arbeit, die unser Team derzeit leistet, um die Browserautomatisierung und das Ausführen von Tests so reibungslos wie möglich zu gestalten. Ähnliche Tools wie der DevTools-Aufzeichnungstool unterstützen Sie beim Erstellen von Tests: Sie können einen Nutzerfluss in Chrome aufzeichnen und in Puppeteer wiedergeben.
Tests auf web.dev
Die in diesem Beitrag beschriebenen Tools helfen Ihnen, Ihre automatisierten Tests zu verbessern. Wenn Sie gerade erst anfangen, kann es jedoch so aussehen, als müssten Sie viel verstehen und lernen. Deshalb haben wir einen neuen Kurs mit zehn Modulen erstellt: Tests auf web.dev lernen. In diesem ausführlichen Kurs werden die wichtigsten Konzepte des Testens, die Orte und die Art der Durchführung von Tests, die Testtypen und die zu testenden Elemente behandelt. Es ist ein guter Ausgangspunkt für Ihre Tests. Wenn Sie die Grundlagen kennen, können Sie mit unserer Sammlung zur Testautomatisierung fortfahren. Dort finden Sie ausführliche Informationen und praktische Tipps zu spezifischen Testfragen.