Sehen Sie sich den neuen Bereich Rekorder (Vorabversion) mit dem Video unten an.
In dieser Anleitung erfahren Sie, wie Sie mit dem Bereich Rekorder Nutzerflüsse aufzeichnen, wiederholen und messen.
Weitere Informationen dazu, wie Sie aufgezeichnete Nutzerflüsse freigeben, bearbeiten und die dazugehörigen Schritte bearbeiten, finden Sie in der Referenz zu Rekorder-Funktionen.
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 Rekorder zu öffnen.
> Weitere Tools > Rekorder.
Einleitung
Wir verwenden diese Demoseite für die Kaffeebestellung. Der Bezahlvorgang ist ein gängiger User Flow unter Shopping-Websites.
In den nächsten Abschnitten erfahren Sie, wie Sie den folgenden Bezahlvorgang über den Bereich Rekorder aufzeichnen, wiedergeben und prüfen:
- Fügen Sie einen Kaffee in den Warenkorb.
- 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 Aufzeichnung starten.
- Geben Sie in das Textfeld Name der Aufzeichnung „Kaffee bezahlen“ ein.
- Klicken Sie auf die Schaltfläche Neue Aufzeichnung 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.
- Klicken Sie auf die Schaltfläche Senden, um den Bezahlvorgang abzuschließen.
- Klicken Sie im Bereich Rekorder auf
Aufzeichnung beenden, um die Aufzeichnung zu beenden.
Einen User Flow wiederholen
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 bei der Aufzeichnung einen Fehler gemacht haben oder etwas nicht funktioniert, können Sie Fehler im User Flow beheben: Verlangsamen Sie die Wiedergabe, setzen Sie einen Haltepunkt und führen Sie ihn Schritt für Schritt aus.
Langsames Netzwerk simulieren
Sie können eine langsame Netzwerkverbindung simulieren, indem Sie die Einstellungen für die Wiedergabe 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.
In Zukunft werden möglicherweise weitere Einstellungen unterstützt. Teile uns die gewünschten Einstellungen für die Wiedergabe mit.
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 wichtiger 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 Web Vitals-Kästchen im Bereich Leistung aktivieren, um die Web Vitals-Messwerte aufzurufen und Möglichkeiten zur Verbesserung des Surfens für Nutzer zu ermitteln.
Schritte bearbeiten
Sehen wir uns die grundlegenden Optionen zur Bearbeitung der Schritte im aufgezeichneten Workflow an.
Eine umfassende Liste der Bearbeitungsoptionen finden Sie unter Schritte bearbeiten in der Funktionsreferenz.
Schritte einblenden
Maximieren Sie die einzelnen Schritte, um die Details der Aktion zu sehen. Maximieren Sie beispielsweise den Schritt Klickelement „Cappuccino“.
Der obige Schritt zeigt zwei Selektoren. Weitere Informationen
Bei der Wiedergabe des User Flows versucht der Rekorder, das Element mit einem der Selektoren 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 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 Selektor 2 und klicken Sie auf -, um ihn zu entfernen.
Selektoren in einem Schritt bearbeiten
Die Auswahl kann ebenfalls bearbeitet werden. Wenn Sie beispielsweise Mocha statt Cappuccino auswählen möchten, haben Sie folgende Möglichkeiten:
Ändern Sie den Auswahlwert 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 Eigenschaften des Schritts zu bearbeiten, z. B. type, target oder value.
und dann auf der Seite auf Mocha klicken.Schritte hinzufügen und entfernen
Sie haben 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 Ereignis Scrollen nach dem Schritt Mocha nicht erforderlich.
Angenommen, Sie möchten warten, bis die neun Kaffees 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 in Assert Element den neuen Schritt mit den folgenden Details:
- Typ: waitForElement
- Selektor 1: .cup
- Operator: == (klicken Sie auf die Schaltfläche Operator hinzufügen)
- count: 9 (klicken Sie auf add count)
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.