Como posso identificar um seletor DOM ou XPath para usar em um criador de fluxos de trabalho da GUI para um canário do CloudWatch?

Breve descrição

Se você selecionou um elemento DOM incorreto ao criar um canário com o criador de fluxos de trabalho da GUI, poderá encontrar os seguintes erros:

• “Error: Node is either not visible or not an HTMLElement.” (Erro: o nó não está visível ou não é um elemento HTML.)
• “No test result returned. Error: Navigation failed because browser has disconnected!” (Nenhum resultado do teste foi retornado. Erro: a navegação falhou porque o navegador foi desconectado!)
• “TimeoutError: Waiting for selector” (Erro de tempo limite: aguardando pelo seletor)
• “TimeoutError: Waiting for XPath” (Erro de tempo limite: aguardando pelo XPath)

Resolução

Determine o tipo de seletor correto

O criador de fluxos de trabalho da GUI tem cinco ações. O tipo de seletor necessário depende da ação e da versão de runtime que você usa.

As versões do runtime usam Node.js e Puppeteer, enquanto a ação Verificar texto usa o seletor XPath. As ações a seguir usam o seletor DOM:

• Clicar
• Verificar seletor
• Entrada de texto
• Clicar com navegação

Para versões de runtime que usam Python e Selenium WebDriver, todas as ações usam o seletor XPath.

Identifique o seletor correto

Seletores DOM

Para encontrar um atributo exclusivo para seu DOM:

1. Abra o menu de contexto (clique com o botão direito do mouse) do elemento (como um botão, campo de entrada, div, span ou h1).
2. Selecione Inspecionar elemento (Mozilla Firefox) ou Inspecionar (Google Chrome).
3. Observe o atributo DOM exclusivo que você pode usar para identificar o elemento (como id, classe ou nome).

Se seu DOM não tiver um atributo exclusivo, use um dos seguintes métodos para encontrar o elemento:

• Use seletores descendentes para combinar elementos com base no caminho ou atributo fornecido. Você deve usar o caminho exato. Por exemplo, para encontrar <div class='new' id='newId'> <a href="/test1">test1</a> <a href="/test2">test2</a> <a href="/test3">test3</a> </div>, use div.new > a:first-child.
• Use seletores de atributos para combinar elementos com base na presença ou no valor de um determinado atributo. Por exemplo, para encontrar <div class="user-panel main" id="userId"> <input name="login"/> </div>, use div.user-panel.main input[name='login'].

Você também pode obter um seletor DOM exclusivo para seu elemento DOM usando o modo desenvolvedor do seu navegador da Internet.

Chrome:

1. Abra o menu de contexto (clique com o botão direito do mouse) do elemento e selecione Inspecionar.
2. Na guia Elementos, abra o menu de contexto (clique com o botão direito do mouse) da linha destacada.
3. Selecione Copiar e selecione Copiar seletor.

Firefox:

1. Abra o menu de contexto (clique com o botão direito do mouse) do elemento e selecione Inspecionar elementos.
2. Na guia Inspetor, abra o menu de contexto (clique com o botão direito do mouse) da linha destacada.
3. Selecione Copiar e, em seguida, selecione seletor CSS.

Observação: se houver várias instâncias do seletor no documento HTML, o canário selecionará o primeiro elemento da matriz retornada. Evite selecionar elementos que contenham o atributo CSS display:none;. Esses elementos são invisíveis e fazem com que o seletor falhe.

Seletores XPath

Obtenha um seletor XPath exclusivo para seu elemento DOM usando o modo desenvolvedor do seu navegador da Internet.

Chrome:

1. Abra o menu de contexto (clique com o botão direito do mouse) do elemento e selecione Inspecionar.
2. Na guia Elementos, abra o menu de contexto (clique com o botão direito do mouse) da linha destacada.
3. Selecione Copiar e, em seguida, selecione Copiar XPath.

Firefox:

1. Abra o menu de contexto (clique com o botão direito do mouse) do elemento e selecione Inspecionar elementos.
2. Na guia Inspetor, abra o menu de contexto (clique com o botão direito do mouse) da linha destacada.
3. Selecione Copiar e, em seguida, selecione XPath.

Observação: antes de adicionar o seletor XPath que você copiou para o canário, remova o prefixo “//”. O canário adiciona o prefixo “//” ao seu código por padrão.

Teste o novo seletor e confirme se ele está correto

Abra o modo Console em seu navegador de internet

Chrome:

1. No canto superior direito do navegador, selecione Personalizar.
2. Expanda a opção Mais ferramentas e selecione Ferramentas do desenvolvedor.
3. Com o DevTools aberto no navegador, selecione painel Console.

Firefox:

1. No canto superior direito do navegador, selecione Abrir menu.
2. Selecione Desenvolvedor web, em seguida, selecione Web Console.
   Observação: em algumas versões do Firefox, o menu Desenvolvedor web está localizado no menu Ferramentas.

Teste o seletor DOM

A sintaxe para testar a consulta do seletor DOM no console do navegador é: document.querySelectorAll("[AttributeName='AttributeValue']"). Por exemplo, se você tiver um elemento div com id='username', use o seguinte padrão: document.querySelectorAll("[name='username']").

Teste o seletor XPath

A sintaxe para testar a consulta XPath no console do navegador é: $x("XPATH_QUERY"). Por exemplo, se você tiver um elemento div com id='welcome' que contém um elemento h1, use o seguinte padrão: $x("//div[@id='welcome']//h1). Ao adicionar esse caminho ao canário, omita o prefixo “//”.

Adicione o novo seletor ao canário do CloudWatch

1. Abra o console do CloudWatch.
2. Em Synthetics, selecione Canários.
3. Selecione Criar canário.
4. Selecione Usar um esquema e, em seguida, selecione Criador de fluxos de trabalho da GUI.
5. Consulte o exemplo em Criador de fluxos de trabalho da GUI para concluir um esquema que usa o seletor recém-criado.