Dai un'occhiata al nuovo riquadro Registratore (funzionalità in anteprima) e guarda il video qui sotto.
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 e modificarli e i relativi passaggi, consulta la documentazione di riferimento sulle funzionalità del 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 spiegheremo come registrare, riprodurre e controllare il 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.
- Paga.
Registra un flusso utente
- Apri questa pagina dimostrativa. Fai clic sul pulsante Avvia nuova registrazione per iniziare.
- Inserisci "caffè 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 sul pagamento, compila le caselle di testo Nome e Email e seleziona la casella di controllo Desidero ricevere aggiornamenti sugli ordini 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 di nuovo un flusso utente
Dopo aver registrato un flusso utente, puoi guardarlo di nuovo facendo clic sul pulsante 
Riproduci.
Puoi vedere la riproduzione del flusso utente nella pagina. L'avanzamento della riproduzione viene visualizzato 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 e 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 di utenti
Puoi misurare le prestazioni di un flusso utente facendo clic sul pulsante Misura il rendimento. Ad esempio, il pagamento è un flusso di utenti fondamentale in 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 la sezione Passaggi di modifica nella Guida di riferimento alle 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.
Durante la riproduzione del flusso utente, il Registratore prova a 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.
Modifica i selettori in un passaggio
Anche il selector è modificabile. Ad esempio, se vuoi selezionare Caffè macchiato 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: ora 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 pulsante destro del mouse sul passaggio da modificare o fai clic sull'icona con tre puntini
accanto a esso. 
Puoi selezionare Rimuovi passaggio per rimuoverlo. Ad esempio, l'evento Scroll dopo il passaggio Mocha non è necessario.
Supponiamo che tu voglia attendere che vengano visualizzati i 9 caffè sulla 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:
- tipo: waitForElement
- selettore 1: .cup
- operatore: == (fai clic sul pulsante Aggiungi operatore)
- numero: 9 (fai clic sul pulsante Aggiungi conteggio)
Riproduci subito il flusso per vedere le modifiche.
Passaggi successivi
Congratulazioni, hai completato il tutorial.
Per esplorare altre funzionalità e flussi di lavoro (ad esempio, importazione ed esportazione) correlati a Registratore, consulta la documentazione di riferimento sulle funzionalità di Registratore.