Informazioni di riferimento sulle funzionalità

Sofia Emelianova

Jecelyn Yeen

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:

1. Apri Impostazioni > Scorciatoie.
2. Scorri verso il basso fino alla sezione Registratore.
3. Segui i passaggi in Personalizzare le scorciatoie.

Modificare le procedure

Nella parte superiore del riquadro Registratore sono disponibili opzioni per:

1. Aggiungi una nuova registrazione. Fai clic sull'icona + per aggiungere una nuova registrazione.
2. 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.

3. 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.

4. Importare una registrazione. Solo in formato JSON.

5. 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:

1. Apri il flusso utente da esportare.
2. Fai clic su Esporta nella parte superiore del riquadro Registratore.
3. 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.
4. 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:

1. Fai clic sul pulsante Importa nella parte superiore del riquadro Registratore.
2. Seleziona il file JSON con il flusso utente registrato.
3. 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.

Punto chiave: Caso d'uso avanzato: integrazione con la libreria di Puppeteer Replay Come per le librerie di terze parti indicate sopra, puoi anche creare la tua raccolta oltre a Puppeteer Replay. La libreria di Puppeteer Replay consente di personalizzare la modalità di esecuzione di una registrazione e "stringere" i file JSON dei flussi utente, ovvero convertirli in qualcos'altro.

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:

1. Apri il menu a discesa Riproduci.
2. Scegli una delle opzioni relative alla velocità di riproduzione:
   • Normale (predefinita)
   • Lento
   • Molto lento
   • Estremamente lenta

Punto chiave: puoi utilizzare queste opzioni di riproduzione lenta solo nel Registratore. Per aggiungere timeout alla registrazione, vedi Regolare i timeout per i passaggi.

Ispeziona codice

Per esaminare il codice di una procedura in vari formati:

1. Apri una registrazione nel riquadro Registratore.
2. Fai clic su Mostra codice nell'angolo in alto a destra dell'elenco dei passaggi.
3. Il Registratore mostra una vista affiancata dei passaggi e del relativo codice.
4. Quando passi il mouse sopra un passaggio, il Registratore evidenzia il rispettivo codice in qualsiasi formato, inclusi quelli forniti dalle estensioni.

5. 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).

6. 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:

1. 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 .
2. Fai clic sull'icona del punto di interruzione e riproduci la registrazione. Le esecuzioni vengono interrotte nel punto di interruzione.
3. Per eseguire l'esecuzione, fai clic sul pulsante Esegui un passaggio nella barra delle azioni nella parte superiore del riquadro Registratore.
4. 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:

1. Apri questa pagina demo e avvia una nuova registrazione.
2. Passa il mouse sopra l'elemento nell'area visibile. Viene visualizzato un menu azione.
3. Seleziona un'azione dal menu e termina la registrazione. Il Registratore acquisisce solo l'evento di clic.
4. 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.
5. Fai clic sul pulsante con tre puntini accanto al passaggio Fai clic e seleziona Aggiungi passaggio prima.
6. Espandi il nuovo passaggio. Per impostazione predefinita, è di tipo waitForElement. Fai clic sul valore accanto a type e seleziona hover.
7. 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.
8. 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:

1. Avvia una registrazione, ad esempio, in questa pagina demo.

2. Fai clic su Aggiungi asserzione.

   

   Il Registratore crea un passaggio waitForElement configurabile.

3. Specifica i selettori per questo passaggio.

4. 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.

5. Procedi alla registrazione del resto del flusso utente e poi interrompi la registrazione.

6. 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:

1. Fai clic con il pulsante destro del mouse sul passaggio da copiare o fai clic sull'icona con tre puntini accanto al passaggio.
2. 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:

1. Specifica il tipo: click, doubleClick, hover, (input) change, keyUp, keyDown, scroll, close, navigate (a una pagina), waitForElement, waitForExpression o setViewport.

   Altre proprietà dipendono dal valore type.

2. Specifica le proprietà obbligatorie sotto type.

   

3. 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 chiave main predefinita si riferisce alla pagina corrente.
• assertedEvents che al momento può essere un solo evento navigation

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: Prendi in considerazione il meta tag Supporta eventi touch Visualizza in modalità Orizzontale

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:

1. Fai clic su Impostazioni di riproduzione per rendere modificabile la casella Timeout.

   

2. Nella casella Timeout, imposta il valore di timeout in millisecondi.

3. Fai clic su Riproduci per vedere in azione il timeout predefinito modificato.

Per sovrascrivere il timeout predefinito in un passaggio specifico:

1. Espandi il passaggio e fai clic su Aggiungi timeout.

   

2. Fai clic su timeout: <value> e imposta il valore in millisecondi.

   

3. 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.

Nota: per saperne di più, consulta Selettori Syntactic e semantici e Priorità del selettore.

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:
  1. Selettore CSS con il tuo attributo CSS personalizzato.
  2. Selettori XPath.
  3. Selettore ARIA, se trovato.
  4. Un selettore con il testo univoco più breve, se trovato.
• Se non specificato:
  1. Selettore ARIA, se trovato.
  2. Selettori CSS con la seguente priorità:
     1. Gli attributi più comuni utilizzati per i test:
        • data-testid
        • data-test
        • data-qa
        • data-cy
        • data-test-id
        • data-qa-id
        • data-testing
     2. Attributi ID, ad esempio <div id="some_ID">.
     3. Selettori CSS normali.
  3. Selettori XPath.
  4. Pierce selettori.
  5. 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.