Dai un'occhiata al nuovo riquadro Registratore (funzionalità di anteprima) con il video riportato di seguito.
Completa questo tutorial per imparare a utilizzare il riquadro Registratore per registrare, riprodurre e misurare i flussi utente.
Per saperne di più su come condividere, modificare e modificare i flussi utente registrati, consulta la documentazione di riferimento sulle funzionalità di Registratore.
Aprire il riquadro Registratore
- Apri DevTools.
Fai clic su Altre opzioni
> Altri strumenti > Registratore.
In alternativa, utilizza il menu Comando per aprire il riquadro Registratore.
Introduzione
Utilizzeremo questa pagina demo per ordinare un caffè. Il pagamento è un flusso di utenti comune tra i siti web di shopping.
Nelle sezioni successive ti spiegheremo come registrare, riprodurre di nuovo 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.
Registrare un flusso utente
- Apri questa pagina di demo. Per iniziare, fai clic sul pulsante Avvia nuova registrazione.
- Inserisci "caffetteria" nella casella di testo Nome registrazione.
Per saperne di più, consulta Informazioni sui selettori.
1. Fai clic sul pulsante Avvia una nuova registrazione. La registrazione è iniziata. Il riquadro mostra Registrazione... per indicare che la registrazione è in corso.
1. Fai clic su Cappuccino per aggiungerlo al carrello.
1. Fai clic su Americano per aggiungerlo al carrello. Tieni presente che il Registratore mostra i passaggi che hai eseguito finora.
1. Vai alla pagina del carrello e rimuovi Americano dal carrello.
1. Fai clic sul pulsante Invia per completare la procedura di pagamento.
1. Nel riquadro Registratore, fai clic sul pulsante 
Termina registrazione per terminare la registrazione.
Riprodurre di nuovo un flusso utente
Dopo aver registrato una procedura, puoi ascoltarla di nuovo facendo clic sul pulsante 
Riproduci.
Puoi vedere la riproduzione del flusso utente sulla pagina. L'avanzamento della riproduzione viene mostrato anche nel riquadro Registratore.
Se hai fatto clic in modo 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 dopo passo.
Simula una rete lenta
Puoi simulare una connessione di rete lenta configurando le Impostazioni di riproduzione. Ad esempio, espandi Impostazioni di riproduzione, seleziona 3G lento nel menu a discesa Rete.
In futuro potrebbero essere supportate altre impostazioni. Condividi con noi le impostazioni di riproduzione che vorresti avere.
Misurare un flusso di utenti
Per misurare il rendimento di un flusso di utenti, fai 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 sola volta e misurarlo regolarmente.
Se fai clic sul pulsante Misura il rendimento, viene innanzitutto attivata una riproduzione del flusso utente e poi viene aperta l'analisi del rendimento nel riquadro Rendimento.
Scopri come analizzare le prestazioni di runtime della tua pagina con il riquadro Rendimento. Puoi attivare la casella di controllo Web Vitals nel riquadro Prestazioni per visualizzare le metriche Web Vitals e identificare opportunità per migliorare l'esperienza di navigazione degli utenti.
Modifica passaggi
Esaminiamo le opzioni di base per modificare i passaggi nel flusso di lavoro registrato.
Per un elenco completo delle opzioni di modifica, vedi Modificare i passaggi nella documentazione di riferimento sulle funzionalità.
Espandi passi
Espandi ogni passaggio per visualizzare i dettagli dell'azione. Ad esempio, espandi il passaggio Clic sull'elemento "Cappuccino".
Il passaggio precedente mostra due selettori. Per saperne di più, vedi Comprendere il selettore della registrazione.
Durante la riproduzione del flusso utente, il registratore tenta di eseguire una query sull'elemento con uno dei selettori in sequenza. Ad esempio, se il Registratore esegue una query sull'elemento con il primo selettore, salterà il secondo selettore e andrà al passaggio successivo.
Aggiungi e rimuovi i selettori da un passaggio
Puoi aggiungere o rimuovere qualsiasi selettore. Ad esempio, puoi rimuovere il selettore n. 2 perché in questo caso è sufficiente aria/Cappuccino. Passa il mouse sopra il selettore 2 e fai clic su - per rimuoverlo.
Modifica 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 ora il flusso, dovrebbe selezionare Mocha anziché Cappuccino.
Prova a modificare altre proprietà dei passaggi come type, target, value e altre ancora.
Aggiungi e rimuovi passaggi
Ci sono anche opzioni per aggiungere e rimuovere i passaggi. Questa opzione è utile se vuoi aggiungere un passaggio in più 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 al passaggio. 
Puoi selezionare Rimuovi passaggio per rimuoverlo. Ad esempio, l'evento scroll dopo il passaggio Mocha non è necessario.
Supponiamo che tu voglia attendere che i 9 caffè vengano visualizzati nella pagina prima di eseguire qualsiasi passaggio. Nel menu del passaggio Mocha, seleziona Aggiungi passaggio prima.
In Dichiara elemento, modifica il nuovo passaggio con i seguenti dettagli:
- type: waitForElement
- selettore n° 1: .cup
- operatore: == (fai clic sul pulsante Aggiungi operatore)
- conteggio: 9 (fai clic sul pulsante Aggiungi conteggio)
Riproduci ora il flusso per vedere le modifiche.
Passaggi successivi
Congratulazioni, hai completato il tutorial.
Per esplorare altri flussi di lavoro e funzionalità (ad esempio, importazione ed esportazione) correlati al Registratore, consulta la documentazione di riferimento sulle funzionalità di Registratore.