Descubra maneiras de compartilhar e editar fluxos de usuários e as etapas deles nessa referência abrangente de recursos do painel Gravador do Chrome DevTools.
Para aprender as noções básicas de como trabalhar com o painel Gravador, consulte Gravar, reproduzir e medir fluxos de usuários.
Aprender e personalizar atalhos
Use atalhos para navegar no Gravador mais rapidamente. Veja uma lista de atalhos padrão em Atalhos de teclado do painel do Gravador.
Para abrir uma dica que lista todos os atalhos no Gravador, clique em ajuda Mostrar atalhos no canto superior direito.
Para personalizar os atalhos do Gravador:
- Abra as
Configurações > Atalhos.
- Role para baixo até a seção Gravador.
- Siga as etapas em Personalizar atalhos.
Editar fluxos de usuários
Na parte superior do painel Gravador, há opções para você:
- Adicionar uma nova gravação
. Clique no ícone + para adicionar uma nova gravação.
- Acesse todas as gravações
. O menu suspenso mostra a lista de gravações salvas. Selecione a opção [número] gravações para expandir e gerenciar a lista de gravações salvas.
Exporte uma gravação
. Para personalizar ainda mais o script ou compartilhá-lo para gerar relatórios de bugs, exporte o fluxo do usuário em um dos seguintes formatos:
- arquivo JSON.
- @puppeteer/replay.
- Puppeteer.
- Puppeteer (incluindo análise do Lighthouse).
Para mais informações sobre os formatos, consulte Exportar um fluxo de usuário.
Importar uma gravação
. Somente no formato JSON.
Excluir uma gravação
. Exclua a gravação selecionada.
Também é possível editar o nome da gravação clicando no botão de edição ao lado dela.
Compartilhar fluxos de usuários
É possível exportar e importar fluxos de usuários no Gravador. Isso é útil para gerar relatórios de bugs, porque permite compartilhar um registro exato das etapas que reproduzem um bug. Também é possível exportar e reproduzir com bibliotecas externas.
Exportar um fluxo de usuário
Para exportar um fluxo de usuário:
- Abra o fluxo de usuário que você quer exportar.
- Clique em
Exportar na parte superior do painel Gravador.
- Selecione um dos seguintes formatos na lista suspensa:
- arquivo JSON. Faça o download da gravação como um arquivo JSON.
- @puppeteer/replay (link em inglês). Faça o download da gravação como um script de Puppeteer Replay.
- Puppeteer (em inglês). Faça o download da gravação como um script do Puppeteer.
- Puppeteer (incluindo a análise do Lighthouse) Faça o download da gravação como um script do Puppeteer com uma análise do Lighthouse incorporada.
- Uma ou mais opções fornecidas pelas extensões de exportação do Gravador.
- Salve o arquivo.
É possível fazer o seguinte com cada opção de exportação padrão:
- JSON. Edite o objeto JSON legível por humanos e import o arquivo JSON de volta para o Recorder.
- @puppeteer/replay (link em inglês). Reproduza o script com a biblioteca Puppeteer Replay. Ao exportar como um script @puppeteer/replay, as etapas permanecem como um objeto JSON. Essa opção é perfeita se você quer fazer a integração com o pipeline de CI/CD, mas ainda tem a flexibilidade de editar as etapas como JSON, convertê-las e importá-las de volta no Gravador.
- Script Puppeteer. Repita o script com o Puppeteer. Como as etapas são convertidas em JavaScript, você pode ter uma personalização mais refinada, por exemplo, repetindo as etapas. Uma ressalva: não é possível importar esse script de volta para o Gravador.
Puppeteer (incluindo a análise do Lighthouse) Esta opção de exportação é a mesma que a anterior, mas inclui o código que gera uma análise do Lighthouse.
Execute o script e confira a saída em um arquivo
flow.report.html
:# npm i puppeteer lighthouse node your_export.js
Exporte em um formato personalizado instalando uma extensão
Consulte Extensões do Gravador.
Importar um fluxo de usuário
Para importar um fluxo de usuário:
- Clique no botão Importar
na parte de cima do painel Gravador.
- Selecione o arquivo JSON com o fluxo de usuário registrado.
- Clique no botão
Repetir para executar o fluxo de usuário importado.
Tocar novamente com bibliotecas externas
O Puppeteer Replay é uma biblioteca de código aberto mantida pela equipe do Chrome DevTools. Ele é baseado no Puppeteer. Ele é uma ferramenta de linha de comando que permite reproduzir arquivos JSON novamente.
Além disso, você pode transformar e reproduzir arquivos JSON com as seguintes bibliotecas de terceiros.
Transforme fluxos de usuários JSON em scripts personalizados:
- Gravador do Chrome Cypress. Você pode usá-lo para converter arquivos JSON de fluxo de usuário em scripts de teste Cypress. Assista esta demonstração para vê-lo em ação.
- Gravador do Chrome para relógios noturnos. Use-o para converter arquivos JSON de fluxo de usuário em scripts de teste do Nightwatch.
- Gravador do Chrome CodeceptJS. Você pode usá-lo para converter arquivos JSON de fluxo de usuário em scripts de teste CodeceptJS.
Repetir fluxos de usuários JSON:
- Jogar novamente com o Testcafe. Você pode usar o TestCafe para reproduzir arquivos JSON de fluxo de usuário e gerar relatórios de teste para essas gravações.
- Jogar novamente com a Sauce Labs (em inglês) É possível reproduzir os arquivos JSON no Sauce Labs usando a saucectl.
Depurar fluxos de usuários
Como em qualquer código, às vezes é necessário depurar os fluxos de usuário registrados.
Para ajudar na depuração, o painel Gravador permite diminuir a velocidade das repetições, definir pontos de interrupção, percorrer a execução e inspecionar o código em vários formatos em paralelo com as etapas.
Diminuir a velocidade da repetição
Por padrão, o Gravador reproduz o fluxo do usuário o mais rápido possível. Para entender o que acontece na gravação, diminua a velocidade de repetição:
- Abra o menu suspenso
Repetir.
- Escolha uma das opções de velocidade de repetição:
- Normal (padrão)
- Lento
- Muito devagar
- Extremamente lenta
Inspecionar código
Para inspecionar o código de um fluxo de usuário em vários formatos:
- Abra uma gravação no painel Gravador.
- Clique em Mostrar código no canto superior direito da lista de etapas.
- O Gravador mostra uma visualização lado a lado das etapas e do código delas.
- Quando você passa o cursor sobre uma etapa, o Gravador destaca o respectivo código em qualquer formato, inclusive os fornecidos por extensões.
Expanda a lista suspensa de formatos para selecionar um formato usado para exportar fluxos de usuários.
Pode ser um dos três formatos padrão (JSON, @puppeteer/replay, script Puppeteer ou um formato fornecido por uma extensão).
Prossiga com a depuração da gravação editando os parâmetros e valores das etapas. A visualização de código não é editável, mas é atualizada conforme você faz alterações nas etapas à esquerda.
Definir pontos de interrupção e executar etapa por etapa
Para definir um ponto de interrupção e executar etapa por etapa:
- Passe o cursor sobre o círculo
ao lado de qualquer etapa da gravação. O círculo se transforma em um ícone de ponto de interrupção
.
- Clique no ícone do ponto de interrupção
e reproduza a gravação novamente. As execuções são pausadas no ponto de interrupção.
- Para percorrer a execução, clique no botão
Execute one step na barra de ações na parte de cima do painel Gravador.
- Para interromper a repetição, clique em
Cancelar repetição.
Editar etapas
É possível editar qualquer etapa da gravação clicando no botão ao lado dela, durante e depois.
Você também pode adicionar etapas que faltam e remover aquelas que foram registradas acidentalmente.
Adicionar etapas
Às vezes, pode ser necessário adicionar etapas manualmente. Por exemplo, o Gravador não captura automaticamente eventos hover
porque isso polui a gravação, e nem todos esses eventos são úteis. No entanto, elementos da interface, como menus suspensos, podem aparecer apenas em hover
. É possível adicionar manualmente etapas hover
aos fluxos de usuários que dependem desses elementos.
Para adicionar uma etapa manualmente:
- Abra esta página de demonstração e inicie uma nova gravação.
- Passe o cursor sobre o elemento na janela de visualização. Um menu de ações será exibido.
- Escolha uma ação no menu e encerre a gravação. O Gravador captura apenas o evento de clique.
- Clique em
Repetir para tentar reproduzir a gravação. A repetição falha após um tempo limite porque o Gravador não pode acessar o elemento no menu.
- Clique no botão de três pontos
ao lado da etapa Clique e selecione Adicionar etapa antes.
- Expanda a nova etapa. Por padrão, ele tem o tipo
waitForElement
. Clique no valor ao lado detype
e selecionehover
. - Em seguida, defina um seletor adequado para a nova etapa. Clique em
Selecionar e em uma área do elemento
Hover over me!
que está fora do menu pop-up. O seletor está definido como#clickable
. - Tente reproduzir a gravação novamente. Com a etapa de passagem de cursor adicionada, o Gravador reproduz o fluxo novamente.
Adicionar declarações
Durante a gravação, você pode declarar, por exemplo, atributos HTML e propriedades JavaScript. Para adicionar uma declaração:
- Inicie uma gravação, por exemplo, nesta página de demonstração.
Clique em Add assertion.
O Gravador cria uma etapa
waitForElement
configurável.Especifique seletores para essa etapa.
Configure a etapa, mas não altere o tipo
waitForElement
. Por exemplo, é possível especificar:- Atributo HTML. Clique em Adicionar atributos e digite o nome e o valor do atributo que os elementos desta página usam. Por exemplo,
data-test: <value>
. - Propriedade do JavaScript. Clique em Adicionar propriedades e digite o nome e o valor da propriedade no formato JSON. Por exemplo,
{".innerText":"<text>"}
. - Outras propriedades da etapa. Por exemplo,
visible: true
.
- Atributo HTML. Clique em Adicionar atributos e digite o nome e o valor do atributo que os elementos desta página usam. Por exemplo,
Continue a gravar o restante do fluxo do usuário e, em seguida, pare a gravação.
Clique em
Repetir. Se uma declaração falhar, o Gravador vai mostrar um erro após um tempo limite.
Assista o vídeo a seguir para ver esse fluxo de trabalho em ação.
Copiar etapas
Em vez de exportar todo o fluxo do usuário, é possível copiar uma única etapa para a área de transferência:
- Clique com o botão direito do mouse na etapa que você quer copiar ou clique no ícone de três pontos
ao lado dela.
- No menu suspenso, selecione uma das opções Copiar como ....
É possível copiar as etapas em vários formatos: JSON, Puppeteer, @puppeteer/replay e as extensões fornecidas.
Remover etapas
Para remover uma etapa registrada acidentalmente, clique com o botão direito do mouse nela ou clique no ícone de três pontos ao lado dela e selecione Remover etapa.
Além disso, o Gravador adiciona automaticamente duas etapas separadas ao início de cada gravação:
- Definir janela de visualização. Permite controlar as dimensões, o dimensionamento e outras propriedades da janela de visualização.
- Navegar. Define o URL e atualiza a página automaticamente a cada repetição.
Para realizar uma automação na página sem atualizar a página, remova a etapa de navegação conforme descrito acima.
Configurar etapas
Para configurar uma etapa:
Especifique o tipo:
click
,doubleClick
,hover
, (entrada)change
,keyUp
,keyDown
,scroll
,close
,navigate
(para uma página),waitForElement
,waitForExpression
ousetViewport
.Outras propriedades dependem do valor de
type
.Especifique as propriedades obrigatórias abaixo de
type
.Clique nos botões correspondentes para adicionar e especificar propriedades opcionais do tipo.
Para ver uma lista das propriedades disponíveis, consulte Propriedades da etapa.
Para remover uma propriedade opcional, clique no botão Remover ao lado dela.
Para adicionar ou remover um elemento de uma propriedade de matriz, clique nos botões + ou - ao lado do elemento.
Propriedades da etapa
Cada etapa pode ter as seguintes propriedades opcionais:
target
: um URL para o destino do Chrome DevTools Protocol (CDP). A palavra-chavemain
padrão se refere à página atual.assertedEvents
que, no momento, só pode ser um único eventonavigation
Outras propriedades comuns disponíveis para a maioria dos tipos de etapa são:
frame
: uma matriz de índices baseados em zero que identificam um iframe que pode ser aninhado. Por exemplo, é possível identificar o primeiro (0) iframe dentro de um segundo iframe do destino principal como[1, 0]
.timeout
: um número de milissegundos para aguardar antes de executar uma etapa. Para mais informações, consulte Ajustar tempos limite das etapas.selectors
: uma matriz de seletores. Para mais informações, consulte Entender seletores.
As propriedades específicas do tipo são:
Tipo | Propriedade | Obrigatório | Descrição |
click doubleClick |
offsetX offsetY |
Em relação ao canto superior esquerdo da caixa de conteúdo do elemento, em pixels | |
click doubleClick |
button |
Botão de ponteiro: primário | auxiliar | segundo | voltar | avançar | |
change |
value |
Valor final | |
keyDown keyUp |
key |
Nome da chave | |
scroll |
x y |
Rolagem absoluta nas posições X e Y em pixels. O padrão é 0. | |
navigate |
url |
URL de destino | |
waitForElement |
operator |
>= | == (padrão) | <= | |
waitForElement |
count |
Número de elementos identificados por um seletor | |
waitForElement |
attributes |
Atributo HTML e seu valor | |
waitForElement |
properties |
Propriedade JavaScript e seu valor em JSON | |
waitForElement |
visible |
Booleano. Verdadeiro se o elemento estiver no DOM e visível (não tiver display: none ou visibility: hidden ) |
|
waitForElement waitForExpression |
asserted events |
No momento, apenas type: navigation , mas você pode especificar o título e o URL |
|
waitForElement waitForExpression |
timeout |
Tempo máximo de espera em milissegundos | |
waitForExpression |
expression |
Expressão JavaScript que é resolvida como verdadeira | |
setViewport |
width height |
Largura e altura da janela de visualização em pixels | |
setViewport |
deviceScaleFactor |
Semelhante à proporção de pixels do dispositivo (DPR), padrão 1 | |
setViewport |
isMobile hasTouch isLandscape |
Flags booleanas que especificam se é necessário: |
Há duas propriedades que fazem a repetição pausar:
A propriedade
waitForElement
faz a etapa aguardar a presença (ou ausência) de vários elementos identificados por um seletor. Por exemplo, a etapa a seguir espera que menos de três elementos estejam na página que corresponde ao seletor.my-class
."type": "waitForElement", "selectors": [".my-class"], "operator": "<=", "count": 2,
A propriedade
waitForExpression
faz a etapa esperar até que uma expressão JavaScript seja resolvida como verdadeira. Por exemplo, a etapa a seguir é pausada por dois segundos e, em seguida, é resolvida como verdadeira, permitindo que a repetição continue."type": "waitForExpression", "expression": "new Promise(resolve => setTimeout(() => resolve(true), 2000))",
Ajustar os tempos limite das etapas
Caso sua página tenha solicitações de rede lentas ou animações longas, a repetição pode falhar em etapas que excedem o tempo limite padrão de 5000
milissegundos.
Para evitar esse problema, você pode ajustar o tempo limite padrão para cada etapa de uma só vez ou definir tempos limite separados para etapas específicas. Os tempos limite em etapas específicas substituem o padrão.
Para ajustar o tempo limite padrão de cada etapa de uma só vez:
Clique em Configurações de repetição para tornar a caixa Tempo limite editável.
Na caixa Tempo limite, defina o valor do tempo limite em milissegundos.
Clique em
Repetir para ver o tempo limite padrão ajustado em ação.
Para substituir o tempo limite padrão em uma etapa específica:
Expanda a etapa e clique em Adicionar tempo limite.
Clique em
timeout: <value>
e defina o valor em milissegundos.Clique em
Repetir para ver a etapa com o tempo limite em ação.
Para remover a substituição de tempo limite em uma etapa, clique no botão Excluir ao lado dela.
Entender os seletores
Ao iniciar uma nova gravação, você pode configurar o seguinte:
- Na caixa de texto Atributo do seletor, insira um atributo de teste personalizado. O Gravador usa esse atributo para detectar seletores em vez de uma lista de atributos de teste comuns.
No conjunto de caixas de seleção Tipos de seletores para gravar, escolha os tipos de seletores a serem detectados automaticamente:
CSS. Seletores sintáticos.
ARIA (em inglês). Seletores semânticos.
Texto. Seletores com o texto exclusivo mais curto, se disponível.
XPath. Seletores que usam linguagem de caminho XML.
Pierce. Seletores semelhantes aos do CSS, mas que podem perfurar o shadow DOM.
Seletores de teste comuns
Em páginas da Web simples, os atributos id
e class
do CSS são suficientes para que o Gravador detecte os seletores. No entanto, isso nem sempre acontece pelos seguintes motivos:
- Suas páginas da Web podem usar classes ou IDs dinâmicos que mudam.
- Seus seletores podem falhar devido a mudanças no código ou na estrutura.
Por exemplo, os valores class
do CSS podem ser gerados automaticamente para aplicativos desenvolvidos com frameworks JavaScript modernos (por exemplo, React, Angular, Vue) e frameworks CSS.
Nesses casos, use atributos data-*
para criar testes mais resilientes. Já existem alguns seletores data-*
comuns que os desenvolvedores usam para automação. O Gravador também oferece suporte a eles.
Se você tiver os seguintes seletores de teste comuns definidos no seu site, o Gravador os detectará e usará primeiro:
data-testid
data-test
data-qa
data-cy
data-test-id
data-qa-id
data-testing
Por exemplo, inspecione o elemento "Cappuccino" nesta página de demonstração e confira os atributos de teste:
Grave um clique em "Cappuccino", abra a etapa correspondente na gravação e verifique os seletores detectados:
Personalizar o seletor da gravação
Você poderá personalizar o seletor de uma gravação caso os seletores de teste comuns não funcionem para você.
Por exemplo, esta página de demonstração usa o atributo data-automate
como seletor. Inicie uma nova gravação e insira data-automate
como o atributo do seletor.
Preencha um endereço de e-mail e observe o valor do seletor ([data-automate=email-address]
).
Prioridade do seletor
O Gravador vai procurar seletores na seguinte ordem, dependendo se você especificou um atributo seletor de CSS personalizado:
- Se especificado:
- Seletor de CSS com seu atributo CSS personalizado.
- Seletores XPath.
- Seletor ARIA, se encontrado.
- Um seletor com o menor texto exclusivo, se encontrado.
- Se não for especificado:
- Seletor ARIA, se encontrado.
- Seletores de CSS com a seguinte prioridade:
- Estes são os atributos mais comuns usados para testes:
data-testid
data-test
data-qa
data-cy
data-test-id
data-qa-id
data-testing
- Atributos de ID, como
<div id="some_ID">
. - Seletores de CSS normais.
- Estes são os atributos mais comuns usados para testes:
- Seletores XPath.
- Seletores de Pierce.
- Um seletor com o menor texto exclusivo, se encontrado.
Pode haver vários seletores CSS, XPath e Pierce comuns. O Gravador captura:
- Seletores de CSS e XPath regulares em todos os níveis raiz, ou seja, hosts sombra aninhados, se houver.
- Seletores de segmentação que são exclusivos entre todos os elementos dentro de todas as raízes paralelas.