Im Video unten kannst du einen Blick auf den neuen Bereich Rekorder (Vorabversion) werfen.
In dieser Anleitung erfahren Sie, wie Sie mit dem Steuerfeld Rekorder Nutzerflüsse aufzeichnen, wiedergeben und messen.
Weitere Informationen zum Freigeben der aufgezeichneten Nutzerflüsse und der zugehörigen Schritte finden Sie in der Referenz zu Rekorder-Funktionen.
Rekorder-Bereich öffnen
- Öffnen Sie die Entwicklertools.
Klicken Sie auf Weitere Optionen
> Weitere Tools > Rekorder.
Sie können den Bereich Rekorder auch über das Befehlsmenü öffnen.
Einleitung
Wir werden diese Demoseite für Kaffeebestellungen verwenden. Der Bezahlvorgang ist ein häufiger User Flow unter Shopping-Websites.
In den nächsten Abschnitten erfahren Sie, wie Sie den folgenden Bezahlvorgang mit dem Steuerfeld Rekorder aufzeichnen, wiederholen und prüfen:
- Leg einen Kaffee in den Warenkorb.
- Lege einen weiteren Kaffee in den Warenkorb.
- 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
- Öffne diese Demoseite. Klicken Sie auf die Schaltfläche Neue Aufzeichnung starten, um zu beginnen.
- Geben Sie in das Textfeld Name der Aufzeichnung „Coffee Checkout“ ein.
Weitere Informationen finden Sie unter Selektoren.
1. Klicken Sie auf die Schaltfläche Neue Aufzeichnung starten. Die Aufzeichnung wird gestartet. Im Steuerfeld wird Aufzeichnung... angezeigt. Das bedeutet, dass die Aufzeichnung läuft.
1. Klicken Sie auf Cappuccino, um es in den Einkaufswagen zu legen.
1. Klicken Sie auf Americano, um es dem Einkaufswagen hinzuzufügen. In der Rekorder App werden alle Schritte angezeigt, die Sie bisher ausgeführt haben.
1. Rufen Sie die Einkaufswagenseite auf und entfernen Sie Americano aus dem Einkaufswagen.
1. Klicken Sie auf die Schaltfläche Senden, um den Bezahlvorgang abzuschließen.
1. Klicken Sie im Bereich Rekorder auf 
Aufzeichnung beenden, um die Aufzeichnung zu beenden.
Einen User Flow noch einmal wiedergeben
Nachdem Sie einen User Flow aufgezeichnet haben, können Sie ihn erneut wiedergeben, indem Sie auf die Schaltfläche 
Noch einmal klicken.
Auf der Seite können Sie die Wiedergabe des User Flows noch einmal sehen. Der Wiedergabefortschritt wird auch im Rekorder-Bereich angezeigt.
Wenn während der Aufzeichnung ein falscher Klick erfolgt ist oder etwas nicht funktioniert, können Sie den User Flow debuggen: Verlangsamen Sie die erneute Wiedergabe, legen Sie einen Haltepunkt fest und führen Sie den Vorgang Schritt für Schritt aus.
Langsames Netzwerk simulieren
Du kannst eine langsame Netzwerkverbindung simulieren, indem du die Wiedergabeeinstellungen konfigurierst. Maximiere zum Beispiel die Wiedergabeeinstellungen und wähle im Drop-down-Menü Netzwerk die Option Langsames 3G aus.
In Zukunft werden möglicherweise weitere Einstellungen unterstützt. Teilen Sie uns mit, welche Einstellungen Sie sich für die Wiedergabe wünschen.
Einen User Flow messen
Klicken Sie auf die Schaltfläche Leistung messen, um die Leistung eines Nutzerflusses zu messen. Der Bezahlvorgang ist beispielsweise ein wichtiger User Flow auf einer Shopping-Website. Im Bereich Rekorder können Sie den Bezahlvorgang einmalig aufzeichnen und regelmäßig messen.
Wenn Sie auf die Schaltfläche Leistung messen klicken, wird zuerst eine Wiedergabe des Nutzerflusses ausgelöst. Öffnen Sie dann das Leistungs-Trace im Bereich Leistung.
Weitere Informationen zur Analyse der Laufzeitleistung deiner Seite über den Bereich Leistung Wenn Sie im Bereich Leistung das Kästchen Web Vitals anklicken, werden Web Vitals-Messwerte angezeigt und Möglichkeiten zur Verbesserung der Browsernutzung ermittelt.
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 Elementreferenz unter Schritte bearbeiten.
Schritte einblenden
Maximieren Sie die einzelnen Schritte, um die Details der Aktion zu sehen. Maximieren Sie beispielsweise den Schritt Auf das Element „Cappuccino“ klicken.
Der obige Schritt zeigt zwei Selektoren. Weitere Informationen finden Sie unter Auswahl der Aufnahme.
Bei der Wiedergabe des Nutzerflusses versucht der Rekorder, das Element mit einem der Selektoren nach Sequenz abzufragen. Wenn der Rekorder das Element beispielsweise erfolgreich mit dem ersten Selektor abfragt, wird der zweite Selektor übersprungen und der nächste Schritt wird ausgeführt.
Selektoren zu einem Schritt hinzufügen und daraus entfernen
Sie können Selektoren hinzufügen oder entfernen. Sie können beispielsweise Selektor #2 entfernen, da in diesem Fall nur aria/Cappuccino ausreicht. Bewegen Sie den Mauszeiger auf Auswahl 2 und klicken Sie auf -, um sie zu entfernen.
Selektoren in einem Schritt bearbeiten
Die Auswahl kann ebenfalls bearbeitet werden. Wenn Sie beispielsweise Mocha anstelle von Cappuccino auswählen möchten, können Sie Folgendes tun:
Ändern Sie den Auswahlwert stattdessen zu aria/Mocha.
Alternativ können Sie auf die Schaltfläche Auswählen
und dann auf der Seite auf Mocha klicken.Spiel den Flow jetzt noch einmal ab. Er sollte Mocha anstelle von Cappuccino auswählen.
Versuchen Sie, andere Schritteigenschaften wie Typ, Ziel, Wert und mehr zu ändern.
Schritte hinzufügen und entfernen
Es gibt auch die Möglichkeit, Schritte hinzuzufügen und 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 klicken Sie daneben auf das Dreipunkt-Menü
. 
Sie können Schritt entfernen auswählen, um ihn zu entfernen. Beispielsweise ist das Scrollen-Ereignis nach dem Mocha-Schritt nicht erforderlich.
Angenommen, Sie möchten warten, bis die neun Kaffeesorten auf der Seite angezeigt werden, bevor Sie einen Schritt ausführen. Wählen Sie im Schrittmenü Mocha die Option Schritt hinzufügen vor aus.
Bearbeiten Sie unter Element bestätigen 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)
Spielen Sie den Ablauf jetzt noch einmal ab, um die Änderungen zu sehen.
Nächste Schritte
Herzlichen Glückwunsch, Sie haben die Anleitung abgeschlossen!
Weitere Funktionen und Workflows im Zusammenhang mit Rekorder (z. B. Import und Export) finden Sie in der Referenz zu Rekorder-Funktionen.