Teste de navegador com scripts do IDE Selenium

1. Faça download e instale o IDE Selenium.

   Você pode baixar e instalar o IDE Selenium para usuários do Firefox e do Chrome.

   • Para usuários do Firefox, adicione o complemento Firefox ao navegador. Em seguida, reinicie o navegador conforme necessário.

   • Para usuários do Chrome, conclua um dos métodos a seguir:

     Observação: a extensão do Chrome do Selenium IDE não está mais disponível na Chrome Web Store.

     • Instale o IDE Selenium usando a linha de comando ou o prompt de comando.

       npm install -g selenium-ide
       selenium-ide
       

       Para obter mais informações sobre as instruções de instalação, consulte o arquivo readme.

     • Faça o download do IDE a partir das versões do Selenium IDE GitHub com base no seu sistema operacional e execute o aplicativo localmente.

       Observação: O aplicativo Selenium IDE registra projetos no formato 3.0 que o mecanismo de reprodução Synthetic PoP BrowserScript ainda não suporta.

       Para garantir a compatibilidade, você deve alterar manualmente o número da versão no arquivo .side de 3.0 para 2.0.

       Depois de salvar o projeto no aplicativo Selenium IDE, para editar o arquivo .side manualmente, conclua as etapas a seguir:

       1. Abra o arquivo.side em um editor de texto.

       2. Localize o campo de versão no arquivo. O exemplo a seguir mostra a aparência do campo de versão:

              {
                  "id": "some-id",
                  "version": "3.0",
                    ...
              }
          

       3. Altere a versão para 2.0.

       4. Salve o arquivo .

2. Abra o Selenium IDE na barra de menus. Clique no link Record a new test in a new project e grave um script seguindo as instruções.

   Quando o Selenium IDE está gravando, ele gera um comando para cada ação do usuário em um script.

   

3. Execute ações de teste para pesquisar as palavras-chave instana em Google.

   Pressione Enter para ir para a página de resultados da pesquisa. Adicione uma condição wait nessa página; clique com o botão direito do mouse no ícone de pesquisa e selecione Selenium IDE -> Wait For -> Present. Digite um valor para o tempo limite na propriedade Value para aguardar até que o elemento seja exibido, por exemplo, 10000 para aguardar até 10 segundos.

   

4. Adicione uma asserção para verificar seu teste. Adicione um comando assert ; clique com o botão direito do mouse na página e selecione Selenium IDE -> Assert -> Title.

   Depois de concluir as gravações, clique no botão Stop recording (Parar gravação) no Selenium IDE.

   

5. Você pode adicionar comandos como send keys com o valor de ${KEY_ENTER} para digitar Enter na área de texto da pesquisa.

   Forneça um valor de tempo limite, como 10000 , na propriedade Value do comando wait for element present para aguardar uma condição. Use o mesmo valor Target usado na etapa anterior para localizar o elemento da Web da área de texto de pesquisa. Essa é uma etapa importante para garantir que seu teste seja executado de forma estável e bem-sucedida. Isso é chamado de Explicit Waits (esperas explícitas ) no campo de teste do navegador. A lógica sonda o aplicativo em busca de uma condição específica antes de prosseguir para o próximo comando no código. Se a condição não for atendida antes de um valor de tempo limite designado, será exibido um erro de tempo limite.

   Em seguida, teste seu script e clique em executar.

   

6. Após a gravação, salve o script em um arquivo .side .

   

Para obter mais informações, consulte Selenium IDE Get Started. O exemplo completo pode ser encontrado na seção a seguir.

Considere usar o executor local do Instana Synthetic-browser-script para testar e depurar o script registrado localmente. O Synthetic-browser-script local runner fornece o mesmo tempo de execução do Instana Synthetics e pode ajudá-lo a limpar cookies ou perfis de usuário para cada execução de teste.

Em seguida, você pode criar o teste Selenium IDE na Instana, selecionar Create Synthetic Test -> Browser Script Test -> Switch to Advanced Mode, clicar em Add Script e carregar o arquivo .side .

• Se você não conseguir ver o gráfico da linha do tempo nos resultados do teste na Instana. Você pode verificar se o ID do teste está na propriedade suites -> tests . Sem essa ID de teste, seu teste não executa a reprodução.

  "suites": [{
      "id": "7de135e9-a6c4-4b39-b28a-092bb0d7cbac",
      "name": "Search Instana",
      "persistSession": false,
      "parallel": false,
      "timeout": 300,
      "tests": ["c0283e5a-8cbd-492f-8b3d-f2476f319264"]
  }],
  

• A Instana suporta apenas testes serializados em conjuntos de testes e, portanto, as seguintes propriedades nos scripts do IDE Selenium são substituídas pelo mecanismo de reprodução do navegador Instana:

  • "persistSession": falso
  • "parallel": falso

• Você pode usar os comandos Explicit Wait disponíveis para aguardar que uma condição seja atendida antes de prosseguir com o próximo comando no código. A espera explícita é uma prática recomendada nos testes de navegador. Se a condição especificada não for atendida antes de um valor de tempo limite designado, será exibido um erro de tempo limite. Seu teste falha com um erro. O comando wait mais comumente usado é wait for element present. Digite o valor do tempo limite em milissegundos na propriedade value .

  {
      "id": "d13e50bd-f698-4a04-9420-701a21dcde8d",
      "comment": "",
      "command": "waitForElementPresent",
      "target": "id=searchform",
      "targets": [],
      "value": "10000"
  }
  

• Você pode fazer uma pausa de alguns milissegundos com o comando pause . No exemplo a seguir, o tempo de espera é de 3 segundos.

  {
      "id": "60135a5c-6aee-4b9b-86a5-d9d0fa41deb7",
      "comment": "",
      "command": "pause",
      "target": "3000",
      "targets": [],
      "value": ""
  }
  

Para validar os resultados dos testes automaticamente, você pode usar asserções e Explicit Wait. Se a validação falhar, o status do resultado do teste será exibido como falho. Você pode monitorar as falhas de teste com o Synthetic Smart Alert.

• Você pode esperar até que o elemento necessário esteja presente na interface do usuário antes de um tempo limite designado com wait for element present, assert element present ou outros comandos de espera explícita. Defina um valor para o tempo limite na propriedade value dos comandos wait for . Para os comandos assert , o valor de tempo limite é de 15 segundos.

  {
      "id": "e9a3161a-de29-4557-bbf6-9950c1881425",
      "comment": "",
      "command": "assertElementPresent",
      "target": "linkText=About",
      "targets": [],
      "value": ""
  }
  

• Você pode usar o comando assert title para validar os títulos das páginas.

  {
      "id": "46eb59c2-5fd6-4481-b3e8-eaaddab79a69",
      "comment": "",
      "command": "assertTitle",
      "target": "instana - Google Search",
      "targets": [],
      "value": ""
  }
  

• Você pode usar o comando assert text para confirmar que o texto de um elemento contém o valor fornecido. A propriedade value desse comando deve ser uma correspondência exata de cadeia de caracteres. Selenium O IDE não suporta a correspondência de padrões para o comando.

  {
      "id": "ed733875-5682-4a3b-9a3e-9286f88a62ca",
      "comment": "",
      "command": "assertText",
      "target": "linkText=About",
      "targets": [],
      "value": "About"
  }
  

É possível usar o comando echo para imprimir mensagens de registro nos logs do console para ajudá-lo a solucionar problemas.

{
    "id": "03e23d25-38e3-4051-81ff-740109350ee8",
    "comment": "",
    "command": "echo",
    "target": "Generate a TOTP token from a TOTP key",
    "targets": [],
    "value": ""
}

A maioria dos casos de teste precisa rolar a página para tornar um elemento da Web em foco, visível ou clicável. No script do IDE Selenium, você precisa usar JavaScript para rolagem. Use o comando runScript ou executeScript para implementar a rolagem, conforme mostrado no exemplo a seguir:

• Role até a metade da altura da página:

  {
      "id": "e4d8bc94-cd2c-4648-b64e-952ccfa89aaa",
      "comment": "",
      "command": "runScript",
      "target": "window.scrollTo(0, document.body.scrollHeight/2)",
      "targets": [],
      "value": ""
  }
  

• Role até o final da página:

  {
      "id": "e4d8bc94-cd2c-4648-b64e-952ccfa89aaa",
      "comment": "",
      "command": "runScript",
      "target": "window.scrollTo(0, document.body.scrollHeight)",
      "targets": [],
      "value": ""
  }
  

• Role até o início da página:

  {
      "id": "e4d8bc94-cd2c-4648-b64e-952ccfa89aaa",
      "comment": "",
      "command": "runScript",
      "target": "window.scrollTo(0, 0)",
      "targets": [],
      "value": ""
  }
  

• Role até o elemento da Web e clique nele:

  Aguarde até que o elemento seja localizado, role até ele e clique nele.

  {
      "id": "d13e50bd-f698-4a04-9420-701a21dcde8d",
      "comment": "",
      "command": "waitForElementPresent",
      "target": "id=pnnext",
      "targets": [],
      "value": "20000"
  },
  {
      "id": "b345d354-1d95-45d0-81ab-7c78695ed040",
      "comment": "",
      "command": "runScript",
      "target": "const el = document.getElementById('pnnext'); el.scrollIntoView(); el.click();",
      "targets": [],
      "value": ""
  }
  

  {
      "id": "d13e50bd-f698-4a04-9420-701a21dcde8d",
      "comment": "",
      "command": "waitForElementPresent",
      "target": "css=#pnnext > span:nth-child(2)",
      "targets": [],
      "value": "20000"
  },
  {
      "id": "b345d354-1d95-45d0-81ab-7c78695ed040",
      "comment": "",
      "command": "runScript",
      "target": "const el = document.querySelector('#pnnext > span:nth-child(2)'); el.scrollIntoView(); el.click();",
      "targets": [],
      "value": ""
  }
  

• Para clicar duas vezes na área de filtro e digitar as teclas, você pode usar o exemplo a seguir:

  {
      "id": "60135a5c-6aee-4b9b-86a5-d9d0fa41deb1",
      "comment": "",
      "command": "doubleClickAt",
      "target": "id=repos-list-filter-input",
      "targets": [],
      "value": ""
  }, {
      "id": "60135a5c-6aee-4b9b-86a5-d9d0fa41deb1",
      "comment": "",
      "command": "type",
      "target": "id=repos-list-filter-input",
      "targets": [],
      "value": "instana"
  }
  

• Para digitar a tecla Enter após uma pausa de 3 segundos na área de filtro, você pode usar o exemplo a seguir:

  {
      "id": "60135a5c-6aee-4b9b-86a5-d9d0fa41deb2",
      "comment": "",
      "command": "pause",
      "target": "3000",
      "targets": [],
      "value": ""
  }, {
      "id": "d0239041-5bdf-42be-b920-c5055628f161",
      "comment": "",
      "command": "sendKeys",
      "target": "id=repos-list-filter-input",
      "targets": [],
      "value": "${KEY_ENTER}"
  },
  

No exemplo a seguir, o script do IDE Selenium é usado para pesquisar as palavras-chave da Instana em um mecanismo de busca:

{
  "id": "d54cb226-42e2-493a-9965-c05d209da23a",
  "version": "2.0",
  "name": "test-google-search",
  "url": "https://www.google.com",
  "tests": [{
    "id": "c0283e5a-8cbd-492f-8b3d-f2476f319264",
    "name": "search instana",
    "commands": [{
      "id": "cd6aaf21-62f8-4d7f-af0a-5fe8beee8fde",
      "comment": "",
      "command": "open",
      "target": "/",
      "targets": [],
      "value": ""
    }, {
      "id": "f6ef14b9-0f06-4b62-bb29-41c21a298703",
      "comment": "",
      "command": "click",
      "target": "id=APjFqb",
      "targets": [],
      "value": ""
    }, {
      "id": "ed0b72f9-8da9-4413-8088-819b89f1f6dc",
      "comment": "",
      "command": "type",
      "target": "id=APjFqb",
      "targets": [],
      "value": "instana"
    }, {
      "id": "f9746499-1d97-4f83-aa8a-a5419d9e3922",
      "comment": "",
      "command": "sendKeys",
      "target": "id=APjFqb",
      "targets": [],
      "value": "${KEY_ENTER}"
    }, {
      "id": "93939f21-739f-4c84-bb2e-580af6b1bc76",
      "comment": "",
      "command": "waitForElementPresent",
      "target": "css=.zgAlFc svg",
      "targets": [],
      "value": "10000"
    }, {
      "id": "331e3fc1-9baa-4519-9814-3105d6d06937",
      "comment": "",
      "command": "assertTitle",
      "target": "instana - Google Search",
      "targets": [],
      "value": ""
    }]
  }],
  "suites": [{
    "id": "7de135e9-a6c4-4b39-b28a-092bb0d7cbac",
    "name": "Search Instana",
    "persistSession": false,
    "parallel": false,
    "timeout": 300,
    "tests": ["c0283e5a-8cbd-492f-8b3d-f2476f319264"]
  }],
  "urls": ["https://www.google.com/"],
  "plugins": []
}

• Acesse as credenciais de usuário definidas no servidor de back-end da Instana

  Para criar uma credencial com a Synthetic Open API, conclua as etapas a seguir:

  1. Certifique-se de que você tenha a configuração de permissão adequada.
  2. Use o Synthetic OpenAPI para criar uma credencial, passando as variáveis credentialName e credentialValue .

  Em seguida, em seu script de teste, use $secure.credentialName para se referir à credencial criada, por exemplo, $secure.password ou $secure.username. ${} na propriedade Value no script do IDE Selenium é para se referir às variáveis predefinidas para distinguir da string constante. $secure.credentialName é como acessar as credenciais do usuário na Instana.

  Observação: somente o formato $secure.credentialName é compatível. O formato $secure[credentialName] não é compatível.

  {
      "id": "98b7df8f-ec53-47f9-b7a0-0eedbfc64ff0",
      "comment": "",
      "command": "click",
      "target": "id=email",
      "targets": [],
      "value": ""
  }, {
      "id": "83ae509f-4247-4acc-ab99-46ef4c620f4f",
      "comment": "",
      "command": "type",
      "target": "id=email",
      "targets": [],
      "value": "${$secure.username}"
  }
  

• Gerar uma senha única baseada em tempo (TOTP) a partir de uma chave secreta para fazer login no site com autenticação de dois fatores ( 2FA ).

  {
      "id": "ec51296b-4d16-4167-ac83-ba87f89cc0c7",
      "comment": "Generate a TOTP token from a TOTP key",
      "command": "executeScript",
      "target": "return $browser.generateTOTPToken($secure.totpKey);",
      "targets": [],
      "value": "totpToken"
  }, {
      "id": "3cbc306a-ed33-46bf-9923-92752b0466f2",
      "comment": "",
      "command": "type",
      "target": "id=password",
      "targets": [],
      "value": "${totpToken}"
  }
  

Você pode encontrar as capturas de tela na página de detalhes do resultado do teste da Instana.

{
    "id": "b49ff289-f041-44f1-836b-ba7e993c3f07",
    "comment": "",
    "command": "executeScript",
    "target": "await $browser.takeScreenshot()",
    "targets": [],
    "value": ""
}

É possível usar $synthetic.xxxx, $secure.xxx ou $env.xxx para acessar variáveis globais, conforme mostrado no exemplo a seguir.

Para usar variáveis na sintaxe de cadeias de modelos em JavaScript, como o comando echo , use a sintaxe padrão de Node.js e coloque as variáveis em ${}.

{
    "id": "da853ea2-7253-4938-ad2d-9272f4c6d3e2",
    "comment": "",
    "command": "echo",
    "target": "tag1's value is ${$synthetic.tag1}",
    "targets": [],
    "value": ""
}

{
    "id": "26438c58-868d-4d6d-9e6f-dbe9d8f373fd",
    "comment": "",
    "command": "executeScript",
    "target": "$attributes.set('regionName', 'green-region');",
    "targets": [],
    "value": ""
}

Os atributos personalizados definidos pela API $attributes no script e as propriedades personalizadas definidas por customProperties na definição do teste podem ser acessados nos resultados do teste com a métrica synthetic.tags . Você pode usar a métrica synthetic.tags para filtrar os resultados do teste ou passar um valor personalizado para Carga útil personalizada do Smart Alert .

• Use os comandos Selenium runScript e executeScript para invocar APIs avançadas de teste de navegador.

  Você pode usar os comandos Selenium runScript e executeScript para invocar APIs de teste de navegador predefinidas e variáveis globais no Instana Browser Testing.

  A diferença entre executeScript e runScript é que executeScript suporta o armazenamento do valor retornado em uma variável. Você pode então assert ou echo a variável com ${xxx}. Para armazenar o valor retornado, use a palavra-chave return e forneça um nome de variável no campo de entrada value .

  {
      "id": "ec51296b-4d16-4167-ac83-ba87f89cc0c7",
      "comment": "Generate a TOTP token from a TOTP key",
      "command": "executeScript",
      "target": "return $browser.generateTOTPToken($secure.totpKey);",
      "targets": [],
      "value": "totpToken"
  }, {
      "id": "3cbc306a-ed33-46bf-9923-92752b0466f2",
      "comment": "",
      "command": "echo",
      "target": "Generated TOTO token ${totpToken}",
      "targets": [],
      "value": ""
  }
  

• Defina uma variável de ambiente e use-a nas APIs de teste do navegador.

  {
      "id": "10d09a25-d101-43b0-84df-f22265b7cec6",
      "comment": "",
      "command": "storeJson",
      "target": "{\"proxy\": \"<proxy_server>:8080\", \"noproxy\": \"localhost,google.com,192.168.1.0/24\"}",
      "targets": [],
      "value": "proxyConfig"
  },
  {
      "id": "237bd334-d963-4a73-b9bb-4c31f1dce051",
      "comment": "",
      "command": "runScript",
      "target": "await $browser.setProxy(${proxyConfig.proxy}, ${proxyConfig.noproxy});",
      "targets": [],
      "value": ""
  }
  

• Role até o elemento da Web e clique nele.

  Você pode usar a API de testes do navegador Instana para implementar etapas de rolagem anteriores facilmente. O exemplo mostrado abaixo implementa a lógica dos elementos waiting for element present, waiting for element visible, scrollIntoView e click . A função scrollIntoView pode rolar o elemento para a área visível da janela do navegador.

  {
      "id": "b345d354-1d95-45d0-81ab-7c78695ed040",
      "comment": "",
      "command": "runScript",
      "target": "let element = await $browser.waitForAndFindElement(By.xpath(`//a[contains(.,'Customer stories')]`), 30000); await $browser.executeScript(`arguments[0].scrollIntoView()`, element); await $browser.executeScript(`arguments[0].click()`, element)",
      "targets": [],
      "value": ""
  }
  

{
    "id": "2e91846e-037b-473d-a977-7fbdfe52d1a4",
    "comment": "",
    "command": "executeScript",
    "target": "await $browser.addHostnamesToDenylist(['ajax.googleapis.com/ajax/libs/jquery']);",
    "targets": [],
    "value": ""
}

{
    "id": "a418460e-a0a9-4c68-bbd0-fb78d6495e92",
    "comment": "",
    "command": "runScript",
    "target": "await $network.setProxy(${proxyConfig.proxy}, ${proxyConfig.noproxy});",
    "targets": [],
    "value": ""
}

No exemplo a seguir, os comandos Selenium invocam as APIs de teste do navegador Instana e as variáveis globais.

Exemplo de login e validação da interface do usuário da Instana