Gravar, repetir e medir fluxos de usuários com o Chrome DevTools

1. Introdução

Use o painel do Gravador para gravar, repetir e medir os fluxos de usuários.

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

O que você vai aprender

• Gravar um fluxo de usuários
• Repetir um fluxo de usuários
• Editar um fluxo de usuários
• Medir um fluxo de usuários

O que é necessário

• Um computador em funcionamento com uma rede Wi-Fi confiável
• Chrome 101 ou uma versão mais recente

2. Abrir o painel do Gravador

Abra o painel do Gravador com as seguintes etapas:

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.

3. Iniciar

Usaremos esta página de demonstração de pedidos 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 medir o fluxo a seguir de finalização de compra com o painel do 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 da forma de pagamento.
7. Finalize a compra.

Abrir a página

4. Gravar um fluxo de usuários

1. Abra a 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.
7. Remova o Americano do carrinho.
8. Clique no botão Total: US$ 19 para iniciar o processo de finalização da compra.
9. 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.
10. Clique no botão Enviar para concluir o processo de finalização da compra.
11. No painel Gravador. Clique no botão Encerrar gravação para finalizar a gravação.

5. Repetir um fluxo de usuários

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

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

Você pode simular uma conexão de rede lenta definindo as Configurações de repetição. Por exemplo, expanda as Configurações de repetição e selecione 3G lento na lista suspensa Rede.

Também é possível definir um tempo limite maior para todas as etapas.

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

6. Medir um fluxo de usuários

Você pode medir o desempenho de um fluxo de usuários 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 frequentemente.

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

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

7. Editar fluxos de usuários

Vamos analisar as opções para editar os fluxos de usuários.

Na parte superior do painel Gravador, estão as seguintes opções:

1. Adicionar uma nova gravação. Clique no ícone + para adicionar uma nova gravação.
2. Ver todas as gravações. O menu suspenso mostra a lista de gravações salvas. Selecione a opção [número] gravação(ões) para expandir e gerenciar a lista de gravações salvas.
3. Exportar uma gravação. É possível exportar o fluxo de usuários como um script Puppeteer para personalizá-lo ainda mais.
4. Excluir uma gravação. Exclua a gravação selecionada.

Também é possível editar o nome da gravação clicando no botão "Editar" ao lado dela.

8. Editar etapas

Vamos ver as opções para editar as etapas em um fluxo de trabalho.

Expandir etapas

1. Expanda cada etapa para ver os detalhes da ação. Por exemplo, expanda a etapa Clique no elemento "Cappuccino".
2. A etapa acima mostra dois seletores. Veja mais informações em Prioridade do seletor. Ao repetir o fluxo de usuários, 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.
3. É possível adicionar ou remover seletores. Por exemplo, você pode remover o seletor nº 2 porque apenas aria/Cappuccino é suficiente nesse caso. Passe o cursor sobre o seletor nº 2 e clique em - para removê-lo. .
4. O selector também é editável. Por exemplo, se você quiser selecionar Mocha em vez de Cappuccino, edite o valor do seletor para aria/Mocha. Se preferir, clique no botão Selecionar e em Mocha na página.
5. Repita o fluxo, e a seleção vai serMocha em vez de Cappuccino.
6. 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 de usuários, basta editá-lo. Clique no menu kebab de três pontos ao lado da etapa para abrir o menu.

1. Por exemplo, o evento Rolagem após a etapa Mocha não é necessário. Selecione Remover etapa para removê-la.
2. Digamos que você queira esperar até que nove cafés apareçam na página antes de realizar qualquer etapa.
3. No menu da etapa Mocha, selecione Adicionar etapa antes. .
4. Em Declarar elemento, edite a nova etapa com os seguintes detalhes:
   • Tipo: waitForElement
   • Seletor nº 1: .cup
   • Operador: == (clique no botão adicionar operador)
   • Contagem: 9 (clique no botão adicionar contagem)
5. Repita o fluxo para ver as alterações.

9. Parabéns!

Parabéns! Você concluiu este codelab.

Você também pode personalizar o seletor de gravações. Para saber mais, acesse nossa documentação.

O que você achou deste codelab?

Achei chato. Gostei!