Registar e reproduzir fluxos de utilizador e medir o desempenho

Utilize a ferramenta Gravador para gravar uma série de passos na janela ou separador do browser onde o DevTools é aberto e, em seguida, reproduza os passos automaticamente, ao mesmo tempo que, opcionalmente, também mede o desempenho.

Quando utilizar a ferramenta Gravador

Utilize a ferramenta Gravador quando quiser acelerar tarefas repetitivas ao reproduzir automaticamente uma série de interações do utilizador no browser.

A ferramenta Gravador regista as interações do utilizador, como cliques com o rato, introdução de teclado e eventos de navegação de página, e permite-lhe reproduzir as interações automaticamente. Também pode utilizar a ferramenta Gravador para medir o desempenho do runtime ao reproduzir as interações do utilizador gravadas. A ferramenta Gravador permite-lhe gravar o número de fluxos de utilizador que pretender e reproduzi-los quantas vezes quiser.

Para o resto deste artigo, vamos utilizar a ferramenta Gravador para automatizar a adição de tarefas à aplicação TODO de demonstração.

Abrir a ferramenta Gravador

1. Abra a aplicação TODO num novo separador ou janela.

2. Para abrir o DevTools, clique com o botão direito do mouse na página da Web e selecione Inspecionar. Em alternativa, prima Ctrl+Shift+I (Windows, Linux) ou Comando+Opção+I (macOS). O DevTools é aberto.

3. Em DevTools, na Barra de Atividade, selecione o separador Gravador . Se esse separador não estiver visível, clique no botão Mais ferramentas () e, em seguida, selecione Gravador. A ferramenta Gravador é aberta:

   

Registar um fluxo de utilizador

Para começar a gravar um novo fluxo de utilizador:

1. Clique em Criar uma nova gravação.

2. Em Nome da gravação, introduza um nome para a gravação, como "Adicionar tarefas TODO".

3. Clique em Iniciar gravação na parte inferior da ferramenta Gravador :

   

4. Na página Web composta, interaja com a página. Por exemplo, introduza "tarefa 1" na caixa De entrada Adicionar uma tarefa e, em seguida, prima Enter. Repita estes passos várias vezes.

   É apresentado um círculo vermelho junto ao nome da gravação, que indica que a gravação está em curso. A ferramenta Gravador regista as suas interações e apresenta-as como uma lista de passos:

   

5. Para parar a gravação, na parte inferior da lista de interações gravadas, clique no botão Terminar gravação .

   A gravação para e o círculo junto ao nome da gravação fica azul, indicando que a gravação está concluída:

   

Registar outros fluxos de utilizador

Para gravar um novo fluxo de utilizador, depois de parar a gravação do fluxo de utilizador anterior:

1. Clique no botão Criar uma nova gravação () no canto superior esquerdo da ferramenta Gravador :

   

2. Repita os passos acima em Registar um fluxo de utilizador.

Reproduzir um fluxo de utilizador

Pode reproduzir fluxos de utilizador a partir da lista de fluxos de utilizadores registados ou ao ver os detalhes de um determinado fluxo de utilizador.

• Para ver a lista de fluxos de utilizador gravados, clique no menu pendente que se encontra na barra de ferramentas gravador , na parte superior e, em seguida, selecione 2 gravações. A etiqueta pode mostrar um número diferente de gravações, consoante o número de gravações que efetuou.

• Para ver os detalhes de um determinado fluxo de utilizador, clique na lista pendente que se encontra na barra de ferramentas gravador , na parte superior e, em seguida, clique no nome de um fluxo de utilizador.

Reproduzir um fluxo de utilizador a partir da lista de gravações

1. Clique no botão Reproduzir gravação junto a uma gravação:

   

2. Aguarde enquanto a ferramenta Gravador reproduz as interações do utilizador gravadas anteriormente. É apresentada uma animação dos passos que estão a ser reproduzidos na ferramenta Gravador :

   

   Quando a repetição estiver concluída, a animação para e a ferramenta Gravador apresenta os passos da gravação.

Reproduzir um fluxo de utilizador a partir de uma gravação

1. Clique no botão Repetição no canto superior direito da ferramenta Gravador :

   

2. Aguarde enquanto a ferramenta Gravador reproduz as interações do utilizador gravadas anteriormente. É apresentada uma animação dos passos que estão a ser reproduzidos na ferramenta Gravador :

   

   Quando a repetição estiver concluída, a animação para e a ferramenta Gravador apresenta os passos da gravação.

Reproduzir lentamente um fluxo de utilizador para investigar problemas

Para ver o que está a acontecer na página composta enquanto as interações do utilizador estão a ser reproduzidas, abrande a velocidade de reprodução. Por predefinição, a ferramenta Gravador reproduz os fluxos de utilizador o mais rápido possível.

Para abrandar a velocidade de reprodução:

• Clique na seta pendente junto a Repetição no canto superior direito da ferramenta Gravador e, em seguida, selecione uma velocidade no menu pendente, como Lento, Muito lento ou Extremamente lento:

  

Colocar em pausa ao reproduzir um fluxo de utilizador com pontos de interrupção

Para inspecionar a página Web composta num ponto específico do fluxo de utilizador, coloque a repetição em pausa utilizando um ponto de interrupção.

Para adicionar um ponto de interrupção a um fluxo de utilizador:

1. Junto ao passo de fluxo no qual colocar em pausa, clique no botão Abrir ações do passo () e, em seguida, selecione Adicionar ponto de interrupção:

   

2. Para iniciar o fluxo de utilizador, clique em Reproduzir no canto superior direito da ferramenta Gravador .

   A repetição é interrompida quando chega ao passo que tem um ponto de interrupção. Os botões Continuar e Executar um passo também ficam disponíveis na barra de ferramentas:

   

3. Clique no botão Executar um passo para executar o passo seguinte e colocar novamente em pausa ou clique no botão Continuar para continuar a repetição até alcançar o ponto de interrupção seguinte (ou o fim do fluxo de utilizador).

Medir o desempenho

Para medir a rapidez com que um site é executado ao reproduzir uma série de interações do utilizador, utilize a ferramenta Gravador . Ao gravar um fluxo de utilizador uma vez, pode reproduzir a gravação muitas vezes, enquanto trabalha para melhorar o desempenho do runtime do site.

1. Para registar um novo fluxo de utilizador, siga os passos em Registar um fluxo de utilizador.

2. Para reproduzir o fluxo de utilizador durante a medição do desempenho, clique em Painel de desempenho no canto superior direito da ferramenta Gravador :

   

3. Aguarde enquanto a ferramenta Gravador reproduz as interações do utilizador gravadas anteriormente.

   A ferramenta Desempenho é aberta e apresenta uma gravação do desempenho do site enquanto as interações do utilizador estavam a ser reproduzidas:

   

Editar os passos de um fluxo de utilizador

Depois de registar um fluxo de utilizador, pode editar os passos do fluxo de utilizador. Por exemplo, pode adicionar novos passos, remover passos existentes ou editar os detalhes de um passo.

Adicionar um novo passo

Para adicionar um novo passo a um fluxo de utilizador existente:

1. Clique no botão Abrir ações do passo () junto ao passo antes ou depois do qual pretende adicionar um novo passo e, em seguida, selecione Adicionar passo antes ou Adicionar passo após:

   

2. Siga as instruções em Editar um passo abaixo para editar os detalhes do novo passo que adicionou. O novo passo é temporariamente denominado Aguardar pelo elemento .

Editar um passo

Para editar os detalhes de um passo existente:

1. Para abrir a secção de detalhes do passo que pretende editar, clique no botão triângulo () junto ao passo. É aberta a secção de detalhes do passo:

   

2. Edite os detalhes do passo, como o tipo de passo, os seletores do elemento DOM a que o passo se aplica ou as propriedades do passo. Os vários tipos de passos e as respetivas propriedades estão listados na secção abaixo. As suas alterações são guardadas automaticamente.

Alterar o tipo de passo

Para alterar o tipo de passo ao editar os detalhes de um passo:

1. Clique na caixa de entrada junto a escrever. Por exemplo, se o passo que está a editar tiver o tipo waitForElement, clique na caixa de entrada que contém o valor waitForElement.

2. Elimine o conteúdo da caixa de entrada e, em seguida, selecione o novo tipo de passo que pretende utilizar no menu pendente apresentado:

   

Pode utilizar os seguintes tipos de passos ao editar um passo num fluxo de utilizador. Cada tipo de passo tem uma lista de propriedades que se aplicam ao passo.

Tipo de passo	Descrição	Propriedades
change	Alterar o valor de um campo de entrada de formulário.	selectores: formas de localizar o elemento a que este passo se aplica. valor: o valor para o qual definir o campo de entrada do formulário.
click	Clique num elemento.	selectores: formas de encontrar o elemento a que este passo se aplica. offsetX/offsetY: a distância do canto superior esquerdo do elemento para clicar.
close	Feche a janela do browser.	Nenhuma.
doubleClick	Faça duplo clique num elemento.	selectores: formas de localizar o elemento a que este passo se aplica. offsetX/offsetY: a distância do canto superior esquerdo do elemento para fazer duplo clique.
emulateNetworkConditions	Emular diferentes condições de rede.	transferir/carregamento: as velocidades de transferência e carregamento, em bytes por segundo. latência: a latência mínima de um pedido que está a ser enviado para a resposta que está a ser recebida, em milissegundos.
hover	Emula o ponteiro que paira sobre um elemento.	selectores: formas de localizar o elemento a que este passo se aplica.
keyDown	Prima uma tecla para baixo.	selectores: formas de localizar o elemento a que este passo se aplica. tecla: que tecla a premir.
keyUp	Solte uma tecla premida.	selectores: formas de localizar o elemento a que este passo se aplica. chave: que chave a libertar.
navigate	Navegue para uma página Web diferente.	URL: o URL da página para onde navegar.
scroll	Desloque-se para uma posição na página Web.	x/y: As coordenadas horizontais e verticais opcionais da posição para onde se deslocar na página.
setViewport	Altere o tamanho da janela viewport, a proporção de píxeis do dispositivo e as capacidades.	Largura/altura: o tamanho da janela viewport. deviceScaleFactor: a proporção de píxeis do dispositivo. isMobile: se a viewport é uma viewport de dispositivo móvel. hasTouch: se a janela viewport suporta eventos táteis. isLandscape: se o viewport está numa orientação horizontal.
waitForElement	Aguarde que um elemento ou vários elementos estejam presentes na página Web.	selectores: formas de localizar o elemento a que este passo se aplica.
waitForExpression	Aguarde até que uma expressão JavaScript seja avaliada como true.	expressão: a expressão JavaScript a avaliar.

Editar os seletores de um passo

Muitos tipos de passos têm uma propriedade de seletores , que especifica o elemento DOM ao qual o passo se aplica. Por exemplo, um click passo tem uma propriedade de seletores para definir que elemento na página é clicado quando esse passo do fluxo de utilizador é executado.

A propriedade selectores é uma lista de um ou mais seletores. Cada seletor na lista pode ser uma forma diferente de encontrar o elemento na página. A ferramenta Gravador tenta cada seletor na lista, por ordem, até encontrar um elemento na página que corresponda ao seletor.

Um seletor pode ser qualquer um dos seguintes tipos:

• Um seletor CSS, como #my-element-with-id ou .my-class.
• Um seletor XPath, com xpath/o prefixo , como xpath//html/body/form/div/label.
• O conteúdo de texto do elemento, com text/o prefixo , como text/Add a task.

Pode editar os seletores de um passo através de qualquer abordagem:

• Selecionar um elemento na página Web composta.

• Adicionar, remover ou modificar manualmente um seletor.

• Para editar os seletores ao selecionar um elemento na página Web composta, clique em Selecionar um elemento na página para atualizar seletores e, em seguida, clique no elemento na página Web composta que pretende selecionar. A ferramenta Gravador atualiza a lista de seletores para corresponder ao elemento selecionado:

  

• Pode adicionar, remover ou modificar manualmente um seletor:

  • Para adicionar ou remover um seletor, em Seletores, paire o cursor sobre um seletor e, em seguida, clique em Adicionar um seletor ou Remover um seletor:

    

  • Para modificar o valor de um seletor, em Seletores, clique na caixa de entrada que contém o valor do seletor e, em seguida, introduza o novo valor para o seletor:

    

Eliminar um passo

Para eliminar um passo de um fluxo de utilizador existente:

1. Clique no botão Abrir ações do passo () junto ao passo que pretende eliminar e, em seguida, selecione Remover passo:

   

Eliminar um fluxo de utilizador

Para eliminar um fluxo de utilizador gravado anteriormente, ao ver a lista de gravações, clique em Eliminar gravação () junto à gravação que pretende eliminar:

Exportar e importar fluxos de utilizador como ficheiros

Para partilhar um fluxo de utilizador com outras pessoas, exporte o fluxo de utilizador registado como um ficheiro JSON. Por exemplo, partilhar um fluxo de utilizador pode ajudar outras pessoas a reproduzir um erro ao executar o mesmo conjunto de passos que o utilizador.

Exportar um fluxo de utilizador como um ficheiro

Para partilhar um fluxo de utilizador com outra pessoa, exporte o fluxo de utilizador como um ficheiro JSON:

1. Ao ver os passos de um fluxo de utilizador, clique no botão Exportar () na barra de ferramentas do Gravador e, em seguida, selecione JSON:

   

2. Selecione uma localização para guardar o ficheiro. O ficheiro é guardado com o nome do fluxo de utilizador e a extensão .json.

Importar um fluxo de utilizador de um ficheiro

Para importar um fluxo de utilizador de um ficheiro JSON:

1. Na barra de ferramentas gravador , clique no botão Importar gravação ():

   

2. Na caixa de diálogo de seleção de ficheiros que é aberta, selecione um ficheiro JSON de fluxo de utilizador e, em seguida, clique no botão Abrir . O fluxo de utilizador é importado e aparece na lista de gravações na ferramenta Gravador .

Exportar um fluxo de utilizador para automatização de teste

Para gerar um script de teste e executá-lo automaticamente com uma arquitetura de automatização de teste, exporte um fluxo de utilizador como um .js ficheiro de script de teste, da seguinte forma:

1. Ao ver os passos de um fluxo de utilizador, na barra de ferramentas gravador , clique no botão Exportar () e, em seguida, selecione um formato de exportação:

   

   Exportar formato	Testar a arquitetura de automatização
   @puppeteer/replay	Exporta o fluxo de utilizador como um script de teste para a biblioteca de Repetição . Veja o puppeteer/repo de repetição .
   Puppeteer	Exporta o fluxo de utilizador como um script de teste para a arquitetura de automatização de teste do Puppeteer. Consulte Puppeteer.
   Puppeteer (incluindo a análise do Lighthouse)	Exporta o fluxo de utilizador como um script de teste para a arquitetura de automatização de teste do Puppeteer e inclui uma análise do Lighthouse do desempenho do site.

   A caixa de diálogo Guardar Como é aberta.

2. Selecione uma localização na qual pretende guardar o ficheiro. O ficheiro é guardado com o nome do fluxo de utilizador e a extensão .js.