Informazioni di riferimento sulle funzionalità

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

Scopri i modi per condividere i flussi utente, modificarli e modificarne i passaggi in questo riferimento completo delle 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 nel riquadro Registratore.

Per aprire un suggerimento che elenca tutte le scorciatoie direttamente in 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 delle opzioni per:

  1. Aggiungi una nuova registrazioneAggiungi.. Fai clic sull'icona + per aggiungere una nuova registrazione.
  2. Visualizza tutte le registrazioniEspandi.. Nel menu a discesa viene visualizzato l'elenco delle registrazioni salvate. Seleziona l'opzione N registrazioni per espandere e gestire l'elenco delle registrazioni salvate. Visualizzare tutte le registrazioni.

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

    Per scoprire di più 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.

Condividere i flussi utente

Puoi esportare e importare i flussi utente in Registratore. È utile per la segnalazione di bug, perché puoi condividere un registro esatto 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 da esportare.

  2. Fai clic su Esporta nella parte superiore del riquadro Registratore.

    Un elenco di opzioni di formato nel menu Esporta.

  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 (per Firefox). Scarica la registrazione come script Puppeteer per Firefox.
    • 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 importa nuovamente il file JSON in Registratore.
  • @puppeteer/replay. Riproduci di nuovo lo script con la libreria Puppeteer Replay. Quando esporti 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 lo script con Puppeteer. Poiché i passaggi vengono convertiti in JavaScript, puoi avere una personalizzazione più granulare, ad esempio ripetere i passaggi. Un'avvertenza: non puoi importare nuovamente questo script in Registratore.
  • Puppeteer (per Firefox). Come parte del supporto di WebDriver BiDi, puoi eseguire questo script Puppeteer sia su Chrome sia su Firefox.

  • Puppeteer (inclusa l'analisi Lighthouse). Questa opzione di esportazione è uguale alla 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

    Il report Lighthouse si è aperto in Chrome.

Esporta in un formato personalizzato installando un'estensione

Vedi Estensioni di Registratore.

Importa una procedura

Per importare un flusso di utenti:

  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 Guarda di nuovo.Riproduci per eseguire il flusso utente importato.

Riproduzione con librerie esterne

Puppeteer Replay è una libreria open source gestita dal team di 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 di nuovo i flussi utente JSON:

Debug dei flussi utente

Come per qualsiasi 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, lo strumento Registratore riproduce il flusso utente il più rapidamente possibile. Per capire cosa succede nella registrazione, puoi rallentare la velocità di riproduzione:

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

Riproduzione lenta.

Ispeziona il codice

Per esaminare 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. Il 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 del formato per selezionare un formato che utilizzi per esportare i flussi utente.

    L'elenco a discesa dei formati.

    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.

Impostare i punti di interruzione ed eseguire i passaggi uno alla volta

Per impostare un punto di interruzione ed eseguire il codice 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 seguire l'esecuzione, 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.

Modifica passaggi

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

Puoi anche aggiungere i passaggi mancanti e rimuovere quelli registrati per errore.

Aggiungi passaggi

A volte, potresti dover aggiungere i passaggi manualmente. Ad esempio, il Registratore non acquisisce automaticamente gli eventi hover perché 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 di azioni. 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 riesce dopo un timeout perché Registratore non riesce ad accedere all'elemento nel menu. Ripetizione della riproduzione non riuscita.
  5. Fai clic sul pulsante con tre puntini Pulsante con tre puntini. accanto a Fai clic e seleziona Aggiungi passaggio prima. 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. Quindi, imposta un selettore appropriato per il nuovo passaggio. Fai clic su Seleziona. Seleziona, quindi fai clic su un'area dell'elemento Hover over me! fuori dal menu popup. Il selettore è impostato su #clickable. Impostazione del selettore.
  8. Prova a riprodurre di nuovo la registrazione. Con il passaggio di passaggio del mouse aggiunto, lo strumento Registratore riproduce correttamente il flusso. Ripetizione riuscita.

Aggiungere 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à del passaggio. 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 di nuovo. Se un'affermazione non va a buon fine, Registratore mostra un errore dopo un timeout.

Guarda il seguente video per scoprire come funziona 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 che vuoi copiare o fai clic sull'icona con tre puntini Menu con tre puntini. accanto a esso.
  2. Nel menu a discesa, seleziona una delle opzioni Copia come….

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

Rimuovi 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, il Registratore aggiunge automaticamente due passaggi separati 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 a ogni ripetizione.

Per eseguire l'automazione in-page senza ricaricare la pagina, rimuovi il passaggio di navigazione come descritto sopra.

Passaggi di configurazione

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.

Per aggiungere o rimuovere un elemento da o verso 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 il target del protocollo DevTools (CDP) di Chrome. La parola chiave main predefinita fa riferimento alla pagina corrente.
  • assertedEvents che può essere un solo evento navigation.

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

  • frame: un array di indici a partire da 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: numero di millisecondi di attesa prima di eseguire un passo. 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 dello scorrimento assoluto in pixel, valore predefinito 0
navigate url Verificati. URL target
waitForElement operator >= | == (predefinita) | <=
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 dell'area visibile in pixel.
setViewport deviceScaleFactor Verificati. Simile a Rapporto pixel dispositivo (DPR), valore predefinito 1
setViewport isMobile
hasTouch
isLandscape		 Verificati. Flag booleani che specificano se:
  • Prendi in considerazione il meta tag
  • Eventi touch di supporto
  • Visualizza in modalità Orizzontale
    		•

    Esistono due proprietà che rendono la riproduzione in pausa:

    • La proprietà waitForElement fa in modo 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 nella 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 seguente si mette in pausa per due secondi e poi diventa true, consentendo la continuazione della riproduzione.

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

    Modificare i timeout per i passaggi

    Se la tua pagina presenta richieste di rete lente o animazioni lunghe, la riproduzione può non riuscire nei 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 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 sulla 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 una sovrascrittura del timeout in un passaggio, fai clic sul pulsante EliminaElimina. accanto.

    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. Il Registratore 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:

      • Casella di controllo. CSS. Selettori sintattici.
      • Casella di controllo. ARIA. Selettori semantici.
      • Casella di controllo. Testo. Selettori con il testo univoco più breve, se disponibile.
      • Casella di controllo. XPath. Selettori che utilizzano XML Path Language.
      • Casella di controllo. Pierce. Selettori simili a quelli CSS, ma che possono attraversare il DOM ombra.

    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 possono 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 utilizzati dagli sviluppatori per l'automazione. Anche Registratore li supporta.

    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 l'elemento "Cappuccino" in questa pagina demo e controlla gli attributi di test:

    Selettori di test definiti.

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

    Selettore di test comune rilevato.

    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

    Lo strumento di registrazione 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.
    • Seleziona i selettori che sono univoci tra tutti gli elementi all'interno di tutte le radici shadow.