Gravar, repetir e medir os fluxos de usuários

Jecelyn Yeen

Sofia Emelianova

Assista o vídeo abaixo para conhecer o novo painel do Gravador (recurso de visualização).

Conclua este tutorial para aprender a usar o painel do Gravador para gravar, repetir e medir fluxos de usuários.

Para mais informações sobre como compartilhar os fluxos de usuários gravados, editá-los e as etapas deles, consulte a referência de recursos do gravador.

Abrir o painel do Gravador

1. Abra o DevTools.

2. Clique em Mais opções     > Mais ferramentas > Gravador.

   

   Como alternativa, use o menu de comando para abrir o painel do Gravador.

   

Introdução

Usaremos esta página de demonstração de pedido de café. A finalização da compra é um fluxo comum de usuários em sites de compras.

Nas próximas seções, mostraremos como gravar, repetir e auditar o fluxo de finalização de compra a seguir com o painel Gravador:

1. Adicione um café ao carrinho.
2. Adicione outro café ao carrinho.
3. Acesse a página do carrinho.
4. Remova um café do carrinho.
5. Inicie o processo de finalização da compra.
6. Preencha os detalhes de pagamento.
7. Finalize a compra.

Gravar um fluxo do usuário

1. Abra esta página de demonstração. Clique no botão Iniciar nova gravação para começar.
2. Digite "pagamento do café" na caixa de texto Nome da gravação.
3. Clique no botão Iniciar uma nova gravação. A gravação foi iniciada. O painel mostra Gravando..., o que indica que a gravação está em andamento.
4. Clique em Cappuccino para adicioná-lo ao carrinho.
5. Clique em Americano para adicioná-lo ao carrinho. O Gravador mostra as etapas realizadas até o momento.
6. Acesse a página do carrinho e remova Americano.
7. Clique no botão Total: US$ 19,00 para iniciar o processo de finalização da compra.
8. No formulário de detalhes da forma de pagamento, preencha as caixas de texto Nome e E-mail e marque a caixa de seleção Quero receber atualizações de pedidos e mensagens promocionais.
9. Clique no botão Enviar para concluir o processo de finalização da compra.
10. No painel Gravador, clique no botão Encerrar gravação para finalizar a gravação.

Repetir um fluxo do usuário

Depois de gravar um fluxo do usuário, é possível reproduzi-lo clicando no botão Repetir.

É possível ver a repetição do fluxo do usuário na página. O progresso da repetição também é mostrado no painel Gravador.

Se você clicar acidentalmente durante a gravação ou algo não funcionar, depurar seu fluxo de usuários: diminua a velocidade da reprodução, defina um ponto de interrupção e execute passo a passo.

Simular rede lenta

Você pode simular uma conexão de rede lenta definindo as Configurações de repetição. Por exemplo, abra as Configurações de repetição e selecione 3G lento no menu suspenso Rede.

Mais configurações poderão ser disponíveis no futuro. Compartilhe conosco suas sugestões para as configurações de repetição.

Medir um fluxo do usuário

Você pode medir o desempenho de um fluxo do usuário clicando no botão Medir o desempenho. Por exemplo, a finalização da compra é um fluxo essencial de usuários em um site de compras. Com o painel Gravador, você pode gravar o fluxo de finalização da compra uma vez e medi-lo regularmente.

Um clique no botão Medir desempenho aciona uma repetição do fluxo do usuário. Em seguida, o trace de desempenho é aberto no painel Performance.

Saiba como analisar o desempenho de execução da sua página com o painel Performance. Você pode ativar a caixa de seleção Métricas da Web no painel Performance para conferir as métricas das Métricas da Web e identificar oportunidades para melhorar a experiência de navegação do usuário.

Editar etapas

Vamos conferir as opções básicas para editar as etapas no fluxo de trabalho gravado.

Para conferir uma lista completa de opções de edição, consulte Editar etapas na referência de recursos.

Expandir passos

Expanda cada etapa para ver os detalhes da ação. Por exemplo, abra a etapa Clique no elemento "Cappuccino".

A etapa acima mostra dois seletores. Para mais informações, consulte Entenda o seletor da gravação.

Ao repetir o fluxo do usuário, o Gravador tenta consultar o elemento com um dos seletores na sequência. Por exemplo, se o Gravador consultar o elemento com o primeiro seletor, ele vai pular o segundo seletor e avançar para a próxima etapa.

Adicionar e remover seletores de uma etapa

É possível adicionar ou remover seletores. Por exemplo, você pode remover o seletor 2 porque apenas aria/Cappuccino é suficiente nesse caso. Passe o cursor sobre o seletor 2 e clique em - para removê-lo.

Editar seletores em uma etapa

O seletor também é editável. Por exemplo, se você quiser selecionar Mocha em vez de Cappuccino, faça o seguinte:

1. Edite o valor do seletor para aria/Mocha.

   

   Se preferir, clique no botão Selecionar e em Mocha na página.

2. Reproduza o fluxo agora. A seleção vai ser Mocha em vez de Cappuccino.

3. Tente editar outras propriedades da etapa, como tipo, destino, valor e mais.

Adicionar e remover etapas

Também há opções para adicionar e remover etapas. Isso é útil se você quiser adicionar uma etapa extra ou remover uma etapa adicionada acidentalmente. Em vez de regravar o fluxo do usuário, basta editá-lo:

1. Clique com o botão direito do mouse na etapa que você quer editar ou no ícone de três pontos ao lado dela.

   

2. Selecione Remover etapa para remover a etapa. Por exemplo, o evento Rolagem após a etapa Mocha não é necessário.

3. Digamos que você queira esperar até que nove cafés apareçam na página antes de realizar qualquer etapa. No menu da etapa Mocha, selecione Adicionar etapa antes.

4. Em Declarar elemento, edite a nova etapa com os seguintes detalhes:

   • type: waitForElement
   • Seletor nº 1: .cup
   • Operador: == (clique no botão adicionar operador)
   • Contagem: 9 (clique no botão adicionar contagem)

5. Reproduza o fluxo agora para conferir as mudanças.

Próximas etapas

Parabéns, você concluiu o tutorial.

Para conhecer mais recursos e fluxos de trabalho (por exemplo, importação e exportação) relacionados ao Gravador, consulte a referência de recursos do Gravador.