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

Ergün Erdogmus
Ergün Erdogmus
X
Jecelyn Yeen

Zugegeben, automatisierte Tests zu schreiben, ist nicht das Spannendste im Leben eines Entwicklers. Als Entwickler möchten wir Funktionen schreiben, Fehler beheben und die Welt verbessern. Wenn wir jedoch keine automatisierten Tests in unseren Workflows verwenden, kann dies langfristig sehr schwierig werden. Wir sind also auch der Meinung, dass das Schreiben 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.

Themen in diesem Blogpost:

  • Nutzerflüsse programmatisch exportieren und wiedergeben
  • 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 vorausgesetzt, 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 bietet Ihnen der Rekorder die Möglichkeit, diese Aufnahmen als Puppeteer- oder Puppeteer Replay-Skript oder als einfache JSON-Datei zu exportieren.

Exportoptionen.

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

Mit Puppeteer noch einmal spielen

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

Wenn Sie Ihre JSON-Nutzerabläufe im Ordner recordings speichern (z. B. Demoprojekt), können Sie mit dem folgenden Befehl 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"

Damit können Sie npm run replay-all in der Befehlszeile ausführen, um alle Aufzeichnungen wiederzugeben.

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 Framework für End-to-End-Tests. Sie unterstützt unter anderem die Wiedergabe von JSON-Aufrufabfolgen 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 hingegen ist eine cloudbasierte Testplattform. Sie unterstützt die Wiedergabe 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 andere Formate zu exportieren.

Exportieren Sie Nutzerflüsse mit verschiedenen Erweiterungen.

Sie können die Nutzerflüsse beispielsweise als benutzerdefiniertes WebPageTest-Skript aufzeichnen und exportieren. Mit dem Skript können Sie die Leistung mehrstufiger Nutzerflüsse durch Ihre Anwendungen testen. Das Schreiben dieser Skripte kann jedoch manchmal schwierig sein.

Wenn Sie bereits über Testtools verfügen, können Sie außerdem 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.

Programmatisch in verschiedene Testskripts umwandeln

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 nach Cypress-Tests zu exportieren.

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

Nutzerflüsse mit Erweiterungen wiedergeben

Ab Chrome 112 haben Sie jetzt die Möglichkeit, Aufnahmen mithilfe von Erweiterungen noch einmal wiederzugeben. Mit diesen Erweiterungen kannst du Dienste und die Infrastruktur von Drittanbietern nahtlos einbinden, um Aufzeichnungen wiederzugeben, ohne die Entwicklertools zu verlassen.

Mit Replay-Erweiterungen können die Erweiterungen zu den Entwicklertools einen Bereich hinzufügen, um die Wiedergabe zu konfigurieren und Wiedergabeergebnisse 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. Puppeteer Replay bietet nicht nur die Möglichkeit, Nutzerflüsse wiederzugeben, sondern bietet APIs, mit denen Sie die Wiedergabe von Nutzerflüssen anpassen oder transformieren können.

Wiedergabe der User Flows anpassen

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

  • Wenn Sie nach jedem Schritt einen Screenshot erstellen und im Ordner _screenshots speichern möchten.
  • Damit eine Nachricht ausgegeben wird, wenn die Ausführung des User Flows abgeschlossen ist.

Hier ist das Code-Snippet. Du kannst diese Demo herunterladen und sie 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 wir mit dem folgenden Befehl User Flows mit dieser Erweiterung 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).

Ihr User Flow enthält beispielsweise einen Schritt zum Navigieren zu 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 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 Nutzerflüssen ausführen, wird die Navigationszeile in await browser.url(‘https://coffee-cart.netlify.app/’) übersetzt.

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 Nutzerflüsse angepasst und angepasst 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 Ihre CI/CD-Pipeline einbinden

Dafür gibt es mehrere Möglichkeiten und es gibt viele verschiedene 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 main-Zweig übertragen
  • Jeden Tag um 12:30 Uhr

Neben GitHub Actions können Sie auch Ihre bevorzugten Cloud-Anbieter einbinden. In dieser Demo erfahren Sie,wie Sie mit 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, dass ich Ihnen in diesem Blogpost einige Anregungen dazu gegeben hat, 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

Sie können Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Ü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.

Kontaktaufnahme mit dem Team für Chrome-Entwicklertools

Mit den folgenden Optionen kannst du die neuen Funktionen und Änderungen in dem Beitrag oder andere Aspekte der Entwicklertools besprechen.

  • 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.
  • Hinterlasse Kommentare in den YouTube-Videos mit den Neuerungen in den Entwicklertools oder in YouTube-Videos mit Tipps zu den Entwicklertools.