Grave e reproduza fluxos de usuários e meça o desempenho

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

Quando usar a ferramenta Gravador

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

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

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

Abra 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. No 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 no 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 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 grava suas interações e as exibe como uma lista de etapas:

    As interações do usuário gravadas 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 é interrompida, e o círculo ao lado do nome da gravação fica azul, indicando que a gravação foi concluída:

    A gravação finalizada e o botão de reprodução

Registrar outros fluxos de usuários

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 (botão Criar uma nova 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ários da lista de fluxos de usuários gravados ou ao exibir os detalhes de um determinado fluxo de usuários.

  • Para exibir a lista de fluxos de usuário gravados, clique no menu suspenso que está na barra de ferramentas da ferramenta Gravador , na parte superior, e selecione 2 gravações. O rótulo 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 da ferramenta 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 é exibida na ferramenta Gravador :

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

    Quando a repetição é concluída, 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 Reproduzir 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 é exibida na ferramenta Gravador :

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

    Quando a repetição é concluída, 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, diminua a velocidade de reprodução. Por padrão, a ferramenta Gravador reproduz os fluxos do usuário o mais rápido possível.

Para diminuir a velocidade de repetição:

  • Clique na seta suspensa ao lado de Reproduzir no canto superior direito da ferramenta Gravador e selecione uma velocidade no menu suspenso, como Lenta, Muito lenta ou Extremamente lenta:

    O botão Reproduzir e o menu suspenso Velocidade

Pausar ao reproduzir um fluxo do 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, pause a repetição usando um ponto de interrupção.

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

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

    O botão

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

    A repetição é pausada 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:

    A repetição pausada 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 a reprodução até que o próximo ponto de interrupção (ou o final do fluxo do usuário) seja alcançado.

Medir o desempenho

Para medir a velocidade de execução de um site ao reproduzir 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 várias vezes, enquanto trabalha para melhorar o desempenho do tempo de execução do site.

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

  2. Para reproduzir o fluxo do usuário enquanto mede o desempenho, clique no painel Desempenho no canto superior direito da ferramenta Gravador :

    O botão do painel Desempenho

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

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

    A ferramenta Desempenho exibindo 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 de etapa (o ícone 'Abrir ações de etapa') ao lado da etapa antes ou depois da qual você deseja adicionar uma nova etapa e, em seguida, selecione Adicionar etapa antes ou Adicionar etapa depois:

    O ícone

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

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 (o ícone de expansão do triângulo) ao lado da etapa. A seção de detalhes da etapa é aberta:

    A seção de detalhes expandida para uma etapa do fluxo do 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 deseja usar no menu suspenso exibido:

    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 Alterar o valor de um campo de entrada de formulário. seletores: Maneiras de localizar o elemento ao qual esta etapa se aplica.
value: O valor para definir o campo de entrada do formulário.
click Clique em um elemento. seletores: Maneiras de encontrar o elemento ao qual esta etapa se aplica.
offsetX/offsetY: a distância 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 localizar o elemento ao qual esta etapa se aplica.
offsetX/offsetY: a que distância do canto superior esquerdo do elemento para clicar duas vezes.
emulateNetworkConditions Emular diferentes condições de rede. Baixar/upload: as velocidades de download e upload, em bytes por segundo.
latência: a latência mínima de uma solicitação enviada para a resposta recebida, em milissegundos.
hover Emular o ponteiro pairando sobre um elemento. seletores: Maneiras de localizar o elemento ao qual esta etapa se aplica.
keyDown Pressione uma tecla para baixo. seletores: Maneiras de localizar o elemento ao qual esta etapa se aplica.
key: Qual tecla pressionar.
keyUp Solte uma tecla pressionada. seletores: Maneiras de localizar o elemento ao qual esta etapa se aplica.
key: Qual tecla liberar.
navigate Navegue para 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 visor, a proporção de pixels do dispositivo e os recursos. largura/height: O tamanho do visor.
deviceScaleFactor: a taxa de proporção de pixels do dispositivo.
isMobile: Se a janela de visualização é uma janela de visualização de dispositivo móvel.
hasTouch: Se a janela de visualização suporta eventos de toque.
isLandscape: se o visor está na orientação paisagem.
waitForElement Aguarde até que um elemento ou vários elementos estejam presentes na página da Web. seletores: Maneiras de localizar o elemento ao qual esta 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 selectors , que especifica o elemento DOM ao qual a etapa se aplica. Por exemplo, uma click etapa tem uma propriedade selectors para definir qual elemento na página é clicado quando essa etapa do fluxo do usuário é executada.

A propriedade selectors é uma lista de um ou mais seletores. Cada seletor na lista pode ser uma maneira diferente de localizar 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 ou #my-element-with-id.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 a ser atualizada A ferramenta Gravador atualiza a lista de seletores para corresponder ao elemento selecionado:

    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 do 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 de etapa (o ícone Abrir ações de etapa) ao lado da etapa que você deseja excluir e selecione Remover etapa:

    O botão

Excluir um fluxo de usuário

Para excluir um fluxo de usuário gravado anteriormente, ao exibir a lista de gravações, clique em Excluir gravação (o ícone Excluir gravação) ao lado da gravação que 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ários como arquivos

Para compartilhar um fluxo de usuário com outras pessoas, exporte o fluxo de usuário gravado como um arquivo JSON. Por exemplo, compartilhar 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 (o botão Exportar) na barra de ferramentas da ferramenta Gravador e selecione JSON:

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

  2. Selecione um local para 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 da ferramenta Gravador , clique no botão Importar gravação (ícone Importar gravação):

    O botão Importar gravação

  2. Na caixa de diálogo do seletor de arquivos aberta, selecione um arquivo JSON de fluxo do usuário e clique no botão Abrir . O fluxo do 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 da ferramenta Gravador , clique no botão Exportar (o 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 do usuário como um script de teste para a biblioteca de repetição . Veja o repositório do titereiro / replay .
    Puppeteer Exporta o fluxo do usuário como um script de teste para a estrutura de automação de teste do Puppeteer. Veja Puppeteer.
    Titereiro (incluindo análise de farol) Exporta o fluxo do usuário como um script de teste para a estrutura de automação de teste do Puppeteer e inclui uma análise do Lighthouse do desempenho do site.

    A caixa de diálogo Salvar como é aberta.

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

  • Last updated on