Dê uma olhada no novo painel Gravador (recurso de visualização) com o vídeo abaixo.
Conclua este tutorial para saber como usar o painel Gravador para gravar, reproduzir 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 dos recursos do Gravador.
Abrir o painel do Gravador
- Abra o DevTools.
Clique em Mais opções
> Mais ferramentas > Gravador.
Como alternativa, use o Menu de comando para abrir o painel do Gravador.
Introdução
Vamos usar esta página de demonstração para pedir café. A finalização da compra é um fluxo comum de usuários em sites de compras.
Nas próximas seções, vamos ensinar como gravar, reproduzir e auditar o seguinte fluxo de finalização de compra com o painel Gravador:
- Adicione um café ao carrinho.
- Adicione outro café ao carrinho.
- Acesse a página do carrinho.
- Remova um café do carrinho.
- Inicie o processo de finalização da compra.
- Preencha os detalhes da forma de pagamento.
- Finalize a compra.
Gravar um fluxo do usuário
- Abra esta página de demonstração. Clique no botão Iniciar nova gravação para começar.
- Digite "pagamento do café" na caixa de texto Nome da gravação.
- 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.
- Clique em Cappuccino para adicionar ao carrinho.
- Clique em Americano para adicioná-lo ao carrinho. O Gravador mostra as etapas realizadas até o momento.
- Acesse a página do carrinho e remova o Americano.
- Clique no botão Total: US$ 19,00 para iniciar o processo de finalização da compra.
- No formulário de detalhes 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.
- Clique no botão Enviar para concluir o processo de finalização da compra.
- No painel Gravador, clique no botão
Finalizar 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ê tiver cometido um clique errado durante a gravação ou se algo não funcionar, depure o fluxo do usuário: diminua a velocidade da repetição, defina um ponto de interrupção e execute-o etapa por etapa.
Simular rede lenta
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.
Mais configurações podem ser compatíveis no futuro. Compartilhe conosco as configurações de repetição que você gostaria de ter.
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, o checkout é um fluxo de usuário essencial em um site de compras. Com o painel Gravador, você pode gravar o fluxo de finalização de compra uma vez e medi-lo regularmente.
Clicar no botão Medir desempenho aciona uma repetição do fluxo do usuário. Em seguida, o trace de desempenho é aberto no painel Desempenho.
Saiba como analisar o desempenho de tempo de execução da sua página com o painel Desempenho. Ative a caixa de seleção das Métricas da Web no painel Desempenho para conferir as Métricas da Web e identificar oportunidades de melhorar a experiência de navegação do usuário.
Editar etapas
Vamos examinar as opções básicas para editar as etapas do fluxo de trabalho gravado.
Para conferir uma lista abrangente de opções de edição, consulte Etapas de edição na referência de elementos.
Expandir passos
Abra cada etapa para conferir os detalhes da ação. Por exemplo, expanda a etapa Clique no elemento "Cappuccino".
A etapa acima mostra dois seletores. Para mais informações, consulte Entender 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 prosseguir 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 no 2 porque apenas aria/Cappuccino é suficiente nesse caso. Passe o cursor sobre o seletor no 2 e clique em - para removê-lo.
Editar seletores em uma etapa
O seletor também é editável. Por exemplo, se quiser selecionar Mocha em vez de Cappuccino, você poderá:
Edite o valor do seletor para aria/Mocha.
Como alternativa, clique no botão Selecionar
e depois em Mocha na página.Repetir o fluxo agora; ele deve selecionar Mocha em vez de Cappuccino.
Tente editar outras propriedades da etapa, como tipo, destino, valor e muito mais.
Adicionar e remover etapas
Há também 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:
Clique com o botão direito do mouse na etapa que você quer editar ou clique no ícone de três pontos
ao lado dela. 
Selecione Remover etapa para removê-la. Por exemplo, o evento Rolagem após a etapa Mocha não é necessário.
Digamos que você queira esperar até que nove cafés apareçam na página antes de seguir qualquer etapa. No menu da etapa Mocha, selecione Adicionar etapa antes.
Em Declarar elemento, edite a nova etapa com os seguintes detalhes:
- Tipo: waitForElement
- Seletor no 1: .cup
- Operador: == (clique no botão adicionar operador)
- Contagem: 9 (clique no botão adicionar contagem)
Reproduza o fluxo agora para ver 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.