Compartilhar via

Registrar e reproduzir fluxos de usuário e medir o desempenho

  • Artigo

Use a ferramenta Gravador para gravar uma série de etapas na janela ou guia do navegador em que o DevTools é aberto e, em seguida, reproduza as etapas automaticamente e, opcionalmente, também medindo o desempenho.

Quando usar a ferramenta Gravador

Use a ferramenta Gravador quando quiser acelerar tarefas repetitivas reproduzindo automaticamente uma série de interações do usuário no navegador.

A ferramenta Gravador registra interações do usuário, como cliques em mouse, entrada de teclado e eventos de navegação de página, e permite que você reproduza as interações automaticamente. Você também pode usar a ferramenta Gravador para medir o desempenho do runtime durante a reprodução das interações gravadas do usuário. A ferramenta Gravador permite gravar quantos fluxos de usuário desejar e reproduzi-los quantas quiser.

Para o restante deste artigo, usaremos a ferramenta Gravador para automatizar a adição de tarefas ao aplicativo TODO de demonstração.

Abrir a ferramenta Gravador

  1. Abra o aplicativo TODO em uma nova guia ou janela.

  2. Para abrir o DevTools, clique com o botão direito do mouse na página da Web e selecione Inspecionar. Ou pressione Ctrl+Shift+I (Windows, Linux) ou Command+Option+I (macOS). O DevTools é aberto.

  3. Em DevTools, na Barra de Atividades, selecione a guia Gravador . Se essa guia não estiver visível, clique no botão Mais ferramentas (ícone Mais ferramentas) e selecione Gravador. A ferramenta Gravador é aberta:

    O aplicativo TODO de demonstração e a ferramenta Gravador em DevTools, ao lado dele

Registrar um fluxo de usuário

Para começar a gravar um novo fluxo de usuário:

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

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

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

    O nome da gravação e o botão iniciar a gravação

  4. Na página da Web renderizada, interaja com a página. Por exemplo, insira "tarefa 1" na caixa de entrada Adicionar uma tarefa e pressione Enter. Repita essas etapas várias vezes.

    Um círculo vermelho aparece ao lado do nome da gravação, indicando que a gravação está em andamento. A ferramenta Gravador registra suas interações e as exibe como uma lista de etapas:

    As interações gravadas do usuário exibidas como uma lista na ferramenta Gravador

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

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

    A gravação finalizada e o botão Replay

Registrar outros fluxos de usuário

Para registrar um novo fluxo de usuário, depois de interromper a gravação do fluxo de usuário anterior:

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

    O botão 'Criar uma nova gravação'

  2. Repita as etapas de Registrar um fluxo de usuário, acima.

Reproduzir um fluxo de usuário

Você pode reproduzir fluxos de usuário da lista de fluxos de usuário registrados ou ao exibir os detalhes de um determinado fluxo de usuário.

  • Para exibir a lista de fluxos de usuário registrados, clique no menu suspenso que está na barra de ferramentas Gravador , na parte superior, e selecione 2 gravações. A gravadora pode mostrar um número diferente de gravações, dependendo de quantas gravações você fez.

  • Para exibir os detalhes de um determinado fluxo de usuário, clique na lista suspensa que está na barra de ferramentas Gravador , na parte superior, e clique no nome de um fluxo de usuário.

Reproduzir um fluxo de usuário da lista de gravações

  1. Clique no botão Reproduzir gravação ao lado de uma gravação:

    A lista de gravações, com um botão 'Reproduzir gravação' ao lado de cada gravação

  2. Aguarde enquanto a ferramenta Gravador reproduz as interações do usuário gravadas anteriormente. Uma animação das etapas que estão sendo reproduzidas aparece na ferramenta Gravador :

    As interações repetidas exibidas como uma animação na ferramenta Gravador

    Quando o replay é concluído, a animação é interrompida e a ferramenta Gravador exibe as etapas da gravação.

Reproduzir um fluxo de usuário de uma gravação

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

    O botão Reprodução em uma página de detalhes do fluxo de usuário gravado

  2. Aguarde enquanto a ferramenta Gravador reproduz as interações do usuário gravadas anteriormente. Uma animação das etapas que estão sendo reproduzidas aparece na ferramenta Gravador :

    As interações repetidas exibidas como uma animação na ferramenta Gravador

    Quando o replay é concluído, a animação é interrompida e a ferramenta Gravador exibe as etapas da gravação.

Reproduzir lentamente um fluxo de usuário para investigar problemas

Para ver o que está acontecendo na página renderizada enquanto as interações do usuário estão sendo reproduzidas, reduza a velocidade de reprodução. Por padrão, a ferramenta Gravador reproduz fluxos de usuário o mais rápido possível.

Para reduzir a velocidade de reprodução:

  • Clique na seta suspensa ao lado de Reprodução no canto superior direito da ferramenta Gravador e selecione uma velocidade no menu suspenso, como Slow, Very slow ou Extremely slow:

    O botão Reprodução e o menu suspenso Velocidade

Pausar durante a reprodução de um fluxo de usuário usando pontos de interrupção

Para inspecionar a página da Web renderizada em um ponto específico do fluxo do usuário, pausa o replay usando um ponto de interrupção.

Para adicionar um ponto de interrupção a um fluxo de usuário:

  1. Ao lado da etapa de fluxo na qual pausar, clique no botão Abrir ações da etapa (ícone Abrir ações de etapa) e, em seguida, selecione Adicionar ponto de interrupção:

    O botão 'Abrir ações de etapa' e o item de menu 'Adicionar ponto de interrupção'

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

    O replay pausa quando atinge a etapa que tem um ponto de interrupção. Os botões Continuar e Executar uma etapa também ficam disponíveis na barra de ferramentas:

    O replay pausado em uma etapa com um ponto de interrupção

  3. Clique no botão Executar uma etapa para executar a próxima etapa e pausar novamente ou clique no botão Continuar para continuar o replay até que o próximo ponto de interrupção (ou o fim do fluxo de usuário) seja atingido.

Medir o desempenho

Para medir a rapidez com que um site é executado durante a reprodução de uma série de interações do usuário, use a ferramenta Gravador . Ao gravar um fluxo de usuário uma vez, você pode reproduzir a gravação muitas vezes, enquanto trabalha para melhorar o desempenho do runtime do site.

  1. Para registrar um novo fluxo de usuário, siga as etapas de Registrar um fluxo de usuário.

  2. Para reproduzir o fluxo de usuário durante a medição do desempenho, clique no painel Desempenho no canto superior direito da ferramenta Gravador :

    O botão Painel Desempenho

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

    A ferramenta Performance é aberta e exibe uma gravação do desempenho do site enquanto as interações do usuário estavam sendo reproduzidas:

    A ferramenta Desempenho que exibe uma gravação do desempenho do site

Editar as etapas de um fluxo de usuário

Depois de registrar um fluxo de usuário, você pode editar as etapas do fluxo de usuário. Por exemplo, você pode adicionar novas etapas, remover etapas existentes ou editar os detalhes de uma etapa.

Adicionar uma nova etapa

Para adicionar uma nova etapa a um fluxo de usuário existente:

  1. Clique no botão Abrir ações da etapa (ícone 'Abrir ações de etapas') ao lado da etapa antes ou depois da qual você deseja adicionar uma nova etapa e selecione Adicionar etapa antes ou Adicionar etapa após:

    O ícone 'Abrir ações de etapa' e o botão 'Adicionar etapa'

  2. Siga as instruções em Editar uma etapa abaixo, para editar os detalhes da nova etapa que você adicionou. A nova etapa é chamada temporariamente de Elemento Wait for.

Editar uma etapa

Para editar os detalhes de uma etapa existente:

  1. Para abrir a seção de detalhes da etapa que você deseja editar, clique no botão triângulo (Ícone de expansão do triângulo) ao lado da etapa. A seção de detalhes da etapa é aberta:

    A seção de detalhes expandidos para uma etapa do fluxo de usuário

  2. Edite os detalhes da etapa, como o tipo de etapa, os seletores do elemento DOM ao qual a etapa se aplica ou as propriedades da etapa. Os vários tipos de etapas e suas propriedades estão listados na seção abaixo. Suas alterações são salvas automaticamente.

Alterar o tipo de etapa

Para alterar o tipo de etapa ao editar os detalhes de uma etapa:

  1. Clique na caixa de entrada ao lado de digitar. Por exemplo, se a etapa que você está editando tiver o tipo waitForElement, clique na caixa de entrada que contém o valor waitForElement.

  2. Exclua o conteúdo da caixa de entrada e selecione o novo tipo de etapa que você deseja usar no menu suspenso que aparece:

    O menu suspenso Tipo

Você pode usar os seguintes tipos de etapas ao editar uma etapa em um fluxo de usuário. Cada tipo de etapa tem uma lista de propriedades que se aplicam à etapa.

Tipo de etapa Descrição Propriedades
change Altere o valor de um campo de entrada de formulário. seletores: maneiras de encontrar o elemento ao qual essa etapa se aplica.
valor: o valor para definir o campo de entrada do formulário como.
click Clique em um elemento. seletores: maneiras de encontrar o elemento ao qual essa etapa se aplica.
Offsetx/offsetY: quão longe do canto superior esquerdo do elemento para clicar.
close Feche a janela do navegador. Nenhuma.
doubleClick Clique duas vezes em um elemento. seletores: maneiras de encontrar o elemento ao qual essa etapa se aplica.
Offsetx/offsetY: quão longe do canto superior esquerdo do elemento para clicar duas vezes.
emulateNetworkConditions Emular condições de rede diferentes. Download/upload: as velocidades de download e upload, em bytes por segundo.
latência: a latência mínima de uma solicitação que está sendo enviada para a resposta que está sendo recebida, em milissegundos.
hover Emule o ponteiro que paira sobre um elemento. seletores: maneiras de encontrar o elemento ao qual essa etapa se aplica.
keyDown Pressione uma tecla para baixo. seletores: maneiras de encontrar o elemento ao qual essa etapa se aplica.
chave: qual tecla pressionar.
keyUp Solte uma tecla pressionada. seletores: maneiras de encontrar o elemento ao qual essa etapa se aplica.
chave: qual chave será lançada.
navigate Navegue até uma página da Web diferente. url: a URL da página para a qual navegar.
scroll Role até uma posição na página da Web. X/y: As coordenadas horizontais e verticais opcionais da posição para rolar na página.
setViewport Altere o tamanho do modo de exibição, a taxa de pixels do dispositivo e os recursos. Largura/altura: o tamanho do modo de exibição.
deviceScaleFactor: a taxa de pixel do dispositivo.
isMobile: se o viewport é um modo de exibição de dispositivo móvel.
hasTouch: se o modo de exibição dá suporte a eventos de toque.
isLandscape: se o modo de exibição está em uma orientação paisagística.
waitForElement Aguarde que um elemento ou vários elementos estejam presentes na página da Web. seletores: maneiras de encontrar o elemento ao qual essa etapa se aplica.
waitForExpression Aguarde até que uma expressão JavaScript seja avaliada como true. expressão: a expressão JavaScript a ser avaliada.
Editar os seletores de uma etapa

Muitos tipos de etapa têm uma propriedade seletores , que especifica o elemento DOM ao qual a etapa se aplica. Por exemplo, uma click etapa tem uma propriedade seletores para definir qual elemento na página é clicado quando essa etapa do fluxo de usuário é executada.

A propriedade seletores é uma lista de um ou mais seletores. Cada seletor na lista pode ser uma maneira diferente de encontrar o elemento na página. A ferramenta Gravador tenta cada seletor na lista, em 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, prefixado com xpath/, como xpath//html/body/form/div/label.
  • O conteúdo de texto do elemento, prefixado com text/, como text/Add a task.

Você pode editar os seletores de uma etapa por qualquer abordagem:

  • Selecionando um elemento na página da Web renderizada.

  • Adicione, remova ou modifique manualmente um seletor.

  • Para editar os seletores selecionando um elemento na página da Web renderizada, clique em Selecionar um elemento na página para atualizar seletores e clique no elemento na página da Web renderizada que você deseja selecionar. A ferramenta Gravador atualiza a lista de seletores para corresponder ao elemento selecionado:

    O botão Selecionar elemento

  • Você pode adicionar, remover ou modificar manualmente um seletor:

    • Para adicionar ou remover um seletor, em Seletores, passe o mouse sobre um seletor e clique em Adicionar um seletor ou Remover um seletor:

      Os botões Adicionar e 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 insira o novo valor para o seletor:

      A caixa de entrada de valor do seletor

Excluir uma etapa

Para excluir uma etapa de um fluxo de usuário existente:

  1. Clique no botão Abrir ações da etapa (ícone Abrir ações de etapa) ao lado da etapa que você deseja excluir e selecione Remover etapa:

    O botão 'Abrir ações de etapa' e o botão 'Remover etapa'

Excluir um fluxo de usuário

Para excluir um fluxo de usuário registrado anteriormente, ao exibir a lista de gravações, clique em Excluir gravação (ícone Excluir gravação) ao lado da gravação que você deseja excluir:

A lista de gravações e o botão 'Excluir gravação' ao lado de cada gravação

Exportar e importar fluxos de usuário como arquivos

Para compartilhar um fluxo de usuário com outras pessoas, exporte o fluxo de usuário registrado como um arquivo JSON. Por exemplo, o compartilhamento de um fluxo de usuário pode ajudar outras pessoas a reproduzir um bug executando o mesmo conjunto de etapas que você.

Exportar um fluxo de usuário como um arquivo

Para compartilhar um fluxo de usuário com outra pessoa, exporte o fluxo de usuário como um arquivo JSON:

  1. Ao exibir as etapas de um fluxo de usuário, clique no botão Exportar (botão Exportar) na barra de ferramentas Gravador e selecione JSON:

    O menu suspenso Do botão Exportar e a opção JSON

  2. Selecione um local no qual salvar o arquivo. O arquivo é salvo com o nome do fluxo de usuário e a extensão .json.

Importar um fluxo de usuário de um arquivo

Para importar um fluxo de usuário de um arquivo JSON:

  1. Na barra de ferramentas Gravador , clique no botão Importar gravação (o ícone importar gravação):

    O botão Importar gravação

  2. Na caixa de diálogo seletor de arquivos que é aberta, selecione um arquivo JSON de fluxo de usuário e clique no botão Abrir . O fluxo de usuário é importado e aparece na lista de gravações na ferramenta Gravador .

Exportar um fluxo de usuário para automação de teste

Para gerar um script de teste e executá-lo automaticamente com uma estrutura de automação de teste, exporte um fluxo de usuário como um .js arquivo de script de teste, da seguinte maneira:

  1. Ao exibir as etapas de um fluxo de usuário, na barra de ferramentas Gravador , clique no botão Exportar (botão Exportar) e selecione um formato de exportação:

    O menu suspenso do botão Exportar e os vários formatos de automação de teste

    Formato de exportação Estrutura de automação de teste
    @puppeteer/replay Exporta o fluxo de usuário como um script de teste para a biblioteca Replay . Consulte o repositório puppeteer/replay .
    Puppeteer Exporta o fluxo de usuário como um script de teste para a estrutura de automação de teste do Puppeteer. Consulte Puppeteer.
    Puppeteer (incluindo análise do Lighthouse) Exporta o fluxo de usuário como um script de teste para a estrutura de automação de teste do Puppeteer e inclui uma análise do Lighthouse sobre o desempenho do site.

    A caixa de diálogo Salvar como é aberta.

  2. Selecione um local no qual salvar o arquivo. O arquivo é salvo com o nome do fluxo de usuário e a extensão .js.