Aufzeichnen und Wiedergeben von Benutzerflows und Messen der Leistung

Verwenden Sie das Aufzeichnungstool , um eine Reihe von Schritten im Browserfenster oder auf der Registerkarte aufzuzeichnen, in dem DevTools geöffnet ist, und die Schritte dann automatisch wiederzugeben und optional auch die Leistung zu messen.

Wann sollte das Aufzeichnungstool verwendet werden?

Verwenden Sie das Aufzeichnungstool , wenn Sie sich wiederholende Aufgaben beschleunigen möchten, indem Sie automatisch eine Reihe von Benutzerinteraktionen im Browser wiedergeben.

Das Aufzeichnungstool zeichnet Benutzerinteraktionen wie Mausklicks, Tastatureingaben und Seitennavigationsereignisse auf und ermöglicht ihnen die automatische Wiedergabe der Interaktionen. Sie können auch das Aufzeichnungstool verwenden, um die Laufzeitleistung bei der Wiedergabe der aufgezeichneten Benutzerinteraktionen zu messen. Mit dem Aufzeichnungstool können Sie beliebig viele Benutzerflows aufzeichnen und so oft wie gewünscht wiedergeben.

Im weiteren Verlauf dieses Artikels verwenden wir das Tool Recorder , um das Hinzufügen von Aufgaben zur ToDO-Demo-App zu automatisieren.

Öffnen des Aufzeichnungstools

1. Öffnen Sie die TODO-App auf einer neuen Registerkarte oder einem neuen Fenster.

2. Klicken Sie zum Öffnen von DevTools mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus. Oder drücken Sie STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS). DevTools wird geöffnet.

3. Wählen Sie in DevTools auf der Aktivitätsleiste die Registerkarte Aufzeichnung aus. Wenn diese Registerkarte nicht angezeigt wird, klicken Sie auf die Schaltfläche Weitere Tools (), und wählen Sie dann Aufzeichnung aus. Das Aufzeichnungstool wird geöffnet:

   

Aufzeichnen eines Benutzerflows

So starten Sie die Aufzeichnung eines neuen Benutzerflows:

1. Klicken Sie auf Neue Aufzeichnung erstellen.

2. Geben Sie unter Aufzeichnungsname einen Namen für die Aufzeichnung ein, z. B. "Hinzufügen von TODO-Aufgaben".

3. Klicken Sie unten im Aufzeichnungstool auf Aufzeichnung starten:

   

4. Interagieren Sie auf der gerenderten Webseite mit der Seite. Geben Sie beispielsweise "Aufgabe 1" in das Eingabefeld Aufgabe hinzufügen ein, und drücken Sie dann die EINGABETASTE. Wiederholen Sie diese Schritte mehrmals.

   Neben dem Namen der Aufzeichnung wird ein roter Kreis angezeigt, der angibt, dass die Aufzeichnung ausgeführt wird. Das Aufzeichnungstool zeichnet Ihre Interaktionen auf und zeigt sie als Liste von Schritten an:

   

5. Um die Aufzeichnung zu beenden, klicken Sie am Ende der Liste der aufgezeichneten Interaktionen auf die Schaltfläche Aufzeichnung beenden .

   Die Aufzeichnung wird beendet, und der Kreis neben dem Aufzeichnungsnamen wird blau, was angibt, dass die Aufzeichnung abgeschlossen ist:

   

Aufzeichnen anderer Benutzerflows

So zeichnen Sie einen neuen Benutzerflow auf, nachdem Sie die Aufzeichnung des vorherigen Benutzerflows beendet haben:

1. Klicken Sie in der linken oberen Ecke des Aufzeichnungstools auf die Schaltfläche Neue Aufzeichnung):

   

2. Wiederholen Sie die Schritte unter Aufzeichnen eines Benutzerflows oben.

Wiedergeben eines Benutzerflows

Sie können Benutzerflows entweder aus der Liste der aufgezeichneten Benutzerflows oder beim Anzeigen der Details eines bestimmten Benutzerflows wiedergeben.

• Um die Liste der aufgezeichneten Benutzerflows anzuzeigen, klicken Sie oben auf der Symbolleiste des Aufzeichnungstools auf das Dropdownmenü, und wählen Sie dann 2 Aufzeichnungen aus. Die Bezeichnung zeigt möglicherweise eine andere Anzahl von Aufzeichnungen an, je nachdem, wie viele Aufzeichnungen Sie erstellt haben.

• Um die Details eines bestimmten Benutzerflows anzuzeigen, klicken Sie oben auf der Symbolleiste des Aufzeichnungstools auf die Dropdownliste, und klicken Sie dann auf den Namen eines Benutzerflows.

Wiedergeben eines Benutzerflows aus der Liste der Aufzeichnungen

1. Klicken Sie neben einer Aufzeichnung auf die Schaltfläche Aufzeichnung wiedergeben :

   

2. Warten Sie, während das Aufzeichnungstool die zuvor aufgezeichneten Benutzerinteraktionen wiederspielt. Eine Animation der schritte, die wiedergegeben werden, wird im Aufzeichnungstool angezeigt:

   

   Wenn die Wiedergabe abgeschlossen ist, wird die Animation beendet, und das Aufzeichnungstool zeigt die Schritte der Aufzeichnung an.

Wiedergeben eines Benutzerflows aus einer Aufzeichnung

1. Klicken Sie in der oberen rechten Ecke des Aufzeichnungstools auf die Schaltfläche Wiedergabe:

   

2. Warten Sie, während das Aufzeichnungstool die zuvor aufgezeichneten Benutzerinteraktionen wiederspielt. Eine Animation der schritte, die wiedergegeben werden, wird im Aufzeichnungstool angezeigt:

   

   Wenn die Wiedergabe abgeschlossen ist, wird die Animation beendet, und das Aufzeichnungstool zeigt die Schritte der Aufzeichnung an.

Langsame Wiedergabe eines Benutzerflows, um Probleme zu untersuchen

Um zu sehen, was auf der gerenderten Seite geschieht, während die Benutzerinteraktionen wiedergegeben werden, verlangsamen Sie die Wiedergabegeschwindigkeit. Standardmäßig gibt das Aufzeichnungstool Benutzerflows so schnell wie möglich wieder.

So verlangsamen Sie die Wiedergabegeschwindigkeit:

• Klicken Sie in der oberen rechten Ecke des Aufzeichnungstools auf den Dropdownpfeil neben Wiedergabe, und wählen Sie dann im Dropdownmenü eine Geschwindigkeit aus, z. B. Langsam, Sehr langsam oder Extrem langsam:

  

Anhalten während der Wiedergabe eines Benutzerflows mithilfe von Haltepunkten

Um die gerenderte Webseite an einem bestimmten Punkt des Benutzerflows zu überprüfen, halten Sie die Wiedergabe mithilfe eines Haltepunkts an.

So fügen Sie einem Benutzerflow einen Haltepunkt hinzu:

1. Klicken Sie neben dem Flowschritt, bei dem angehalten werden soll, auf die Schaltfläche Schrittaktionen öffnen ("), und wählen Sie dann Breakpoint hinzufügen aus:

   

2. Klicken Sie zum Starten des Benutzerflows in der oberen rechten Ecke des Aufzeichnungstools auf Wiedergabe.

   Die Wiedergabe wird angehalten, wenn sie den Schritt erreicht, der einen Haltepunkt aufweist. Die Schaltflächen "Weiter" und "Einen Schritt ausführen " sind ebenfalls auf der Symbolleiste verfügbar:

   

3. Klicken Sie auf die Schaltfläche Einen Schritt ausführen , um den nächsten Schritt auszuführen und erneut anzuhalten, oder klicken Sie auf die Schaltfläche Weiter , um die Wiedergabe fortzusetzen, bis der nächste Haltepunkt (oder das Ende des Benutzerflows) erreicht ist.

Messen der Leistung

Verwenden Sie das Recorder-Tool , um zu messen, wie schnell eine Website während der Wiedergabe einer Reihe von Benutzerinteraktionen ausgeführt wird. Wenn Sie einen Benutzerflow einmal aufzeichnen, können Sie die Aufzeichnung mehrmals wiedergeben und gleichzeitig an der Verbesserung der Laufzeitleistung der Website arbeiten.

1. Um einen neuen Benutzerflow aufzuzeichnen, führen Sie die Schritte unter Aufzeichnen eines Benutzerflows aus.

2. Um den Benutzerflow beim Messen der Leistung wiederzugeben, klicken Sie in der oberen rechten Ecke des Aufzeichnungstools auf Leistungsbereich:

   

3. Warten Sie, während das Aufzeichnungstool die zuvor aufgezeichneten Benutzerinteraktionen wiederspielt.

   Das Leistungstool wird geöffnet und zeigt eine Aufzeichnung der Leistung der Website an, während die Benutzerinteraktionen wiedergegeben wurden:

   

Bearbeiten der Schritte eines Benutzerflows

Nachdem Sie einen Benutzerflow aufgezeichnet haben, können Sie die Schritte des Benutzerflows bearbeiten. Beispielsweise können Sie neue Schritte hinzufügen, vorhandene Schritte entfernen oder die Details eines Schritts bearbeiten.

Hinzufügen eines neuen Schritts

So fügen Sie einem vorhandenen Benutzerflow einen neuen Schritt hinzu:

1. Klicken Sie auf die Schaltfläche Schrittaktionen öffnen ( neben dem Schritt vor oder nach dem Sie einen neuen Schritt hinzufügen möchten, und wählen Sie dann Schritt vor oder Schritt hinzufügen nach aus:

   

2. Befolgen Sie die Anweisungen unter Bearbeiten eines Schritts unten, um die Details des neuen Schritts zu bearbeiten, den Sie hinzugefügt haben. Der neue Schritt heißt vorübergehend Wait for-Element.

Bearbeiten eines Schritts

So bearbeiten Sie die Details eines vorhandenen Schritts:

1. Um den Detailabschnitt des Schritts zu öffnen, den Sie bearbeiten möchten, klicken Sie neben dem Schritt auf die Schaltfläche "". Der Detailabschnitt des Schritts wird geöffnet:

   

2. Bearbeiten Sie die Details des Schritts, z. B. den Schritttyp , die Selektoren des DOM-Elements, für das der Schritt gilt, oder die Eigenschaften des Schritts. Die verschiedenen Arten von Schritten und ihre Eigenschaften sind im folgenden Abschnitt aufgeführt. Ihre Änderungen werden automatisch gespeichert.

Ändern des Schritttyps

So ändern Sie den Schritttyp beim Bearbeiten der Details eines Schritts:

1. Klicken Sie auf das Eingabefeld neben der Eingabe. Wenn der Schritt, den Sie bearbeiten, beispielsweise den Typ waitForElement aufweist, klicken Sie auf das Eingabefeld, das den Wert waitForElement enthält.

2. Löschen Sie den Inhalt des Eingabefelds, und wählen Sie dann im angezeigten Dropdownmenü den neuen Schritttyp aus, den Sie verwenden möchten:

   

Sie können die folgenden Arten von Schritten verwenden, wenn Sie einen Schritt in einem Benutzerflow bearbeiten. Jeder Schritttyp verfügt über eine Liste von Eigenschaften, die für den Schritt gelten.

Schritttyp	Beschreibung	Eigenschaften
change	Ändern des Werts eines Formulareingabefelds.	-Selektoren: Möglichkeiten, das Element zu finden, für das dieser Schritt gilt. value: Der Wert, auf den das Formulareingabefeld festgelegt werden soll.
click	Klicken Sie auf ein Element.	Selektoren: Möglichkeiten, das Element zu finden, für das dieser Schritt gilt. Offsetx/offsetY: Gibt an, wie weit von der linken oberen Ecke des Elements geklickt werden soll.
close	Schließen Sie das Browserfenster.	Keine
doubleClick	Doppelklicken Sie auf ein Element.	-Selektoren: Möglichkeiten, das Element zu finden, für das dieser Schritt gilt. Offsetx/offsetY: Gibt an, wie weit von der linken oberen Ecke des Elements ein Doppelklick durchgeführt werden soll.
emulateNetworkConditions	Emulieren sie verschiedene Netzwerkbedingungen.	Herunterladen/upload: Die Download- und Uploadgeschwindigkeiten in Bytes pro Sekunde. latenz: Die minimale Latenz zwischen einer Anforderung, die an die empfangene Antwort gesendet wird, in Millisekunden.
hover	Emulieren Sie den Zeiger, der auf ein Element zeigt.	-Selektoren: Möglichkeiten, das Element zu finden, für das dieser Schritt gilt.
keyDown	Drücken Sie eine NACH-UNTEN-TASTE.	-Selektoren: Möglichkeiten, das Element zu finden, für das dieser Schritt gilt. key: Welche Taste gedrückt werden soll.
keyUp	Geben Sie eine gedrückte Taste frei.	-Selektoren: Möglichkeiten, das Element zu finden, für das dieser Schritt gilt. key: Welcher Schlüssel freigegeben werden soll.
navigate	Navigieren Sie zu einer anderen Webseite.	url: Die URL der Seite, zu der navigiert werden soll.
scroll	Scrollen Sie zu einer Position auf der Webseite.	X/y: Die optionalen horizontalen und vertikalen Koordinaten der Position, zu der auf der Seite gescrollt werden soll.
setViewport	Ändern Sie die Viewportgröße, das Pixelverhältnis des Geräts und die Funktionen.	Breite/height: Die Größe des Viewports. deviceScaleFactor: Das Pixelverhältnis des Geräts. isMobile: Gibt an, ob der Viewport ein Viewport für mobile Geräte ist. hasTouch: Gibt an, ob der Viewport Touchereignisse unterstützt. isLandscape: Gibt an, ob sich der Viewport im Querformat befindet.
waitForElement	Warten Sie, bis ein Element oder mehrere Elemente auf der Webseite vorhanden sind.	-Selektoren: Möglichkeiten, das Element zu finden, für das dieser Schritt gilt.
waitForExpression	Warten Sie, bis ein JavaScript-Ausdruck als trueausgewertet wird.	ausdruck: Der auszuwertende JavaScript-Ausdruck.

Bearbeiten der Selektoren eines Schritts

Viele Schritttypen verfügen über eine Selektoreigenschaft , die das DOM-Element angibt, auf das der Schritt angewendet wird. Beispielsweise verfügt ein click Schritt über eine Selektoreigenschaft , um zu definieren, auf welches Element auf der Seite geklickt wird, wenn dieser Schritt des Benutzerflows ausgeführt wird.

Die Selektoreigenschaft ist eine Liste mit mindestens einem Selektor. Jeder Selektor in der Liste kann eine andere Möglichkeit sein, das Element auf der Seite zu finden. Das Aufzeichnungstool versucht jeden Selektor in der Liste in der Reihenfolge, bis ein Element auf der Seite gefunden wird, das mit dem Selektor übereinstimmt.

Ein Selektor kann einen der folgenden Typen aufweisen:

• Eine CSS-Auswahl, z #my-element-with-id . B. oder .my-class.
• Eine XPath-Auswahl mit dem Präfix xpath/, z xpath//html/body/form/div/label. B. .
• Der Textinhalt des Elements mit dem Präfix text/, z text/Add a task. B. .

Sie können die Selektoren eines Schritts mit einem der folgenden Methoden bearbeiten:

• Auswählen eines Elements auf der gerenderten Webseite.

• Manuelles Hinzufügen, Entfernen oder Ändern eines Selektors.

• Um die Selektoren durch Auswählen eines Elements auf der gerenderten Webseite zu bearbeiten, klicken Sie auf Element auf der Seite auswählen, um Selektoren zu aktualisieren, und klicken Sie dann auf das Element auf der gerenderten Webseite, das Sie auswählen möchten. Das Aufzeichnungstool aktualisiert die Liste der Selektoren so, dass sie mit dem ausgewählten Element übereinstimmt:

  

• Sie können einen Selektor manuell hinzufügen, entfernen oder ändern:

  • Um eine Auswahl hinzuzufügen oder zu entfernen, zeigen Sie unter Selektoren mit dem Mauszeiger auf einen Selektor, und klicken Sie dann auf Selektor hinzufügen oder Selektor entfernen:

    

  • Um den Wert eines Selektors zu ändern, klicken Sie unter Selektoren auf das Eingabefeld, das den Wert des Selektors enthält, und geben Sie dann den neuen Wert für die Auswahl ein:

    

Löschen eines Schritts

So löschen Sie einen Schritt aus einem vorhandenen Benutzerflow:

1. Klicken Sie neben dem Schritt, den Sie löschen möchten, auf die Schaltfläche Schrittaktionen öffnen ( öffnen"), und wählen Sie dann Schritt entfernen aus:

   

Löschen eines Benutzerflows

Um einen zuvor aufgezeichneten Benutzerflow zu löschen, klicken Sie beim Anzeigen der Liste der Aufzeichnungen neben der Aufzeichnung, die Sie löschen möchten, auf Aufzeichnung löschen ():

Exportieren und Importieren von Benutzerflows als Dateien

Wenn Sie einen Benutzerflow für andere Personen freigeben möchten, exportieren Sie Ihren aufgezeichneten Benutzerflow als JSON-Datei. Beispielsweise kann die Freigabe eines Benutzerflows anderen Personen helfen, einen Fehler zu reproduzieren, indem sie die gleichen Schritte wie Sie ausführen.

Exportieren eines Benutzerflows als Datei

Wenn Sie einen Benutzerflow für eine andere Person freigeben möchten, exportieren Sie den Benutzerflow als JSON-Datei:

1. Wenn Sie die Schritte eines Benutzerflows anzeigen, klicken Sie auf der Symbolleiste des Aufzeichnungstools auf die Schaltfläche Exportieren (), und wählen Sie dann JSON aus:

   

2. Wählen Sie einen Speicherort aus, an dem die Datei gespeichert werden soll. Die Datei wird mit dem Namen des Benutzerflows und der Erweiterung .jsongespeichert.

Importieren eines Benutzerflows aus einer Datei

So importieren Sie einen Benutzerflow aus einer JSON-Datei:

1. Klicken Sie auf der Symbolleiste des Aufzeichnungstools auf die Schaltfläche Aufzeichnung importieren ():

   

2. Wählen Sie im daraufhin geöffneten Dialogfeld für die Dateiauswahl eine JSON-Datei für den Benutzerflow aus, und klicken Sie dann auf die Schaltfläche Öffnen . Der Benutzerflow wird importiert und in der Liste der Aufzeichnungen im Aufzeichnungstool angezeigt.

Exportieren eines Benutzerflows für die Testautomatisierung

Um ein Testskript zu generieren und es automatisch mit einem Testautomatisierungsframework auszuführen, exportieren Sie einen Benutzerflow wie folgt als .js Testskriptdatei:

1. Wenn Sie die Schritte eines Benutzerflows anzeigen, klicken Sie auf der Symbolleiste des Aufzeichnungstools auf die Schaltfläche Exportieren (), und wählen Sie dann ein Exportformat aus:

   

   Exportformat	Testautomatisierungsframework
   @puppeteer/replay	Exportiert den Benutzerflow als Testskript für die Wiedergabebibliothek . Sehen Sie sich das Puppeteer/Replay-Repository an.
   Puppeteer	Exportiert den Benutzerflow als Testskript für das Puppeteer-Testautomatisierungsframework. Siehe Puppeteer.
   Puppeteer (einschließlich Lighthouse-Analyse)	Exportiert den Benutzerflow als Testskript für das Puppeteer-Testautomatisierungsframework und enthält eine Lighthouse-Analyse der Leistung der Website.

   Das Dialogfeld Speichern unter wird geöffnet.

2. Wählen Sie einen Speicherort aus, an dem die Datei gespeichert werden soll. Die Datei wird mit dem Namen des Benutzerflows und der Erweiterung .jsgespeichert.