1. Introduzione
Usa il riquadro Recorder per registrare, riprodurre e misurare le procedure.
Dai un'occhiata al nuovo riquadro Recorder (funzionalità di anteprima) con il video qui sotto.
Cosa scoprirai
- Registrare una procedura
- Riprodurre di nuovo un flusso utente
- Modificare un flusso utente
- Misurare una procedura
Che cosa ti serve
- Un computer funzionante e un Wi-Fi realistico
- Chrome 101 e versioni successive.
2. Apri il riquadro Recorder
Apri il riquadro Recorder con i seguenti passaggi
- Apri DevTools.
- Fai clic su Altre opzioni > Altri strumenti > Recorder.
In alternativa, utilizza il menu di comando per aprire il riquadro Recorder. 
3. Inizia
Utilizzeremo questa pagina demo per le ordinazioni di caffè. Google Checkout è un flusso di utenti comune tra i siti web di shopping.
Nelle sezioni successive, ti mostreremo come registrare, riprodurre e misurare il seguente flusso di pagamento con il riquadro Recorder:
- 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 dettagli di pagamento.
- Effettuare il pagamento.
4. Registrare una procedura
- Apri la pagina demo. Fai clic sul pulsante Avvia nuova registrazione per iniziare.
- Inserisci "checkout caffè" nella casella di testo Nome registrazione.
- Fai clic sul pulsante Avvia una nuova registrazione. La registrazione è iniziata. Il riquadro mostra la registrazione..., a indicare che la registrazione è in corso.
- Fai clic su Cappuccino per aggiungerlo al carrello.
- Fai clic su Americano per aggiungerla al carrello. Nota che il Recorder mostra i passaggi che hai eseguito finora.
- Vai alla pagina del carrello.
- 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, quindi seleziona la casella di controllo Vorrei ricevere aggiornamenti sugli ordini e messaggi promozionali.
- Fai clic sul pulsante Invia per completare la procedura di pagamento.
- Nel riquadro Recorder. Fai clic sul pulsante Termina registrazione per terminare la registrazione.
5. Riprodurre di nuovo un flusso utente
Dopo aver registrato un flusso utente, puoi riprodurlo facendo clic sul pulsante Ripeti.
Puoi vedere la replica del flusso utente sulla pagina. L'avanzamento della riproduzione viene mostrato anche nel riquadro Recorder.
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. 
Puoi impostare un timeout più lungo anche per tutti i passaggi.
In futuro potrebbero essere supportate altre impostazioni. Condividi con noi le impostazioni di replica che vorresti avere.
6. Misurare una procedura
Puoi misurare il rendimento di un flusso utente facendo clic sul pulsante Misura il rendimento. Ad esempio, il pagamento è un flusso di utenti fondamentale di un sito web di shopping. Con il riquadro Recorder puoi registrare il flusso di pagamento una sola volta e misurarlo regolarmente.
Se fai clic sul pulsante Misura il rendimento, viene attivata prima una riproduzione del flusso utente e poi viene visualizzata la traccia 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 Segnali web nel riquadro Rendimento, per visualizzare le metriche Segnali web, nonché identificare opportunità per migliorare l'esperienza di navigazione degli utenti.
7. Modificare le procedure
Esaminiamo le opzioni per modificare le procedure.
Nella parte superiore del riquadro Recorder sono disponibili alcune opzioni per:
- Aggiungi una nuova registrazione. Fai clic sull'icona + per aggiungere una nuova registrazione.
- Visualizza tutte le registrazioni. Il menu a discesa mostra l'elenco delle registrazioni salvate. Seleziona l'opzione [numero] registrazioni per espandere e gestire l'elenco delle registrazioni salvate.
- Esporta una registrazione. Puoi esportare il flusso utente come script Puppeteer per personalizzare ulteriormente lo script.
- Eliminare una registrazione. Elimina la registrazione selezionata.
Puoi anche modificare il nome della registrazione facendo clic sul pulsante di modifica accanto al nome.
8. Modificare i passaggi
Esaminiamo le opzioni per modificare i passaggi all'interno di un flusso di lavoro.
Espandi passi
- Espandi ogni passaggio per visualizzare i dettagli dell'azione. Ad esempio, espandi il elemento Click "Cappuccino&brit; passaggio.
- Il passaggio precedente mostra due selettori. Per ulteriori informazioni, consulta la sezione Priorità del selettore. Quando riproduci di nuovo il flusso utente, il recorder tenta di eseguire query sull'elemento con uno dei selettori in base alla sequenza. Ad esempio, se il recorder esegue una query sull'elemento con il primo selettore, salterà il secondo selettore e andrà al passaggio successivo.
- Puoi aggiungere o rimuovere i selettori. Ad esempio, puoi rimuovere il selettore n. 2 perché in questo caso è sufficiente solo
aria/Cappuccino. Passa il mouse sopra il selettore n. 2 e fai clic su - per rimuoverlo.
- Anche il selettore è modificabile. Ad esempio, se vuoi selezionare Mocha invece di Cappuccino, puoi modificare il valore del selettore impostandolo su aria/Mocha.
In alternativa, fai clic sul pulsante Seleziona e poi su Mocha nella pagina. - Riproduci di nuovo il flusso ora, dovrebbe selezionare Mocha invece di Cappuccino.
- Prova a modificare altre proprietà del passaggio come type, target, value e altro.
Aggiungere e rimuovere passaggi
Sono inoltre disponibili opzioni per aggiungere e rimuovere passaggi. Questa operazione è utile se vuoi aggiungere un passaggio aggiuntivo o rimuovere un passaggio aggiunto accidentalmente. Invece di registrare di nuovo il flusso dell'utente, puoi semplicemente modificarlo. Fai clic sul menu kebab con tre puntini accanto al passaggio per aprirlo.
- Ad esempio, l'evento Scorri dopo il passaggio Mocha non è necessario. Puoi selezionare Rimuovi passaggio per rimuoverlo.
- Prima di eseguire qualsiasi passaggio, attendi fino a 9 caffè sulla pagina.
- Nel menu del passaggio Mocha, seleziona Aggiungi passaggio prima.
- In Rivendica elemento, modifica il nuovo passaggio con i seguenti dettagli:
- tipo: waitForElement
- Selettore n. 1: .cup
- operatore: == (fai clic sul pulsante aggiungi operatore)
- conteggio: 9 (fai clic sul pulsante Aggiungi numero)
- Riproduci di nuovo il flusso per vedere le modifiche.
9. Complimenti!
Complimenti. Hai completato questo codelab.
A proposito, puoi anche personalizzare il selettore per le registrazioni. Per saperne di più, consulta la nostra documentazione.