Nutzerabläufe über den Rekorder der Chrome-Entwicklertools hinaus anpassen und automatisieren

Ergün Erdogmus
Ergün Erdogmus
X
Jecelyn Yeen

Generell ist das Schreiben automatisierter Tests nicht das, was Entwickler am meisten Spaß macht. Als Entwickler möchten wir Funktionen schreiben, Fehler beheben und die Welt verbessern. Wenn wir jedoch keine automatisierten Tests in unseren Workflows haben, kann es langfristig zu vielen Fehlern kommen. Daher sind wir der Meinung, dass das Erstellen automatisierter Tests wichtig ist.

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 Aufrufabfolgen mit der Puppeteer Replay-Bibliothek anpassen und in Ihre vorhandenen Workflows einbinden.

In diesem Blogpost geht es um folgende Themen:

  • Informationen zum programmatischen Exportieren und Wiedergeben von Nutzerflüssen
  • Hier erfahren Sie, wie Sie Ihre User Flows mithilfe von Puppeteer Replay anpassen.
  • Informationen zur Einbindung in Ihre CI/CD-Workflows

In diesem Blogpost wird davon ausgegangen, dass Sie bereits mit den Grundlagen von Rekorder vertraut sind. Wenn Sie Rekorder noch nicht kennen, empfehlen wir Ihnen diese kurze Einführung und Videoanleitung.

Nutzerflüsse exportieren und programmatisch wiedergeben

Standardmäßig können Sie diese Aufzeichnungen als Puppeteer- oder Puppeteer Replay-Script oder als einfache JSON-Datei exportieren.

Exportoptionen

Nachdem Sie die Nutzerflüsse als JSON-Dateien exportiert haben, können Sie sie zurück in den Aufzeichnungsbereich importieren und wiedergeben oder externe Bibliotheken verwenden, um sie wiederzugeben. Die Puppeteer Replay-Bibliothek ist eine der verfügbaren Bibliotheken.

Mit Puppeteer Replay wiedergeben

Folgen Sie der Anleitung im Repository, um Puppeteer Replay zu installieren.

Angenommen, Sie speichern Ihre JSON-Nutzerflüsse im Ordner recordings (z. B. Demoprojekt). Mit dem folgenden Befehl können Sie einen oder mehrere Nutzerflüsse 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 der Datei package.json ein:

"replay-all": "replay recordings"

So können Sie npm run replay-all in der Befehlszeile ausführen, um alle Aufnahmen abzuspielen.

Nutzerflüsse 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

Mit Bibliotheken von Drittanbietern wiederholen

Es gibt einige Bibliotheken von Drittanbietern, mit denen Sie Inhalte außerhalb des Chrome-Browsers wiedergeben können. Hier finden Sie die vollständige Liste der Bibliotheken.

TestCafe ist beispielsweise ein End-to-End-Testframework. Es unterstützt unter anderem das Replayen von JSON-Nutzerflüssen mit Safari.

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 ist dagegen eine cloudbasierte Testplattform. Es unterstützt das Replayen von JSON-Nutzerflüssen mit verschiedenen Browsern und Versionen in der Cloud.

Hier ist 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" ]
…

Nutzerflüsse mit verschiedenen Erweiterungen exportieren

Neben den Standardoptionen können Sie auch Erweiterungen installieren, um Nutzerflüsse in verschiedene Formate zu exportieren.

Nutzerflüsse mit verschiedenen Erweiterungen exportieren

Sie können die Nutzerflüsse beispielsweise als benutzerdefiniertes WebPageTest-Skript aufzeichnen und exportieren. Mit dem Script können Sie die Leistung mehrstufiger Aufrufabfolgen in Ihren Anwendungen testen. Das Schreiben dieser Scripts kann jedoch manchmal eine Herausforderung sein.

Wenn Sie bereits über Testtools verfügen, können Sie auch Erweiterungen für den Export von Nutzerflüssen in verschiedene Testskripts wie Cypress, Nightwatch, WebdriverIO, Testing Library usw. verwenden. Hier ist die vollständige Liste. So können Sie und Ihr Team schneller mit dem Schreiben von Tests beginnen.

Programmatische Umwandlung in verschiedene Testscripts

Zusätzlich zu den Erweiterungen veröffentlichen die meisten dieser Testanbieter auch Bibliotheken, mit denen Sie mehrere JSON-Nutzerflüsse programmatisch konvertieren können.

Verwenden Sie beispielsweise die Bibliotheken @cypress/chrome-recorder, um Nutzerflüsse in Cypress-Tests zu exportieren.

npm install -g @cypress/chrome-recorder
npx @cypress/chrome-recorder ./recordings/*.json

Nutzerflüsse mit Erweiterungen wiedergeben

Ab Chrome 112 können Sie mithilfe von Erweiterungen Aufzeichnungen abspielen. Mit diesen Erweiterungen kannst du Dienste und die Infrastruktur von Drittanbietern nahtlos einbinden, um Aufzeichnungen wiederzugeben, ohne die Entwicklertools zu verlassen.

Mit Wiedergabeerweiterungen können Erweiterungen DevTools ein Steuerfeld hinzufügen, um die Wiedergabe zu konfigurieren und die Ergebnisse der Wiedergabe anzuzeigen.

Sehen Sie sich zuerst die Liste der verfügbaren Erweiterungen an oder erstellen Sie eigene benutzerdefinierte Erweiterungen.

Eigene Erweiterungen oder Bibliotheken erstellen

Im Hintergrund basieren alle Erweiterungen und Bibliotheken auf der Puppeteer Replay-Bibliothek. Neben der Möglichkeit, Nutzerflüsse zu wiedergeben, bietet Puppeteer Replay APIs, mit denen Sie die Wiedergabe von Nutzerflüssen anpassen oder transformieren können.

Wiedergabe von User Flows anpassen

Erstellen wir nun ein Screenshot-Plug-in. Für jeden User Flow möchten wir:

  • Am Ende jedes Schritts einen Screenshot erstellen und im Ordner _screenshots speichern
  • Damit eine Nachricht ausgegeben wird, wenn die Ausführung des User Flows abgeschlossen ist.

Hier ist das Code-Snippet. Sie können diese Demo herunterladen und ausprobieren.

/* 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 selbst ist ziemlich ausdrucksstark. Wir erweitern die PuppeteerRunnerExtension API, um nach jedem Schritt einen Screenshot zu speichern und nach allen Schritten eine Nachricht zu protokollieren.

Speichern Sie die Datei. Anschließend können Sie Nutzerflüsse mit dieser Erweiterung mit dem folgenden Befehl ausführen:

# 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.

Nutzerflüsse transformieren

Eine weitere Möglichkeit zur Anpassung des User Flows besteht darin, ihn in verschiedene Formate umzuwandeln (z. B. Testskripts für Cypress oder Nightwatch).

Angenommen, Ihr User Flow enthält einen Schritt, um zu einer URL zu gelangen. 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 auch andere vorhandene Bibliotheken aufrufen, 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 Aufrufabfolgen ausführen, wird die Navigationslinie in await browser.url(‘https://coffee-cart.netlify.app/’) umgewandelt.

Wiederholung der Entwicklertools anpassen

Mit Replay-Erweiterungen kannst du Aufzeichnungen über Dienste und die Infrastruktur von Drittanbietern wiedergeben, ohne den Rekorder von DevTools zu verlassen.

Mit Browsererweiterungen kannst du die Wiedergabe optimieren.

Informationen zum Erstellen einer eigenen Replay-Erweiterung finden Sie in der Dokumentation zur Replay-Erweiterung und in einer Beispielerweiterung.

Chrome-Erweiterungen veröffentlichen

Nachdem Sie die Aufrufabfolgen angepasst und umgestaltet haben, können Sie sie als Chrome-Erweiterung verpacken und im Chrome Web Store veröffentlichen.

In dieser Demo und der Anleitung erfahren Sie, wie Sie lokale Fehler beheben und eine Chrome-Erweiterung veröffentlichen.

In CI/CD-Pipeline einbinden

Es gibt verschiedene Möglichkeiten und viele Tools. Hier ist ein Beispiel für die Automatisierung dieses Prozesses mit GitHub Actions: 

# .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 per Push in den main-Zweig übertragen werden
  • jeden Tag um 12:30 Uhr

Neben GitHub Actions können Sie auch Ihre bevorzugten Cloud-Anbieter einbinden. In dieser Demo sehen Sie, wie Sie mit einem Google Cloud Run-Job bis zu 10.000 Nutzerflüsse parallel ausführen können.

Fazit

In diesem Blogpost haben wir die verschiedenen Optionen erläutert, mit denen Sie Nutzerflüsse als JSON-Dateien exportieren, Wiederholungen mit PuppeteerReplayExtension anpassen, Nutzerflüsse mit PuppeteerStringifyExtension transformieren und in Ihre CI-Workflows einbinden können.

Ich hoffe, dieser Blogpost hat Ihnen einige Ideen dazu gegeben, wie Sie das Steuerfeld für die Aufzeichnung und die bereitgestellten Tools verwenden können, um die Einbindung eines Testworkflows in Ihre Projekte zu vereinfachen. Wir sind schon gespannt auf Ihre Beiträge!

Vorschaukanäle herunterladen

Verwenden Sie Chrome Canary, Chrome Dev oder Chrome Beta als Standardbrowser für die Entwicklung. Über diese Vorschaukanäle erhalten Sie Zugriff auf die neuesten Entwicklertools, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website erkennen, bevor Ihre Nutzer es tun.

Chrome-Entwicklertools-Team kontaktieren

Mit den folgenden Optionen können Sie über die neuen Funktionen und Änderungen im Beitrag oder über andere Themen im Zusammenhang mit den Entwicklertools diskutieren.

  • Senden Sie uns über crbug.com einen Vorschlag oder Feedback.
  • Problem mit den Entwicklertools über Weitere Optionen melden Mehr > Hilfe > Hier kannst du Probleme mit den Entwicklertools in den Entwicklertools melden.
  • Twittern Sie unter @ChromeDevTools.
  • Hinterlassen Sie uns Kommentare unter unseren YouTube-Videos Neuerungen in den DevTools oder Tipps zu den DevTools.