Informazioni di riferimento sulle funzionalità

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

Scopri come condividere i flussi utente, modificarli e i relativi passaggi in questa guida di riferimento completa sulle funzionalità del riquadro Registratore di Chrome DevTools.

Per scoprire le nozioni di base sull'utilizzo del riquadro Registratore, consulta Registrare, riprodurre e misurare i flussi utente.

Scopri e personalizza le scorciatoie

Usa le scorciatoie per navigare più velocemente in Registratore. Per un elenco delle scorciatoie predefinite, vedi Scorciatoie da tastiera del riquadro Registratore.

Per aprire un suggerimento che elenca tutte le scorciatoie nel Registratore, fai clic su Mostra scorciatoie nell'angolo in alto a destra.

Il pulsante Mostra scorciatoie.

Per personalizzare le scorciatoie dell'app Registratore:

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

Modifica flussi utente

Il riquadro Registratore di DevTools contiene un menu a discesa nell'intestazione che ti consente di selezionare un flusso utente da modificare.

Nella parte superiore del riquadro Registratore, sono disponibili le opzioni per:

  1. Aggiungi una nuova registrazioneAggiungi.. Fai clic sull'icona + per aggiungere una nuova registrazione.
  2. Visualizza tutte le registrazioniEspandi di più.. Il menu a discesa mostra l'elenco delle registrazioni salvate. Seleziona l'opzione [numero] registrazioni per espandere e gestire l'elenco delle registrazioni salvate. Visualizza tutte le registrazioni.

  3. Esporta una registrazioneDownload di file.. Per personalizzare ulteriormente lo script o condividerlo per la segnalazione di bug, puoi esportare il flusso utente in uno dei seguenti formati:

    Per ulteriori informazioni sui formati, vedi Esportare un flusso utente.

  4. Importa una registrazioneCaricamento di file.. Solo in formato JSON.

  5. Eliminare una registrazioneElimina.. Elimina la registrazione selezionata.

Puoi anche modificare il nome della registrazione facendo clic sul pulsante di modifica Modifica. accanto alla registrazione.

Condividere i flussi utente

Puoi esportare e importare i flussi utente in Registratore. Questa funzionalità è utile per la segnalazione di bug perché puoi condividere una registrazione esatta dei passaggi che riproducono un bug. Puoi anche esportarlo e riprodurlo con librerie esterne.

Esportare un flusso utente

Per esportare un flusso utente:

  1. Apri il flusso utente che vuoi esportare.
  2. Fai clic su Download del file. Esporta nella parte superiore del riquadro Registratore. Opzioni di formato di esportazione.
  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.
    • Puppeteer. Scarica la registrazione come script Puppeteer.
    • Puppeteer (inclusa l'analisi di Lighthouse). Scarica la registrazione come script Puppeteer con un'analisi Lighthouse incorporata.
    • Una o più opzioni fornite dalle estensioni di esportazione dell'app Registratore.
  4. Salva il file.

Con ciascuna opzione di esportazione predefinita puoi effettuare le seguenti operazioni:

  • JSON. Modifica l'oggetto JSON leggibile e import il file JSON di nuovo nel Registratore.
  • @puppeteer/replay. Riproduci di nuovo il copione con la libreria Puppeteer Replay. Durante l'esportazione come script @puppeteer/replay, i passaggi rimangono un oggetto JSON. Questa opzione è perfetta se vuoi eseguire l'integrazione con la pipeline CI/CD, ma vuoi comunque avere la flessibilità di modificare i passaggi come JSON, per poi convertirli e importarli di nuovo in Recorder.
  • Testo per burattinai. Riproduci di nuovo il copione con Puppeteer. Poiché i passaggi vengono convertiti in JavaScript, la personalizzazione è più granulare, ad esempio la ripetizione in loop dei passaggi. Un'avvertenza: non puoi importare questo script di nuovo in Registratore.

  • Puppeteer (inclusa l'analisi Lighthouse). Questa opzione di esportazione è la stessa della precedente, ma include il codice che genera un'analisi di Lighthouse.

    Esegui lo script e controlla l'output in un file flow.report.html:

    # npm i puppeteer lighthouse
node your_export.js

    Il report Lighthouse si è aperto in Chrome.

Esporta in un formato personalizzato installando un'estensione

Vedi Estensioni Registratore.

Importare un flusso utente

Per importare un flusso utente:

  1. Fai clic sul pulsante ImportaCaricamento di file. nella parte superiore del riquadro Registratore. Importa la registrazione.
  2. Seleziona il file JSON con il flusso utente registrato.
  3. Fai clic sul pulsante Riproduci di nuovo.Riproduci per eseguire il flusso di utenti importati.

Gioca di nuovo con le librerie esterne

Puppeteer Replay è una libreria open source gestita dal team Chrome DevTools. È basato su Puppeteer. È uno strumento a riga di comando con cui puoi riprodurre i file JSON.

Inoltre, puoi trasformare e riprodurre di nuovo i file JSON con le seguenti librerie di terze parti.

Trasforma i flussi utente JSON in script personalizzati:

Riproduci i flussi utente JSON:

Eseguire il debug dei flussi utente

Come per ogni codice, a volte devi eseguire il debug dei flussi utente registrati.

Per aiutarti a eseguire il debug, il riquadro Registratore ti consente di rallentare le ripetizioni, impostare punti di interruzione, eseguire i passaggi dell'esecuzione e controllare il codice in vari formati parallelamente ai passaggi.

Rallentare la riproduzione

Per impostazione predefinita, il Registratore riproduce nuovamente il flusso utente il più velocemente possibile. Per capire cosa succede nella registrazione, puoi rallentare la velocità di riproduzione:

  1. Apri il menu a discesa Riproduci di nuovo.Riproduci.
  2. Scegli una delle opzioni per la velocità di riproduzione:
    • Normale (valore predefinito)
    • Lento
    • Molto lento
    • Estremamente lenta

Riproduzione lenta.

Controllare il codice

Per ispezionare il codice di un flusso utente 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. Pulsante Mostra codice.
  3. L'Registratore mostra i passaggi e il codice uno accanto all'altro. La visualizzazione 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 Formato per selezionare un formato da utilizzare per esportare i flussi di utenti.

    L'elenco a discesa Formato.

    Può essere uno dei tre formati predefiniti (JSON, @puppeteer/replay, script Puppeteer o un formato fornito da un'estensione).

  6. Procedi al debug della registrazione modificando i parametri e i valori dei passaggi. La visualizzazione Codice non è modificabile, ma si aggiorna di conseguenza man mano che apporti modifiche ai passaggi a sinistra.

Imposta punti di interruzione ed esegui passo passo

Per impostare un punto di interruzione ed eseguire le operazioni passo passo:

  1. Passa il mouse sopra il cerchio Passaggio. accanto a qualsiasi passaggio in una registrazione. Il cerchio si trasforma in un'icona di punto di interruzione Punto di interruzione..
  2. Fai clic sull'icona dell'interruzione Punto di interruzione. e riavvia la registrazione. Le esecuzioni vengono messe in pausa in corrispondenza del punto di interruzione. Esecuzione in pausa.
  3. Per eseguire la procedura passo passo, fai clic sul pulsante Esegui un solo passaggio. Esegui un passaggio nella barra delle azioni nella parte superiore del riquadro Registratore.
  4. Per interrompere la riproduzione, fai clic su Prendere una pausa Annulla riproduzione.

Modificare i passaggi

Puoi modificare qualsiasi passaggio della registrazione facendo clic sul pulsante Espandi. accanto a esso, sia durante la registrazione sia dopo.

Puoi anche aggiungere passaggi mancanti e rimuovere quelli registrati accidentalmente.

Aggiungere passaggi

A volte potresti dover aggiungere i passaggi manualmente. Ad esempio, Recorder 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 ai flussi utente che dipendono da questi elementi.

Per aggiungere manualmente un passaggio:

  1. Apri questa pagina di demo e avvia una nuova registrazione. Avvia una registrazione per acquisire un evento di passaggio del mouse.
  2. Passa il mouse sopra l'elemento nell'area visibile. Viene visualizzato un menu azione. Passa il mouse sopra l'elemento.
  3. Scegli un'azione dal menu e termina la registrazione. Recorder acquisisce solo l'evento di clic. Facendo clic su un'azione e terminando la registrazione.
  4. Prova a riprodurre di nuovo la registrazione facendo clic su Guarda di nuovo. Riproduci. La riproduzione non va a buon fine dopo un timeout perché il Registratore non può accedere all'elemento nel menu. Ripetizione della riproduzione non riuscita.
  5. Fai clic sul pulsante con tre puntini Pulsante con tre puntini. accanto al passaggio Fai clic e seleziona Aggiungi passaggio precedente. Aggiunta di un passaggio prima di Click.
  6. Espandi il nuovo passaggio. Per impostazione predefinita, è di tipo waitForElement. Fai clic sul valore accanto a type e seleziona hover. Selezione del passaggio del mouse.
  7. Imposta un selettore appropriato per il nuovo passaggio. Fai clic su Seleziona. Seleziona e poi su un'area dell'elemento Hover over me! esterna al menu popup. Il selettore è impostato su #clickable. Imposto il selettore.
  8. Prova a riprodurre di nuovo la registrazione. Con il passaggio di passaggio del mouse aggiunto, lo strumento Registratore riproduce correttamente il flusso. Riproduzione riuscita.

Aggiungi asserzioni

Durante la registrazione, puoi affermare, ad esempio, gli attributi HTML e le proprietà JavaScript. Per aggiungere un'asserzione:

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

  2. Fai clic su Aggiungi asserzione.

    Il pulsante Aggiungi asserzione.

    Recorder crea un passaggio waitForElement configurabile.

  3. Specifica i selettori per questo passaggio.

  4. Configura il passaggio ma non modificare il suo 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à dei passaggi. Ad esempio, visible: true.

  5. Procedi a registrare il resto del flusso utente e poi interrompi la registrazione.

  6. Fai clic su Guarda di nuovo. Riproduci. Se un'asserzione ha esito negativo, il Registratore mostra un errore dopo un timeout.

Guarda il seguente video per scoprire come funziona questo flusso di lavoro.

Copiare i passaggi

Anziché esportare l'intero flusso utente, puoi copiare un singolo passaggio negli appunti:

  1. Fai clic con il tasto destro del mouse sul passaggio da copiare o sull'icona con tre puntini Menu con tre puntini. accanto.
  2. Nel menu a discesa, seleziona una delle opzioni Copia come….

Selezione di un&#39;opzione di copia dal menu a discesa.

Puoi copiare i passaggi in vari formati: JSON, Puppeteer, @puppeteer/replay e quelli forniti dalle estensioni.

Rimuovere i passaggi

Per rimuovere un passaggio registrato per errore, fai clic con il tasto destro del mouse sul passaggio o sull'icona con tre puntini Menu con tre puntini. accanto e seleziona Rimuovi passaggio.

Rimuovi un passaggio.

Inoltre, Registratore aggiunge automaticamente due passaggi distinti all'inizio di ogni registrazione:

Una registrazione con il viewport impostato e i passaggi di navigazione.

  • Imposta area visibile. Ti consente di controllare le dimensioni, la scalabilità e altre proprietà dell'area visibile.
  • Naviga. Imposta l'URL e aggiorna automaticamente la pagina per 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.

    Le altre proprietà dipendono dal valore type.

  2. Specifica le proprietà richieste sotto type.

    Configura un passaggio.

  3. Fai clic sui pulsanti corrispondenti per aggiungere proprietà facoltative specifiche per tipo e specificarle.

Per un elenco delle proprietà disponibili, vedi Proprietà dei passaggi.

Per rimuovere una proprietà facoltativa, fai clic sul pulsante Rimuovi Rimuovi. accanto a questa proprietà.

Per aggiungere o rimuovere un elemento da o in una proprietà array, fai clic sui pulsanti + o - accanto all'elemento.

Proprietà dei passaggi

Ogni passaggio può avere le seguenti proprietà facoltative:

  • target: un URL per la destinazione Chrome DevTools Protocol (CDP). La parola chiave predefinita main fa riferimento alla pagina corrente.
  • assertedEvents che al momento può essere un solo evento navigation

Altre proprietà comuni disponibili per la maggior parte dei tipi di passaggio sono:

  • frame: un array di indici a base zero che identificano 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: il numero di millisecondi da attendere prima di eseguire un passaggio. Per ulteriori informazioni, vedi 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		 Verificati. In pixel rispetto all'angolo in alto a sinistra della casella dei contenuti dell'elemento
click
doubleClick		 button Pulsante del puntatore: principale | ausiliario | secondo | indietro | avanti
change value Verificati. Valore finale
keyDown
keyUp		 key Verificati. Nome chiave
scroll x
y		 Posizioni X e Y di scorrimento assolute in pixel, valore predefinito 0
navigate url Verificati. URL target
waitForElement operator >= | == (predefinito) | <=
waitForElement count Numero di elementi identificati da un selettore
waitForElement attributes Attributo HTML e relativo valore
waitForElement properties Proprietà JavaScript e relativo valore in JSON
waitForElement visible Booleano. True se l'elemento è nel DOM e 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 di attesa massimo in millisecondi
waitForExpression expression Verificati. Espressione JavaScript che si risolve in true
setViewport width
height		 Verificati. Larghezza e altezza della visualizzazione in pixel
setViewport deviceScaleFactor Verificati. Simile al rapporto pixel del dispositivo (DPR), valore predefinito 1
setViewport isMobile
hasTouch
isLandscape		 Verificati. Flag booleani che specificano se:
  • Tieni conto del meta tag
  • Eventi touch di supporto
  • Visualizza in modalità Orizzontale
    		•

    Esistono due proprietà che interrompono la riproduzione:

    • La proprietà waitForElement fa sì che il passaggio attenda la presenza (o l'assenza) di un numero di elementi identificati da un selettore. Ad esempio, il passaggio seguente attende che sulla pagina siano presenti meno di tre elementi corrispondenti al selettore .my-class.

        "type": "waitForElement",
  "selectors": [".my-class"],
  "operator": "<=",
  "count": 2,

    • La proprietà waitForExpression fa in modo che il passaggio attenda che un'espressione JavaScript restituisca true. Ad esempio, il passaggio successivo viene messo in pausa per due secondi, poi si risolve in true per consentire la riproduzione continua.

        "type": "waitForExpression",
  "expression": "new Promise(resolve => setTimeout(() => resolve(true), 2000))",

    Regola i timeout per i passaggi

    Se la tua pagina ha richieste di rete lente o animazioni lunghe, la riproduzione può non riuscire se i passaggi 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 nei passaggi specifici sovrascrivono il valore predefinito.

    Per regolare il timeout predefinito per ogni passaggio contemporaneamente:

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

      Impostazioni di riproduzione.

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

    3. Fai clic su Riproduci di nuovo.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.

      Aggiungi timeout.

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

      Imposta il valore di timeout.

    3. Fai clic su Guarda di nuovo.Riproduci per vedere il passaggio con il timeout in azione.

    Per rimuovere la sovrascrittura del timeout su un passaggio, fai clic sul pulsante EliminaElimina. accanto al passaggio.

    Informazioni sui selettori

    Quando avvii una nuova registrazione, puoi configurare quanto segue:

    Configurazione di una nuova registrazione.

    • Nella casella di testo Attributo selettore, inserisci un attributo di test personalizzato. Lo strumento di registrazione utilizzerà questo attributo per rilevare i selettori anziché un elenco di attributi di test comuni.

    • Nel set di caselle di controllo Tipi di selettori da registrare, scegli i tipi di selettori da rilevare automaticamente:

    Selettori di test comuni

    Per le pagine web semplici, gli attributi id e class CSS sono sufficienti affinché il Registratore rilevi i selettori. Tuttavia, potrebbe non essere sempre così perché:

    • Le tue pagine web potrebbero utilizzare classi o ID dinamici che cambiano.
    • I selettori potrebbero non funzionare a causa di modifiche al codice o al framework.

    Ad esempio, i valori class del CSS potrebbero essere generati automaticamente per le applicazioni sviluppate con framework JavaScript moderni (come React, Angular, Vue) e framework CSS.

    Classi CSS generate automaticamente con nomi randomizzati.

    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. Le funzionalità di Registratore le supportano anche.

    Se sul tuo sito web sono definiti i seguenti selettori di test comuni, il Registratore li rileva e li utilizza per primi in modo automatico:

    • data-testid
    • data-test
    • data-qa
    • data-cy
    • data-test-id
    • data-qa-id
    • data-testing

    Ad esempio, controlla il "Cappuccino" su questa pagina dimostrativa e osserva gli attributi di test:

    Selettori di test definiti.

    Registra un clic su "Cappuccino", espandi il passaggio corrispondente nella registrazione e controlla i selettori rilevati:

    È stato rilevato un selettore di test comune.

    Personalizzare il selettore della registrazione

    Puoi personalizzare il selettore di una registrazione se i selettori di test più comuni non sono adatti al tuo caso.

    Ad esempio, questa pagina di demo utilizza l'attributo data-automate come selettore. Avvia una nuova registrazione e inserisci data-automate come attributo selettore.

    Personalizza il selettore della registrazione.

    Inserisci un indirizzo email e osserva il valore del selettore ([data-automate=email-address]).

    Il risultato della selezione del selettore personalizzato.

    Priorità del 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 standard.
      3. Selettori XPath.
      4. Selettori di pierce.
      5. Un selettore con il testo univoco più breve, se trovato.

    Possono esserci più selettori CSS, XPath e Pierce normali. Registratore acquisisce:

    • Selettori CSS e XPath normali a ogni livello principale, ovvero host shadow nidificati, se presenti.
    • Selettori di pierce univoci tra tutti gli elementi all'interno di tutte le radici ombra.