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 del 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 di Registratore:

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

Modificare i 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.. Il menu a discesa mostra l'elenco delle registrazioni salvate. Seleziona l'opzione N registrazioni per espandere e gestire l'elenco delle registrazioni salvate. Visualizza 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 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.

Condividere i flussi utente

Puoi esportare e importare i flussi utente in Registratore. Questa opzione è 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 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 Lighthouse). Scarica la registrazione come script Puppeteer con un'analisi Lighthouse incorporata.
    • Una o più opzioni fornite dalla funzionalità Esporta estensioni di Registratore.

  4. Salva il file.

Con ogni opzione di esportazione predefinita puoi eseguire le seguenti operazioni:

  • JSON. Modifica l'oggetto JSON leggibile e import 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.
  • Script Puppeteer. 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 questo script di nuovo in Registratore.
  • Puppeteer (per Firefox). Nell'ambito del supporto di WebDriver BiDi, puoi eseguire questo script Puppeteer sia su Chrome che su Firefox.

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

Esportare in un formato personalizzato installando un'estensione

Vedi Estensioni di Registratore.

Importa una procedura

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 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 che consente di riprodurre i file JSON.

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

Trasforma i flussi utente JSON in script personalizzati:

  • Cypress Chrome Recorder. Puoi utilizzarlo per convertire i file JSON del flusso utente in script di test di Cypress. Guarda questa demo per vedere come funziona.
  • Nightwatch Chrome Recorder. Puoi utilizzarlo per convertire i file JSON del flusso utente in script di test Nightwatch.
  • CodeceptJS Chrome Recorder. Puoi utilizzarlo per convertire i file JSON del flusso utente in script di test CodeceptJS.

Riproduci i flussi utente JSON:

Eseguire il 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 repliche, impostare i breakpoint, eseguire la procedura passo passo ed esaminare il codice in vari formati in parallelo con i 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 Riproduci di nuovo.Riproduci.
  2. Scegli una delle opzioni di velocità di riproduzione:
    • Normale (predefinita)
    • Lento
    • Molto lento
    • Molto lento

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. Il pulsante Mostra codice.
  3. Lo strumento Registratore mostra una visualizzazione affiancata dei passaggi e del relativo codice. La visualizzazione affiancata dei passaggi e del relativo codice.
  4. Quando passi il mouse sopra un passaggio, lo Registratore ne 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 con il debug della registrazione modificando i parametri e i valori dei passaggi. La vista codice non è modificabile, ma si aggiorna di conseguenza quando 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 un passaggio di 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 al punto di interruzione. Esecuzione in pausa.
  3. Per eseguire l'esecuzione passo passo, fai clic sul pulsante Esegui un 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, sia durante la registrazione sia dopo.

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

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 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. Fai clic su un'azione e termina la registrazione.
  4. Prova a riprodurre di nuovo la registrazione facendo clic su Riproduci di nuovo. Riproduci. La riproduzione non riesce dopo un timeout perché Registratore non riesce ad accedere all'elemento nel menu. 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 Clic.
  6. Espandi il nuovo passaggio. Per impostazione predefinita, ha il tipo waitForElement. Fai clic sul valore accanto a type e seleziona hover. Seleziona il passaggio del mouse.
  7. Quindi, 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. 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. Riproduzione 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 dimostrativa.

  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 modificarne 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 a registrare il resto del flusso utente e poi interrompi la registrazione.

  6. Fai clic su Riproduci di nuovo. Riproduci di nuovo. Se un'affermazione non va a buon fine, Registratore mostra un errore dopo un timeout.

Guarda il video seguente per vedere questo flusso di lavoro in azione.

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

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.

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.

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, consulta Proprietà del passaggio.

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

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 può essere solo un singolo evento navigation.

Altre proprietà comuni disponibili per la maggior parte dei tipi di passaggio 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: 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 cursore: 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 >= (valore 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 massimo di attesa in millisecondi
waitForExpression expression Verificati. Espressione JavaScript che 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
  • Supportare gli eventi touch
  • Visualizza in modalità Orizzontale
    		•

    Esistono due proprietà che interrompono la riproduzione:

    • 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 in passaggi specifici sostituiscono quelli predefiniti.

    Per regolare il timeout predefinito per ogni passaggio contemporaneamente:

    1. Fai clic su Impostazioni di riproduzione per rendere modificabile 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 il timeout.

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

      Imposta il valore del timeout.

    3. Fai clic su Riproduci 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. Lo strumento di registrazione utilizzerà questo attributo per rilevare i selettori anziché un elenco di attributi di test comuni.

    • Nell'insieme di caselle di controllo Tipi di selettori per la registrazione, scegli i tipi di selettori da rilevare automaticamente:

    Selettori di test comuni

    Per pagine web semplici, gli attributi id e gli attributi CSS class sono sufficienti per consentire al Registratore di rilevare 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 CSS class potrebbero essere generati automaticamente per le applicazioni sviluppate con framework JavaScript moderni (ad es. React, Angular, Vue) e framework CSS.

    Classi CSS generate automaticamente con nomi casuali.

    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, Recorder 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 di demo e visualizza 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 comuni non funzionano.

    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 l'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 perforazione.
      5. Un selettore con il testo univoco più breve, se trovato.

    Possono essere presenti più selettori CSS, XPath e Pierce regolari. Registratore acquisisce:

    • Selettori CSS e XPath regolari 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.