Confira o novo painel Gravador (recurso de pré-visualização) no vídeo abaixo.
Conclua este tutorial para saber como usar o painel do Gravador para gravar, reproduzir e medir fluxos de usuários.
Para mais informações sobre como compartilhar e editar os fluxos de usuários registrados, consulte a referência de 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
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, vamos ensinar você a 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.
Registrar um fluxo de usuário
- Abra esta página de demonstração. Clique no botão Start new recording para começar.
- Insira "finalização do café" na caixa de texto Nome da gravação.
Para mais informações, consulte Entender seletores.
1. Clique no botão Start a new recording. A gravação foi iniciada. O painel mostra Gravando..., indicando que a gravação está em andamento.
1. Clique em Cappuccino para adicionar ao carrinho.
1. Clique em Americano para adicionar ao carrinho. O Gravador mostra as etapas que você realizou até o momento.
1. Acesse a página do carrinho e remova o Americano.
1. Clique no botão Enviar para concluir o processo de finalização da compra.
1. No painel Gravador, clique no botão 
Finalizar gravação para encerrar a gravação.
Repetir um fluxo de usuário
Depois de gravar um fluxo de 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 é exibido no painel Gravador.
Se você clicar errado durante a gravação ou se algo não funcionar, depure o fluxo do usuário: desacelere a repetição, defina um ponto de interrupção e execute-o passo a passo.
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 reproduçã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 de usuários
Para avaliar o desempenho de um fluxo de usuários, clique no botão Medir desempenho. Por exemplo, a finalização da compra é um fluxo essencial do usuário 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 de usuários e, em seguida, abre o trace de desempenho no painel Desempenho.
Saiba como analisar o desempenho do ambiente 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 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 registrado.
Para ver uma lista abrangente de opções de edição, consulte Etapas de edição na referência dos recursos.
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 de gravação.
Ao reproduzir o fluxo de usuários, o Gravador tenta consultar o elemento com um dos seletores por 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 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ê pode:
Edite o valor do seletor para aria/Mocha.
Como alternativa, clique no botão Selecionar
e depois em Mocha na página.Reproduza o fluxo novamente. Ele precisa selecionar Mocha em vez de Cappuccino.
Tente editar outras propriedades da etapa, como type, target, value, entre outras.
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, você pode simplesmente 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. 
Você pode selecionar Remover etapa para removê-la. Por exemplo, o evento Rolar após a etapa Mocha não é necessário.
Digamos que você queira esperar até que nove cafés sejam exibidos na página antes de realizar qualquer etapa. No menu da etapa Mocha, selecione Adicionar etapa antes.
Em Afirmar 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 novamente para conferir as alterações.
Próximas etapas
Parabéns, você concluiu o tutorial!
Para conferir mais recursos e fluxos de trabalho (por exemplo, importar e exportar) relacionados ao Gravador, consulte a Referência de recursos do Gravador.