Registreer, speel opnieuw en meet gebruikersstromen

Bekijk het nieuwe Recorder- paneel (preview-functie) met de onderstaande video.

Voltooi deze tutorial om te leren hoe u het Recorder- paneel kunt gebruiken om gebruikersstromen op te nemen, opnieuw af te spelen en te meten.

Zie de naslaginformatie over Recorder-functies voor meer informatie over het delen van de opgenomen gebruikersstromen en het bewerken ervan en hun stappen.

Open het Recorderpaneel

1. Open DevTools .

2. Klik op Meer opties > Meer hulpmiddelen > Recorder .

   

   U kunt ook het Commandomenu gebruiken om het Recorder- paneel te openen.

   

Invoering

We zullen deze demopagina voor het bestellen van koffie gebruiken. Afrekenen is een veel voorkomende gebruikersstroom onder winkelwebsites.

In de volgende secties laten we u zien hoe u het volgende afrekenproces kunt opnemen, opnieuw afspelen en controleren met het Recorder- paneel:

1. Voeg een kopje koffie toe aan de winkelwagen.
2. Voeg nog een koffie toe aan de winkelwagen.
3. Ga naar de winkelwagenpagina.
4. Haal één koffie uit de kar.
5. Start het afrekenproces.
6. Vul de betalingsgegevens in.
7. Uitchecken.

Registreer een gebruikersstroom

1. Open deze demopagina . Klik op de knop Nieuwe opname starten om te beginnen.
2. Voer 'koffie afrekenen' in het tekstvak Opnamenaam in.

Zie Selectoren begrijpen voor meer informatie. 1. Klik op de knop Een nieuwe opname starten . De opname wordt gestart. Op het paneel wordt Opname... weergegeven, wat aangeeft dat de opname bezig is. 1. Klik op Cappuccino om deze aan de winkelwagen toe te voegen. 1. Klik op Americano om het aan de winkelwagen toe te voegen. Merk op dat de Recorder de stappen toont die u tot nu toe hebt uitgevoerd. 1. Ga naar de winkelwagenpagina en verwijder Americano uit de winkelwagen.

1. Klik op de knop Totaal: $ 19,00 om het afrekenproces te starten. 1. Vul in het betalingsgegevensformulier de tekstvakken Naam en E-mailadres in en vink het vakje Ik wil graag orderupdates en promotieberichten ontvangen aan. selectievakje. 1. Klik op de knop Verzenden om het afrekenproces te voltooien. 1. Klik in het Recorderpaneel op Knop Opname beëindigen om de opname te beëindigen.

Speel een gebruikersstroom opnieuw af

Nadat u een gebruikersstroom hebt opgenomen, kunt u deze opnieuw afspelen door op te klikken Knop Opnieuw afspelen .

U kunt de herhaling van de gebruikersstroom op de pagina zien. De voortgang van het afspelen wordt ook weergegeven in het Recorder- paneel.

Als u tijdens het opnemen een fout hebt gemaakt of als iets niet werkt, kunt u fouten in uw gebruikersstroom opsporen : het afspelen ervan vertragen, een onderbrekingspunt instellen en het stap voor stap uitvoeren.

Simuleer een langzaam netwerk

U kunt een langzame netwerkverbinding simuleren door de Replay-instellingen te configureren. Vouw bijvoorbeeld de Replay-instellingen uit en selecteer Slow 3G in de vervolgkeuzelijst Netwerk .

In de toekomst worden mogelijk meer instellingen ondersteund. Deel met ons de herhalingsinstellingen die u graag zou willen hebben!

Meet een gebruikersstroom

U kunt de prestaties van een gebruikersstroom meten door op de knop Prestaties meten te klikken. Afrekenen is bijvoorbeeld een cruciale gebruikersstroom van een winkelwebsite. Met het Recorder- paneel kunt u het afrekenproces eenmalig vastleggen en regelmatig meten.

Als u op de knop Prestaties meten klikt, wordt eerst de gebruikersstroom opnieuw afgespeeld en wordt vervolgens de prestatietracering geopend in het paneel Prestaties .

Leer hoe u de runtimeprestaties van uw pagina kunt analyseren met het Prestatiepaneel . U kunt het selectievakje Web Vitals in het Prestatiepaneel inschakelen om de Web Vitals- statistieken te bekijken en mogelijkheden te identificeren om de browse-ervaring van uw gebruikers te verbeteren.

Stappen bewerken

Laten we de basisopties doornemen om de stappen binnen de opgenomen workflow te bewerken.

Voor een uitgebreide lijst met bewerkingsopties raadpleegt u Bewerkingsstappen in de naslaginformatie over functies.

Vouw stappen uit

Vouw elke stap uit om de details van de actie te bekijken. Vouw bijvoorbeeld de stap Klikelement 'Cappuccino' uit.

De stap hierboven toont twee selectors . Zie De selector van de opname begrijpen voor meer informatie.

Bij het opnieuw afspelen van de gebruikersstroom probeert de Recorder het element op volgorde op te vragen met een van de selectors. Als de Recorder bijvoorbeeld met succes het element met de eerste selector opvraagt, slaat hij de tweede selector over en gaat hij door naar de volgende stap.

Selectors aan een stap toevoegen en verwijderen

U kunt selectors toevoegen of verwijderen. U kunt bijvoorbeeld keuzeschakelaar #2 verwijderen omdat alleen aria/Cappuccino in dit geval voldoende is. Beweeg over selector #2 en klik op - om deze te verwijderen.

Bewerk selectors in één stap

De selector is ook bewerkbaar. Als u bijvoorbeeld Mokka wilt selecteren in plaats van Cappuccino , kunt u:

1. Bewerk in plaats daarvan de selectorwaarde naar aria/Mocha .

   

   U kunt ook op Selecteren klikken en klik vervolgens op Mokka op de pagina.

2. Speel het proces nu opnieuw af. Het zou Mokka moeten selecteren in plaats van Cappuccino .

3. Probeer andere stapeigenschappen te bewerken, zoals type , target , value en meer.

Stappen toevoegen en verwijderen

Er zijn ook opties om stappen toe te voegen en te verwijderen. Dit is handig als u een extra stap wilt toevoegen of een per ongeluk toegevoegde stap wilt verwijderen. In plaats van de gebruikersstroom opnieuw op te nemen, kunt u deze gewoon bewerken:

1. Klik met de rechtermuisknop op de stap die u wilt bewerken of klik op pictogram met drie stippen ernaast.

   

2. U kunt Stap verwijderen selecteren om deze te verwijderen. De Scroll- gebeurtenis na de Mocha- stap is bijvoorbeeld niet nodig.

3. Stel dat u wilt wachten tot de 9 koffiesoorten op de pagina worden weergegeven voordat u stappen uitvoert. In het Mokka- stapmenu selecteert u Stap vóór toevoegen .

4. Bewerk in Assert Element de nieuwe stap met de volgende details:

   • type: waitForElement
   • keuzeschakelaar #1: .cup
   • operator: == (klik op de knop Operator toevoegen )
   • aantal: 9 (klik op de knop Tel toevoegen )

5. Speel de stroom nu opnieuw af om de wijzigingen te zien.

Volgende stappen

Gefeliciteerd, je hebt de tutorial voltooid!

Als u meer functies en workflows (bijvoorbeeld importeren en exporteren) met betrekking tot de Recorder wilt verkennen, raadpleegt u de naslaginformatie over Recorder-functies .