Dai un'occhiata al nuovo riquadro Registratore (funzionalità di anteprima) nel video di seguito.
Completa questo tutorial per scoprire come utilizzare il riquadro Registratore per registrare, riprodurre e misurare i flussi utente.
Per ulteriori informazioni su come condividere i flussi utente registrati, modificarli e modificarne i passaggi, consulta la documentazione di riferimento delle funzionalità di Registratore.
Apri il riquadro Registratore
- Apri DevTools.
Fai clic su Altre opzioni
> Altri strumenti > Registratore.
In alternativa, utilizza il menu dei comandi per aprire il riquadro Registratore.
Introduzione
Utilizzeremo questa pagina demo di ordinazione di caffè. Il pagamento è un flusso utente comune tra i siti web di shopping.
Nelle sezioni successive, ti guideremo nella procedura di registrazione, riproduzione e controllo del seguente flusso di pagamento con il riquadro Registratore:
- Aggiungi un caffè al carrello.
- Aggiungi un altro caffè al carrello.
- Vai alla pagina del carrello.
- Rimuovi un caffè dal carrello.
- Avvia la procedura di pagamento.
- Inserisci i dati di pagamento.
- Pagare alla cassa.
Registra un flusso utente
- Apri questa pagina demo. Fai clic sul pulsante Avvia nuova registrazione per iniziare.
- Inserisci "coffee checkout" nella casella di testo Nome registrazione.
- Fai clic sul pulsante Avvia una nuova registrazione. La registrazione è iniziata. Nel riquadro viene visualizzato il messaggio Registrazione…, che indica che la registrazione è in corso.
- Fai clic su Cappuccino per aggiungerlo al carrello.
- Fai clic su Americano per aggiungerlo al carrello. Tieni presente che lo strumento Registratore mostra i passaggi che hai eseguito finora.
- Vai alla pagina del carrello e rimuovi Americano dal carrello.
- Fai clic sul pulsante Totale: 19,00 $ per avviare la procedura di pagamento.
- Nel modulo dei dettagli di pagamento, compila le caselle di testo Nome e Email e seleziona la casella di controllo Vorrei ricevere aggiornamenti sull'ordine e messaggi promozionali.
- Fai clic sul pulsante Invia per completare la procedura di pagamento.
- Nel riquadro Registratore, fai clic sul pulsante
Termina registrazione per terminare la registrazione.
Riprodurre nuovamente una procedura
Dopo aver registrato un flusso utente, puoi riprodurlo facendo clic sul pulsante 
Riproduci.
Puoi vedere la riproduzione del flusso utente nella pagina. L'avanzamento della riproduzione viene mostrato anche nel riquadro Registratore.
Se hai fatto un clic errato durante la registrazione o qualcosa non funziona, puoi eseguire il debug del flusso utente: rallenta la riproduzione, imposta un punto di interruzione ed eseguilo passo passo.
Simula una rete lenta
Puoi simulare una connessione di rete lenta configurando le Impostazioni di riproduzione. Ad esempio, espandi le Impostazioni di riproduzione, seleziona 3G lento nel menu a discesa Rete.
In futuro potrebbero essere supportate altre impostazioni. Condividi con noi le impostazioni di replay che vorresti avere.
Misurare un flusso utente
Puoi misurare il rendimento di un flusso utente facendo clic sul pulsante Misura il rendimento. Ad esempio, il pagamento è un flusso utente critico di un sito web di shopping. Con il riquadro Registratore, puoi registrare il flusso di pagamento una volta e misurarlo regolarmente.
Se fai clic sul pulsante Misura il rendimento, viene prima attivata la riproduzione del flusso utente, quindi viene aperta la traccia del rendimento nel riquadro Rendimento.
Scopri come analizzare il rendimento in fase di esecuzione della pagina con il riquadro Rendimento. Puoi attivare la casella di controllo Web Vitals nel riquadro Rendimento per visualizzare le metriche Web Vitals e identificare le opportunità per migliorare l'esperienza di navigazione degli utenti.
Modificare i passaggi
Vediamo le opzioni di base per modificare i passaggi all'interno del flusso di lavoro registrato.
Per un elenco completo delle opzioni di modifica, consulta Modificare i passaggi nella documentazione di riferimento delle funzionalità.
Espandi passi
Espandi ogni passaggio per visualizzare i dettagli dell'azione. Ad esempio, espandi il passaggio Fai clic sull'elemento "Cappuccino".
Il passaggio precedente mostra due selettori. Per ulteriori informazioni, vedi Informazioni sul selettore della registrazione.
Quando riproduci il flusso utente, lo strumento Registratore tenta di eseguire una query sull'elemento con uno dei selettori in base alla sequenza. Ad esempio, se lo strumento Registratore esegue una query sull'elemento con il primo selettore, salta il secondo selettore e passa al passaggio successivo.
Aggiungere e rimuovere selettori da un passaggio
Puoi aggiungere o rimuovere i selettori. Ad esempio, puoi rimuovere il selettore 2 perché in questo caso è sufficiente aria/Cappuccino. Passa il mouse sopra il selettore 2 e fai clic su - per rimuoverlo.
Modificare i selettori in un passaggio
Anche il selettore è modificabile. Ad esempio, se vuoi selezionare Mocha anziché Cappuccino, puoi:
Modifica il valore del selettore in aria/Mocha.
In alternativa, fai clic sul pulsante Seleziona
e poi su Mocha nella pagina.Riproduci di nuovo il flusso: dovrebbe essere selezionato Mocha anziché Cappuccino.
Prova a modificare altre proprietà del passaggio, come type, target, value e altre ancora.
Aggiungere e rimuovere passaggi
Esistono anche opzioni per aggiungere e rimuovere i passaggi. Questa opzione è utile se vuoi aggiungere un passaggio aggiuntivo o rimuovere un passaggio aggiunto per errore. Anziché registrare di nuovo il flusso utente, puoi semplicemente modificarlo:
Fai clic con il tasto destro del mouse sul passaggio da modificare o sull'icona con tre puntini
accanto. 
Puoi selezionare Rimuovi passaggio per rimuoverlo. Ad esempio, l'evento Scroll dopo il passaggio Mocha non è necessario.
Supponiamo che tu voglia aspettare che i 9 caffè vengano visualizzati nella pagina prima di eseguire qualsiasi passaggio. Nel menu del passaggio Mocha, seleziona Aggiungi passaggio prima.
In Elemento assert, modifica il nuovo passaggio con i seguenti dettagli:
- type: waitForElement
- selettore 1: .cup
- operatore: == (fai clic sul pulsante Aggiungi operatore)
- count: 9 (fai clic sul pulsante Aggiungi conteggio)
Riproduci subito il flusso per vedere le modifiche.
Passaggi successivi
Congratulazioni, hai completato il tutorial.
Per scoprire altre funzionalità e altri flussi di lavoro (ad esempio importazione ed esportazione) relativi a Registratore, consulta la documentazione di riferimento sulle funzionalità di Registratore.