Zugegeben, das Schreiben automatisierter Tests ist im Leben eines Entwickelnden nicht besonders unterhaltsam. Als Entwickler möchten wir Funktionen schreiben, Fehler beheben und die Welt verbessern. Ohne automatisierte Tests in unseren Workflows kann das langfristig ziemlich mühsam werden. Daher halten wir es für wichtig, automatisierte Tests zu schreiben.
Mit dem Bereich Rekorder in den Chrome-Entwicklertools können Sie Nutzerflüsse aufzeichnen und wiedergeben, sie über verschiedene Erweiterungen und Bibliotheken von Drittanbietern in verschiedene Formate (z. B. Testskripts) exportieren, die Abläufe mit der Puppeteer Replay-Bibliothek anpassen und sie in Ihre vorhandenen Workflows einbinden.
In diesem Blogpost geht es um folgende Themen:
- Hier erfahren Sie, wie Sie Nutzerabläufe programmatisch exportieren und wiedergeben.
- Hier erfahren Sie, wie Sie Ihre User Flows mit Puppeteer Replay anpassen.
- CI/CD-Workflows einbinden
In diesem Blogpost wird davon ausgegangen, dass du mit den Grundlagen der Rekorder App vertraut bist. Wenn Sie den Rekorder noch nicht kennen, können Sie sich diese kurze Einführung und Videoanleitung für den Einstieg ansehen.
Abläufe für Nutzer exportieren und programmatisch wiedergeben
Standardmäßig bietet Ihnen der Rekorder die Möglichkeit, diese Aufnahmen als Puppeteer- oder Puppeteer Replay-Skript oder als einfache JSON-Datei zu exportieren.
Nachdem Sie die Abläufe für Nutzer als JSON-Dateien exportiert haben, können Sie sie zurück in das Rekorder-Steuerfeld importieren und wiedergeben oder externe Bibliotheken verwenden. Die Puppeteer Replay-Bibliothek ist eine der verfügbaren Bibliotheken.
Noch einmal mit Puppeteer Replay spielen
Folgen Sie der Anleitung im Repository, um Puppeteer Replay zu installieren.
Angenommen, Sie speichern Ihre JSON-Nutzerabläufe im Ordner recordings (z. B. Demoprojekt) und können mit dem folgenden Befehl einen oder mehrere Abläufe für Nutzer ausführen:
# replay one user flow
npx @puppeteer/replay ./recordings/order-a-coffee.json
# replay all user flows under recordings folder
npx @puppeteer/replay ./recordings/*.json
Optional können Sie ein npm-Skript zum Ausführen der Aufzeichnungen hinzufügen. Fügen Sie diese Zeile in das Feld scripts in package.json ein:
"replay-all": "replay recordings"
Damit können Sie npm run replay-all in der Befehlszeile ausführen, um alle Aufzeichnungen noch einmal abzuspielen.
Nutzerabläufe werden standardmäßig ohne UI wiedergegeben (auch als monitorloser Modus bezeichnet). Wenn Sie die Benutzeroberfläche sehen möchten, setzen Sie die Umgebungsvariable PUPPETEER_HEADLESS auf „false“, bevor Sie den Befehl ausführen.
PUPPETEER_HEADLESS=false npm run replay-all
Erneut mit Bibliotheken von Drittanbietern spielen
Es gibt einige Bibliotheken von Drittanbietern, die Sie für die Wiedergabe auch außerhalb des Chrome-Browsers verwenden können. Hier finden Sie die vollständige Liste der Bibliotheken.
TestCafe ist beispielsweise ein Framework für End-to-End-Tests. Er unterstützt die Wiedergabe von JSON-User-Flows mit Safari und mehr.
npm install -g testcafe
# replay with selected browsers
testcafe safari ./recordings/order-one-coffee.json
testcafe firefox ./recordings/order-one-coffee.json
testcafe chrome ./recordings/order-one-coffee.json
# replay with all browsers
testcafe all ./recordings/order-one-coffee.json
Saucelabs hingegen ist eine cloudbasierte Testplattform. Sie unterstützt die Wiedergabe von JSON-Nutzerabläufen mit verschiedenen Browsern und Versionen in der Cloud.
Hier sehen Sie eine Beispielkonfigurationsdatei in Saucelabs. Sehen Sie sich das Demo-Repository an.
apiVersion: v1alpha
kind: puppeteer-replay
suites:
- name: "order a coffee"
recordings: [ "recordings/order-a-coffee.json" ]
…
Abläufe für Nutzer mit verschiedenen Erweiterungen exportieren
Neben den Standardoptionen können Sie auch Erweiterungen installieren, um Abläufe für Nutzer in andere Formate zu exportieren.
Sie können die Abläufe beispielsweise als benutzerdefiniertes WebPageTest-Skript aufzeichnen und exportieren. Mit dem Skript können Sie die Leistung mehrstufiger Nutzerflüsse durch Ihre Anwendungen testen. Das Erstellen dieser Skripts kann jedoch manchmal schwierig sein.
Wenn Sie bereits über Testtools verfügen, gibt es außerdem Erweiterungen, mit denen Sie User Flows in verschiedene Testskripts wie Cypress, Nightwatch, WebdriverIO und Testing Library exportieren können. Eine vollständige Liste finden Sie hier. So können Sie und Ihr Team schneller Tests schreiben.
Programmgesteuert in verschiedene Testskripts umwandeln
Zusätzlich zu den Erweiterungen veröffentlichen die meisten dieser Testanbieter auch Bibliotheken, mit denen Sie mehrere JSON-Nutzerabläufe programmatisch konvertieren können.
Verwenden Sie beispielsweise die @cypress/chrome-recorder-Bibliotheken, um Abläufe für Nutzer in Cypress-Tests zu exportieren.
npm install -g @cypress/chrome-recorder
npx @cypress/chrome-recorder ./recordings/*.json
User Flows mit Erweiterungen wiedergeben
Ab Chrome 112 können Sie Aufzeichnungen jetzt noch besser mit Erweiterungen wiedergeben. Mit diesen Erweiterungen kannst du Drittanbieterdienste und die Infrastruktur für die Wiedergabe von Aufnahmen nahtlos einbinden, ohne die Entwicklertools verlassen zu müssen.
Sehen Sie sich zunächst die Liste der verfügbaren Erweiterungen an oder informieren Sie sich, wie Sie eigene benutzerdefinierte Erweiterungen erstellen.
Eigene Erweiterungen oder Bibliotheken erstellen
Alle Erweiterungen und Bibliotheken basieren auf der Puppeteer Replay-Bibliothek. Puppeteer Replay ermöglicht nicht nur die Wiedergabe von Nutzerflüssen, sondern auch APIs, mit denen Sie die Wiedergabe von Nutzerabläufen anpassen oder transformieren können.
Wiedergabe von User Flows anpassen
Erstellen wir nun ein Screenshot-Plug-in. Für jeden User Flow benötigen wir:
- Um am Ende jedes Schritts einen Screenshot zu erstellen und ihn im Ordner
_screenshotszu speichern. - Zur Ausgabe einer Nachricht, wenn die User Flow-Ausführung abgeschlossen ist.
Hier ist das Code-Snippet. Lade diese Demo herunter und probiere es aus.
/* screenshot-plugin.mjs */
import { mkdirSync } from "fs";
import { PuppeteerRunnerExtension } from "@puppeteer/replay";
// create folder if not exist
let screenshotFolder = "_screenshots";
mkdirSync(screenshotFolder, { recursive: true });
export default class ScreenshotPlugin extends PuppeteerRunnerExtension {
count = 0;
async afterEachStep(step, flow) {
await super.afterEachStep(step, flow);
this.count = this.count + 1;
const path = `${screenshotFolder}/${flow.title}-${this.count}.png`;
await this.page.screenshot({ path });
console.log(`Saved screenshot as ${path}`);
}
async afterAllSteps(step, flow) {
await super.afterAllSteps(step, flow);
console.log("Operation completed successfully.");
}
}
Der Code ist ziemlich ausdrucksstark. Wir erweitern die PuppeteerRunnerExtension API so, dass der Screenshot nach jedem Schritt gespeichert und nach allen Schritten eine Meldung protokolliert wird.
Speichere die Datei, damit wir Nutzerabläufe mit dieser Erweiterung mit dem folgenden Befehl ausführen können:
# replay one user flow with plugin
npx @puppeteer/replay --extension ./screenshot-plugin.mjs ./recordings/order-a-coffee.json
# replay all user flows with plugin under recordings folder
npx @puppeteer/replay --extension ./screenshot-plugin.mjs ./recordings/*.json
Die Ausgabe sieht so aus:
Saved screenshot as _screenshots/order-a-coffee-1.png
Saved screenshot as _screenshots/order-a-coffee-2.png
Saved screenshot as _screenshots/order-a-coffee-3.png
…
Operation completed successfully.
User Flows transformieren
Eine weitere Möglichkeit zur Anpassung des User Flows besteht darin, ihn in verschiedene Formate umzuwandeln (z. B. in Cypress- oder Nightwatch-Testskripts).
Angenommen, Ihr User Flow enthält einen Schritt zum Aufrufen einer URL. So sieht die JSON-Datei aus:
{
"title": "order-a-coffee",
"steps": [
{
"type": "navigate",
"url": "https://coffee-cart.netlify.app/"
},
…
]
}
Sie können ein Stringify-Plug-in erstellen, um den Schritt in JavaScript umzuwandeln. Sie können sich auch andere vorhandene Bibliotheken ansehen, um zu sehen, wie dies funktioniert.
Das folgende Code-Snippet zeigt beispielsweise, wie WebdriverIO den Navigationsschritt transformiert:
export class StringifyPlugin extends PuppeteerStringifyExtension {
#appendStepType(out: LineWriter, step: Step, flow: UserFlow) {
switch (step.type) {
case 'navigate':
return out.appendLine(`await browser.url(${formatAsJSLiteral(step.url)})`)
…
}
Wenn Sie das Plug-in mit den User Flows ausführen, wird die Navigationszeile in await browser.url(‘https://coffee-cart.netlify.app/’) übersetzt.
Wiederholung der Entwicklertools anpassen
Mit Replay-Erweiterungen können Sie Aufnahmen mithilfe von Drittanbieterdiensten und -infrastrukturen noch einmal abspielen, ohne den Entwicklertools-Rekorder verlassen zu müssen.
Informationen zum Erstellen einer eigenen Wiedergabeerweiterung finden Sie in der Dokumentation zur Replay-Erweiterung und in einem Beispiel für eine Erweiterung.
Chrome-Erweiterungen veröffentlichen
Nachdem Sie die Abläufe für Nutzer angepasst und umgewandelt haben, können Sie sie als Chrome-Erweiterung verpacken und im Chrome Web Store veröffentlichen.
In dieser Demo und einer Anleitung erfahren Sie, wie Sie lokale Fehler beheben und eine Chrome-Erweiterung veröffentlichen.
In Ihre CI/CD-Pipeline einbinden
Dafür gibt es mehrere Möglichkeiten und es gibt viele Tools. Hier ist ein Beispiel für die Automatisierung dieses Prozesses mit GitHub-Aktionen:
# .github/node.js.yml
name: Replay recordings
on:
push:
branches: [ "main" ]
schedule:
- cron: '30 12 * * *' # daily 12:30pm
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Use Node.js
uses: actions/setup-node@v3
with:
node-version: 18.x
cache: 'npm'
- run: npm install puppeteer
- run: npm run replay-all
- run: npm run start
In diesem Beispiel werden die User Flows in folgenden Fällen wiederholt:
- Neue Änderungen werden an den Zweig
maingesendet - Jeden Tag um 12:30 Uhr
Abgesehen von GitHub Actions können Sie auch Ihre bevorzugten Cloud-Anbieter einbinden. In dieser Demo sehen Sie,wie Sie mit Google Cloud Run Job bis zu 10.000 Nutzerabläufe parallel ausführen können.
Fazit
In diesem Blogpost wurden die verschiedenen Optionen erläutert, mit denen Sie Nutzerabläufe als JSON-Dateien exportieren, Wiedergaben mit PuppeteerReplayExtension anpassen, Nutzerabläufe mit PuppeteerStringifyExtension transformieren und in Ihre CI-Workflows einbinden können.
Ich hoffe, dieser Blogpost hat Ihnen einige Ideen dazu vermittelt, wie Sie das Rekorder-Steuerfeld und die bereitgestellten Tools verwenden können, um einen Test-Workflow in Ihre Projekte zu integrieren. Wir sind gespannt auf deine Ideen!
Vorschaukanäle herunterladen
Du kannst Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Mit diesen Vorschaukanälen erhalten Sie Zugriff auf die neuesten Funktionen der Entwicklertools, können bahnbrechende Webplattform-APIs testen und Probleme auf Ihrer Website erkennen, noch bevor Ihre Nutzer dies tun.
Chrome-Entwicklertools-Team kontaktieren
Verwende die folgenden Optionen, um die neuen Funktionen und Änderungen im Beitrag oder andere Themen im Zusammenhang mit den Entwicklertools zu besprechen.
- Sende uns über crbug.com einen Vorschlag oder Feedback.
- Wenn du ein Problem mit den Entwicklertools melden möchtest, klicke in den Entwicklertools auf Weitere Optionen
> Hilfe > Probleme mit Entwicklertools melden. - Senden Sie einen Tweet an @ChromeDevTools.
- Hinterlasse Kommentare unter YouTube-Videos oder YouTube-Videos mit Tipps zu DevTools.