Im Video unten sehen Sie einen ersten Blick auf den neuen Bereich Aufzeichnung (Vorabversion).
In dieser Anleitung erfahren Sie, wie Sie mit dem Bereich Rekorder Nutzerflüsse aufzeichnen, wiederholen und messen.
Weitere Informationen zum Freigeben, Bearbeiten und Ändern der aufgezeichneten Nutzerflüsse und ihrer Schritte finden Sie in der Referenz zu den Funktionen des Rekorders.
Rekorder-Bereich öffnen
- Öffnen Sie die Entwicklertools.
Klicken Sie auf Weitere Optionen
> Weitere Tools > Rekorder.
Alternativ können Sie das Befehlsmenü verwenden, um den Bereich Aufzeichnung zu öffnen.
Einführung
Wir verwenden diese Demoseite für die Kaffeebestellung. Der Bezahlvorgang ist ein gängiger User Flow auf Shopping-Websites.
In den nächsten Abschnitten erfahren Sie, wie Sie den folgenden Bezahlvorgang über den Bereich Rekorder aufzeichnen, wiedergeben und prüfen:
- Legen Sie einen Kaffee in den Einkaufswagen.
- Fügen Sie einen weiteren Kaffee in den Einkaufswagen.
- Rufen Sie die Einkaufswagenseite auf.
- Nimm einen Kaffee aus dem Einkaufswagen.
- Starten Sie den Bezahlvorgang.
- Geben Sie die Zahlungsdetails ein.
- Gehen Sie zur Kasse.
User Flow aufzeichnen
- Öffnen Sie diese Demoseite. Klicken Sie auf die Schaltfläche Neue Aufnahme starten, um zu beginnen.
- Geben Sie „coffee checkout“ in das Textfeld Aufzeichnungsname ein.
- Klicken Sie auf die Schaltfläche Neue Aufnahme starten. Die Aufzeichnung wird gestartet. Im Steuerfeld wird Aufzeichnung... angezeigt, was bedeutet, dass die Aufzeichnung läuft.
- Klicke auf Cappuccino, um ihn in den Einkaufswagen zu legen.
- Klicke auf Americano, um das Produkt in den Einkaufswagen zu legen. Der Rekorder zeigt die Schritte an, die Sie bisher ausgeführt haben.
- Rufen Sie die Einkaufswagenseite auf und entfernen Sie Americano aus dem Einkaufswagen.
- Klicken Sie auf die Schaltfläche Gesamt: 19,00 $, um den Bezahlvorgang zu starten.
- Füllen Sie im Formular mit den Zahlungsdetails die Textfelder Name und E-Mail aus und klicken Sie das Kästchen Ich möchte Benachrichtigungen zu Bestellungen und Werbenachrichten erhalten an.
- Klicke auf die Schaltfläche Senden, um den Bezahlvorgang abzuschließen.
- Klicken Sie im Bereich Aufzeichnung auf die Schaltfläche
Aufzeichnung beenden, um die Aufzeichnung zu beenden.
User Flow wiedergeben
Nachdem Sie einen User Flow aufgezeichnet haben, können Sie ihn noch einmal abspielen, indem Sie auf die Schaltfläche 
Replay (Erneute Wiedergabe) klicken.
Sie können den User Flow auf der Seite noch einmal sehen. Der Wiedergabefortschritt wird auch im Bereich Rekorder angezeigt.
Wenn Sie während der Aufzeichnung einen Fehlklick gemacht haben oder etwas nicht funktioniert, können Sie den Nutzerfluss debuggen: Verlangsamen Sie die Wiedergabe, setzen Sie einen Haltepunkt und führen Sie sie Schritt für Schritt aus.
Langsames Netzwerk simulieren
Sie können eine langsame Netzwerkverbindung simulieren, indem Sie die Wiedergabeeinstellungen konfigurieren. Maximieren Sie beispielsweise den Bereich Einstellungen für die Wiedergabe und wählen Sie im Drop-down-Menü Netzwerk die Option Langsames 3G aus.
Möglicherweise werden in Zukunft weitere Einstellungen unterstützt. Teile uns mit, welche Einstellungen du dir für die Wiederholung wünschst.
Einen User Flow messen
Sie können die Leistung eines Nutzerflusses messen, indem Sie auf die Schaltfläche Leistung messen klicken. Der Bezahlvorgang ist beispielsweise ein kritischer User Flow einer Shopping-Website. Im Bereich Rekorder können Sie den Bezahlvorgang einmalig erfassen und regelmäßig analysieren.
Wenn Sie auf die Schaltfläche Leistung messen klicken, wird zuerst eine erneute Aufrufabfolge von Webseiten ausgelöst. Anschließend wird das Leistungs-Trace im Steuerfeld Leistung geöffnet.
Weitere Informationen zum Analysieren der Laufzeitleistung Ihrer Seite über das Steuerfeld Leistung Sie können das Kästchen Web Vitals im Bereich Leistung aktivieren, um die Web Vitals-Messwerte aufzurufen und Verbesserungsmöglichkeiten für die Nutzerfreundlichkeit zu ermitteln.
Schritte bearbeiten
Sehen wir uns die grundlegenden Optionen zum Bearbeiten der Schritte im aufgezeichneten Workflow an.
Eine umfassende Liste der Bearbeitungsoptionen finden Sie in der Referenz zu den Funktionen unter Schritte zur Bearbeitung.
Schritte einblenden
Maximieren Sie die einzelnen Schritte, um die Details der Aktion zu sehen. Maximieren Sie beispielsweise den Schritt Element „Cappuccino“ anklicken.
Der obige Schritt zeigt zwei Selektoren. Weitere Informationen
Beim Abspielen des Nutzerflusses versucht der Aufzeichnungstool, das Element mit einer der Auswahlen nach Sequenz abzufragen. Wenn der Rekorder beispielsweise das Element mit dem ersten Selector erfolgreich abfragt, wird der zweite Selector übersprungen und es wird mit dem nächsten Schritt fortgefahren.
Selektoren zu einem Schritt hinzufügen und daraus entfernen
Sie können beliebige Auswahlschaltflächen hinzufügen oder entfernen. Sie können beispielsweise Selektor 2 entfernen, da in diesem Fall nur aria/Cappuccino ausreicht. Bewegen Sie den Mauszeiger auf Selektor 2 und klicken Sie auf -, um ihn zu entfernen.
Selektoren in einem Schritt bearbeiten
Die selector kann ebenfalls bearbeitet werden. Wenn Sie beispielsweise Mokka anstelle von Cappuccino auswählen möchten, haben Sie folgende Möglichkeiten:
Ändern Sie den Wert des Selektors stattdessen in aria/Mocha.
Alternativ können Sie auf die Schaltfläche Auswählen
und dann auf der Seite auf Mocha klicken.Wiederholen Sie den Ablauf jetzt noch einmal. Es sollte Mocha anstelle von Cappuccino ausgewählt werden.
Versuchen Sie, andere Schritteigenschaften wie Typ, Ziel oder Wert zu bearbeiten.
Schritte hinzufügen und entfernen
Außerdem haben Sie die Möglichkeit, Schritte hinzuzufügen oder zu entfernen. Dies ist nützlich, wenn Sie einen zusätzlichen Schritt hinzufügen oder einen versehentlich hinzugefügten Schritt entfernen möchten. Anstatt den User Flow neu aufzuzeichnen, können Sie ihn einfach bearbeiten:
Klicken Sie mit der rechten Maustaste auf den Schritt, den Sie bearbeiten möchten, oder auf das Dreipunkt-Menü
daneben. 
Sie können Schritt entfernen auswählen, um ihn zu entfernen. Das Ereignis Scroll nach dem Schritt Mocha ist beispielsweise nicht erforderlich.
Angenommen, Sie möchten warten, bis die 9 Kaffee auf der Seite angezeigt werden, bevor Sie weitere Schritte ausführen. Wählen Sie im Schrittmenü Mocha die Option Schritt hinzufügen vor aus.
Bearbeiten Sie unter Assert Element den neuen Schritt mit den folgenden Details:
- Typ: waitForElement
- Selektor 1: .cup
- Operator: == (klicken Sie auf die Schaltfläche Operator hinzufügen)
- Anzahl: 9 (auf die Schaltfläche Anzahl hinzufügen klicken)
Wiederholen Sie den Ablauf jetzt, um die Änderungen zu sehen.
Nächste Schritte
Herzlichen Glückwunsch, Sie haben die Anleitung abgeschlossen!
Weitere Funktionen und Workflows (z. B. Import und Export) des Rekorders finden Sie in der Referenz zu Rekorder-Funktionen.