Scopri come condividere i flussi utente, modificarli e i relativi passaggi in questo riferimento completo sulle funzionalità del riquadro Recorder di Chrome DevTools.
Per apprendere le nozioni di base sull'utilizzo del riquadro Registratore, consulta Registrare, riprodurre e misurare i flussi utente.
Impara e personalizza le scorciatoie
Utilizza le scorciatoie per navigare più velocemente in Registratore. Per un elenco delle scorciatoie predefinite, vedi Scorciatoie da tastiera nel pannello Registratore.
Per aprire un suggerimento che elenca tutte le scorciatoie direttamente nel Registratore, fai clic su Mostra scorciatoie nell'angolo in alto a destra.
Per personalizzare le scorciatoie di Registratore:
- Apri Impostazioni > Scorciatoie.
- Scorri verso il basso fino alla sezione Registratore.
- Segui i passaggi in Personalizzare le scorciatoie.
Modificare le procedure
Nella parte superiore del riquadro Registratore sono disponibili 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/i per espandere e gestire l'elenco delle registrazioni salvate.
Esporta una registrazione. Per personalizzare ulteriormente lo script o condividerlo per scopi di segnalazione di bug, puoi esportare la procedura in uno dei seguenti formati:
- JSON.
- Script @puppeteer/replay.
- [Puppeteer](/docs/puppeteer/ script.
- Puppeteer (inclusa l'analisi Lighthouse).
Per ulteriori informazioni sui formati, vedi Esportare un flusso di utenti.
Importare una registrazione. Solo in formato JSON.
Eliminare una registrazione. Elimina la registrazione selezionata.
Puoi anche modificare il nome della registrazione facendo clic sul pulsante di modifica accanto alla registrazione.
Condividi le procedure
Puoi esportare e importare i flussi utente in Registratore. Questo è utile per la segnalazione di bug, perché puoi condividere un record esatto dei passaggi che riproducono un bug. Puoi anche esportarlo e guardarlo di nuovo con librerie esterne.
Esportare un flusso utente
Per esportare un flusso utente:
- Apri il flusso utente da esportare.
- Fai clic su Esporta nella parte superiore del riquadro Registratore.
- Seleziona uno dei seguenti formati dall'elenco a discesa:
- File JSON. Scarica la registrazione come file JSON.
- @puppeteer/replay. Scarica la registrazione come script Puppeteer Replay.
- Bicchierino. Scarica la registrazione come script Puppeteer.
- Puppeteer (compresa l'analisi Lighthouse). Scarica la registrazione come script Puppeteer con un'analisi Lighthouse incorporata.
- Una o più opzioni fornite dalla sezione Esporta estensioni dell'app Registratore.
- Salva il file.
Con ogni opzione di esportazione predefinita, puoi effettuare le seguenti operazioni:
- JSON. Modifica l'oggetto JSON leggibile e import di nuovo il file JSON nel Recorder.
- @puppeteer/replay. Riproduci di nuovo lo script con la raccolta Puppeteer Replay. Quando esporti come script @puppeteer/replay, i passaggi rimangono un oggetto JSON. Questa opzione è perfetta se vuoi eseguire l'integrazione con la tua pipeline CI/CD, ma hai comunque la flessibilità di modificare i passaggi come JSON, poi convertirli e importarli di nuovo nel Recorder.
- Script Puuppeteer. Guarda di nuovo lo script con Puppeteer. Poiché i passaggi vengono convertiti in JavaScript, puoi avere una personalizzazione più granulare, ad esempio il loop dei passaggi. Tieni presente che non puoi importare di nuovo questo script nel Registratore.
Puppeteer (compresa l'analisi Lighthouse). Questa opzione di esportazione è uguale a quella precedente, ma include codice che genera un'analisi Lighthouse.
Esegui lo script e controlla l'output in un file
flow.report.html
:# npm i puppeteer lighthouse node your_export.js
Esporta in formato personalizzato installando un'estensione
Vedi Estensioni Registratore.
Importare un flusso utente
Per importare un flusso utente:
- Fai clic sul pulsante Importa nella parte superiore del riquadro Registratore.
- Seleziona il file JSON con il flusso utente registrato.
- Fai clic sul pulsante Riproduci per eseguire il flusso utente importato.
Riproduci di nuovo con librerie esterne
Puppeteer Replay è una libreria open source gestita dal team di Chrome DevTools. Si basa su Puppeteer. È uno strumento a riga di comando con cui puoi riprodurre i file JSON.
A parte questo, puoi trasformare e riprodurre di nuovo i file JSON con le seguenti librerie di terze parti.
Trasforma i flussi utente JSON in script personalizzati:
- Registratore di Chrome Cypress. Puoi utilizzarlo per convertire i file JSON del flusso utente in script di test Cypress. Guarda questa demo per vederla in azione.
- Registratore di Chrome per la modalità Notte. Puoi utilizzarlo per convertire i file JSON del flusso utente in script per il test di Nightwatch.
- Registratore di Chrome CodeceptJS. Puoi utilizzarlo per convertire i file JSON del flusso utente in script di test CodeceptJS.
Riproduci di nuovo i flussi utente JSON:
- Gioca di nuovo con Testcaffè. Puoi utilizzare TestCafe per riprodurre di nuovo i file JSON dei flussi utente e generare report di test per queste registrazioni.
- Guarda di nuovo con Sauce Labs. Puoi riprodurre di nuovo i file JSON su Sauce Labs utilizzando saucectl.
Esegui il debug dei flussi utente
Come per qualsiasi codice, a volte è necessario eseguire il debug dei flussi utente registrati.
Per aiutarti a eseguire il debug, il riquadro Registratore ti consente di rallentare le riproduzioni, impostare i punti di interruzione, eseguire le fasi dell'esecuzione e controllare il codice in vari formati contemporaneamente ai passaggi.
Rallenta la riproduzione
Per impostazione predefinita, il Registratore riproduce nuovamente il flusso utente il più velocemente possibile. Per capire cosa succede nella registrazione, puoi diminuire la velocità di riproduzione:
- Apri il menu a discesa Riproduci.
- Scegli una delle opzioni relative alla velocità di riproduzione:
- Normale (predefinita)
- Lento
- Molto lento
- Estremamente lenta
Ispeziona codice
Per esaminare il codice di una procedura in vari formati:
- Apri una registrazione nel riquadro Registratore.
- Fai clic su Mostra codice nell'angolo in alto a destra dell'elenco dei passaggi.
- Il Registratore mostra una vista affiancata dei passaggi e del relativo codice.
- Quando passi il mouse sopra un passaggio, il Registratore evidenzia il rispettivo codice in qualsiasi formato, inclusi quelli forniti dalle estensioni.
Espandi l'elenco a discesa dei formati per selezionare un formato da utilizzare per esportare i flussi di utenti.
Può essere uno dei tre formati predefiniti (JSON, @puppeteer/replay, script Puppeteer oppure un formato fornito da un'estensione).
Procedi con il debug della registrazione modificando i parametri e i valori dei passaggi. La Vista codice non è modificabile, ma si aggiorna di conseguenza man mano che apporti le modifiche ai passaggi sulla sinistra.
Imposta i punti di interruzione ed esegui passo passo
Per impostare un punto di interruzione ed eseguire passo passo:
- Passa il mouse sopra il cerchio accanto a un passaggio qualsiasi di una registrazione. Il cerchio si trasforma in un'icona del punto di interruzione .
- Fai clic sull'icona del punto di interruzione e riproduci la registrazione. Le esecuzioni vengono interrotte nel punto di interruzione.
- Per eseguire l'esecuzione, fai clic sul pulsante Esegui un passaggio nella barra delle azioni nella parte superiore del riquadro Registratore.
- Per interrompere la riproduzione, fai clic su Annulla riproduzione.
Modifica passaggi
Puoi modificare qualsiasi passaggio della registrazione facendo clic sul pulsante accanto, durante e dopo la registrazione.
Puoi anche aggiungere i passaggi mancanti e rimuovere quelli registrati accidentalmente.
Aggiungi passaggi
A volte potrebbe essere necessario aggiungere i passaggi manualmente. Ad esempio, il Registratore non acquisisce automaticamente gli eventi hover
perché ciò inquina la registrazione e non tutti questi eventi sono utili. Tuttavia, gli elementi dell'interfaccia utente come i menu a discesa possono essere visualizzati solo su hover
. Puoi aggiungere manualmente hover
passaggi alle procedure che dipendono da questi elementi.
Per aggiungere manualmente un passaggio:
- Apri questa pagina demo e avvia una nuova registrazione.
- Passa il mouse sopra l'elemento nell'area visibile. Viene visualizzato un menu azione.
- Seleziona un'azione dal menu e termina la registrazione. Il Registratore acquisisce solo l'evento di clic.
- Prova a riprodurre la registrazione facendo clic su Riproduci. La riproduzione non riesce dopo un timeout perché il Registratore non può accedere all'elemento nel menu.
- Fai clic sul pulsante con tre puntini accanto al passaggio Fai clic e seleziona Aggiungi passaggio prima.
- Espandi il nuovo passaggio. Per impostazione predefinita, è di tipo
waitForElement
. Fai clic sul valore accanto atype
e selezionahover
. - Quindi, imposta un selettore appropriato per il nuovo passaggio. Fai clic su Seleziona, poi fai clic su un'area dell'elemento
Hover over me!
esterna al menu popup. Il selettore è impostato su#clickable
. - Prova a riprodurre di nuovo la registrazione. Dopo aver aggiunto il passaggio di passaggio del mouse, il Registratore riproduce nuovamente il flusso.
Aggiungi asserzioni
Durante la registrazione, puoi rivendicare, ad esempio, attributi HTML e proprietà JavaScript. Per aggiungere un'asserzione:
- Avvia una registrazione, ad esempio, in questa pagina demo.
Fai clic su Aggiungi asserzione.
Il Registratore crea un passaggio
waitForElement
configurabile.Specifica i selettori per questo passaggio.
Configura il passaggio, ma non modificare il tipo
waitForElement
. Ad esempio, puoi specificare:- Attributo HTML. Fai clic su Aggiungi attributi e digita il nome e il valore dell'attributo utilizzato dagli elementi di questa pagina. Ad esempio:
data-test: <value>
. - Proprietà JavaScript. Fai clic su Aggiungi proprietà e digita il nome e il valore della proprietà in formato JSON. Ad esempio:
{".innerText":"<text>"}
. - Altre proprietà del passaggio: Ad esempio,
visible: true
.
- Attributo HTML. Fai clic su Aggiungi attributi e digita il nome e il valore dell'attributo utilizzato dagli elementi di questa pagina. Ad esempio:
Procedi alla registrazione del resto del flusso utente e poi interrompi la registrazione.
Fai clic su Riproduci. Se un'asserzione non va a buon fine, il Registratore mostra un errore dopo un timeout.
Guarda il video che segue per vedere la procedura di questo flusso di lavoro.
Copia passaggi
Anziché esportare l'intero flusso utente, puoi copiare un singolo passaggio negli appunti:
- Fai clic con il pulsante destro del mouse sul passaggio da copiare o fai clic sull'icona con tre puntini accanto al passaggio.
- Nel menu a discesa, seleziona una delle opzioni Copia come ....
Puoi copiare i passaggi in vari formati: JSON, Puppeteer, @puppeteer/replay e quelli forniti dalle estensioni.
Rimuovi passaggi
Per rimuovere un passaggio registrato per errore, fai clic con il tasto destro del mouse sul passaggio oppure fai clic sull'icona con tre puntini accanto al passaggio e seleziona Rimuovi passaggio.
Inoltre, il Registratore aggiunge automaticamente due passaggi separati all'inizio di ogni registrazione:
- Imposta l'area visibile. Consente di controllare le dimensioni, il ridimensionamento e altre proprietà dell'area visibile.
- Naviga. Imposta l'URL e aggiorna automaticamente la pagina a ogni riproduzione.
Per eseguire l'automazione in-page senza ricaricare la pagina, rimuovi il passaggio di navigazione come descritto sopra.
Configura i passaggi
Per configurare un passaggio:
Specifica il tipo:
click
,doubleClick
,hover
, (input)change
,keyUp
,keyDown
,scroll
,close
,navigate
(a una pagina),waitForElement
,waitForExpression
osetViewport
.Altre proprietà dipendono dal valore
type
.Specifica le proprietà obbligatorie sotto
type
.Fai clic sui pulsanti corrispondenti per aggiungere proprietà facoltative specifiche del tipo e specificarle.
Per un elenco delle proprietà disponibili, consulta Proprietà dei passaggi.
Per rimuovere una proprietà facoltativa, fai clic sul pulsante Rimuovi accanto alla proprietà.
Per aggiungere o rimuovere un elemento da o verso una proprietà array, fai clic sui pulsanti + o - accanto all'elemento.
Proprietà passaggio
Ogni passaggio può avere le seguenti proprietà facoltative:
target
: un URL per la destinazione Chrome DevTools Protocol (CDP), la parola chiavemain
predefinita si riferisce alla pagina corrente.assertedEvents
che al momento può essere un solo eventonavigation
Altre proprietà comuni disponibili per la maggior parte dei tipi di passaggi sono:
frame
: un array di indici in base zero che identifica un iframe che può essere nidificato. Ad esempio, puoi identificare il primo (0) iframe all'interno di un secondo (1) iframe del target principale come[1, 0]
.timeout
: numero di millisecondi di attesa prima di eseguire un passaggio. Per saperne di più, consulta Regolare i timeout per i passaggi.selectors
: un array di selettori. Per saperne di più, consulta Informazioni sui selettori.
Le proprietà specifiche per tipo sono:
Tipo | Proprietà | Obbligatorio | Descrizione |
click doubleClick |
offsetX offsetY |
Rispetto all'angolo in alto a sinistra della casella dei contenuti dell'elemento, in pixel | |
click doubleClick |
button |
Pulsante del puntatore: primario | ausiliario | secondo | indietro | avanti | |
change |
value |
Valore finale | |
keyDown keyUp |
key |
Nome chiave | |
scroll |
x y |
Posizioni di scorrimento assolute X e Y in pixel, valore predefinito 0 | |
navigate |
url |
URL di destinazione | |
waitForElement |
operator |
>= | == (valore predefinito) | <= | |
waitForElement |
count |
Numero di elementi identificati da un selettore | |
waitForElement |
attributes |
Attributo HTML e il relativo valore | |
waitForElement |
properties |
proprietà JavaScript e il relativo valore in JSON | |
waitForElement |
visible |
Booleano. True se l'elemento si trova nel DOM ed è visibile (non ha display: none o visibility: hidden ) |
|
waitForElement waitForExpression |
asserted events |
Al momento, solo type: navigation ma puoi specificare il titolo e l'URL |
|
waitForElement waitForExpression |
timeout |
Tempo massimo di attesa in millisecondi | |
waitForExpression |
expression |
Espressione JavaScript che si risolve in true | |
setViewport |
width height |
Larghezza e altezza dell'area visibile in pixel | |
setViewport |
deviceScaleFactor |
Simile al rapporto pixel del dispositivo (DPR), predefinito 1 | |
setViewport |
isMobile hasTouch isLandscape |
Flag booleani che specificano se: |
Esistono due proprietà che mettono in pausa la riproduzione:
La proprietà
waitForElement
attende il passaggio per la presenza (o assenza) di una serie di elementi identificati da un selettore. Ad esempio, il passaggio seguente attende che nella pagina siano presenti meno di tre elementi corrispondenti al selettore.my-class
."type": "waitForElement", "selectors": [".my-class"], "operator": "<=", "count": 2,
La proprietà
waitForExpression
lascia il passaggio in attesa che un'espressione JavaScript venga risolta su true. Ad esempio, il passaggio successivo viene messo in pausa per due secondi e poi diventa true per consentire la riproduzione continua."type": "waitForExpression", "expression": "new Promise(resolve => setTimeout(() => resolve(true), 2000))",
Regola i timeout per i passi
Se la tua pagina presenta richieste di rete lente o animazioni lunghe, la riproduzione può non riuscire per i passaggi che superano il timeout predefinito di 5000
millisecondi.
Per evitare questo problema, puoi modificare il timeout predefinito per ogni passaggio contemporaneamente o impostare timeout separati per passaggi specifici. I timeout relativi a passaggi specifici sovrascrivono il valore predefinito.
Per modificare il timeout predefinito per ogni passaggio contemporaneamente:
Fai clic su Impostazioni di riproduzione per rendere modificabile la casella Timeout.
Nella casella Timeout, imposta il valore di timeout in millisecondi.
Fai clic su Riproduci per vedere in azione il timeout predefinito modificato.
Per sovrascrivere il timeout predefinito in un passaggio specifico:
Espandi il passaggio e fai clic su Aggiungi timeout.
Fai clic su
timeout: <value>
e imposta il valore in millisecondi.Fai clic su Riproduci per vedere il passaggio con il timeout in azione.
Per rimuovere la sovrascrittura di timeout su un passaggio, fai clic sul pulsante Elimina accanto al passaggio in questione.
Informazioni sui selettori
Quando avvii una nuova registrazione, puoi configurare quanto segue:
- Nella casella di testo Attributo selettore, inserisci un attributo di test personalizzato. Il Registratore utilizzerà questo attributo per rilevare i selettori anziché un elenco di attributi comuni di test.
Nell'insieme di caselle di controllo Tipi di selettori da registrare, scegli i tipi di selettori da rilevare automaticamente:
- CSS. Selettori sintattici.
- ARIA. Selettori semantici.
- Testo. Selettori con il testo univoco più breve, se disponibile.
- XPath. Selettori che utilizzano il linguaggio percorso XML.
- Pezzo. Selettori simili a quelli CSS, ma che possono forare le ombre nel DOM.
Selettori di test comuni
Per le pagine web semplici, gli attributi id
e gli attributi CSS class
sono sufficienti per consentire al Registratore di rilevare i selettori. Tuttavia, questo potrebbe non essere sempre così perché:
- Le pagine web potrebbero utilizzare classi dinamiche o ID che cambiano.
- I selettori potrebbero non funzionare a causa di modifiche al codice o al framework.
Ad esempio, i valori CSS class
potrebbero essere generati automaticamente per applicazioni sviluppate con framework JavaScript moderni (come React, Angular, Vue) e framework CSS.
In questi casi, puoi utilizzare gli attributi data-*
per creare test più resilienti. Esistono già alcuni selettori data-*
comuni che gli sviluppatori utilizzano per l'automazione. Sono supportati anche dal Registratore.
Se sul tuo sito web sono definiti i seguenti selettori di test comuni, il Registratore li rileva e li utilizza automaticamente per primi:
data-testid
data-test
data-qa
data-cy
data-test-id
data-qa-id
data-testing
Ad esempio, controlla l'elemento "Cappuccino" in questa pagina demo e osserva gli attributi di test:
Registra un clic su "Cappuccino", espandi il passaggio corrispondente nella registrazione e controlla i selettori rilevati:
Personalizza il selettore della registrazione
Puoi personalizzare il selettore di una registrazione se i selettori di test comuni non funzionano.
Ad esempio, questa pagina demo utilizza l'attributo data-automate
come selettore. Avvia una nuova registrazione e inserisci data-automate
come attributo del selettore.
Inserisci un indirizzo email e osserva il valore del selettore ([data-automate=email-address]
).
Priorità selettore
Il Registratore cerca i selettori nel seguente ordine, a seconda che tu abbia specificato un attributo selettore CSS personalizzato:
- Se specificato:
- Selettore CSS con il tuo attributo CSS personalizzato.
- Selettori XPath.
- Selettore ARIA, se trovato.
- Un selettore con il testo univoco più breve, se trovato.
- Se non specificato:
- Selettore ARIA, se trovato.
- Selettori CSS con la seguente priorità:
- Gli attributi più comuni utilizzati per i test:
data-testid
data-test
data-qa
data-cy
data-test-id
data-qa-id
data-testing
- Attributi ID, ad esempio
<div id="some_ID">
. - Selettori CSS normali.
- Gli attributi più comuni utilizzati per i test:
- Selettori XPath.
- Pierce selettori.
- Un selettore con il testo univoco più breve, se trovato.
Possono esserci più selettori CSS, XPath e Pierce regolari. Il Registratore acquisisce:
- Selettori CSS e XPath normali a ogni livello principale, ovvero host shadow nidificati, se presenti.
- Pierce selettori che sono univoci tra tutti gli elementi all'interno di tutte le radici ombra.