Introdução ao monitor do browser com script

O navegador com script emula uma experiência personalizada do usuário por navegador de script que navega em seu site, executa ações específicas e garante que elementos específicos estejam presentes. Selenium Webdriver conduz monitor com script. Cada vez que seu script é executado, a New Relic cria um navegador Google Chrome totalmente virtualizado baseado em Selenium que navega em seu site e segue cada etapa do script. O monitoramento sintético inclui um editor script estilo IDE que sugere funções, localizador e outros elementos para simplificar o script. Consulte Referência do navegador com script para obter uma lista de todas as funções disponíveis.

Como criar um script monitor de navegador com

1. Vá para one.newrelic.com > All capabilities > Synthetic monitoring.

2. Clique em Create monitor.

3. Selecione o bloco User flow / functionality para testar a disponibilidade e a funcionalidade do seu site em diferentes locais.

   

4. Configure o monitor. Preencha os campos que desejar. Adicione um nome para o seu monitor.

   

5. Clique em Select locations para selecionar o local onde deseja testar o monitor.

   

6. Clique em Write script para adicionar seu script descrevendo as ações que você deseja que o monitor execute. O monitor preenche previamente o editor com um script de exemplo com o qual você pode trabalhar ou pode removê-lo e começar do zero.

7. Clique em Validate se quiser testar seu script. Isso pode levar alguns minutos dependendo do script.

8. Clique em Save monitor.

Visite um URL

Todos os scripts começam especificando para qual URL o monitor deve navegar. Para especificar um URL, chame $webDriver.get("url"):

await $webDriver.get("https://mywebsite.com");

Sequenciar ações

Como o WebDriverJS é assíncrono, as ações de script às vezes podem ser executadas fora de ordem. Para forçar a execução das ações do script em ordem, use a palavra-chave await :

await $webDriver.get("https://my-website.com");
await $webDriver.findElement($selenium.By.linkText("Configuration Panel"));

Você também pode agrupar cada ação em uma chamada then(function(){}) . Mas, nesse caso, a função encapsulada deve return cada função assíncrono para garantir que sejam concluídas antes que o script prossiga:

$webDriver.get("https://my-website.com").then(function(){
    return $webDriver.findElement($selenium.By.linkText("Configuration Panel"));
});

Para conectar diversas ações em sequência, envolva cada ação em uma chamada then(function(){}) e encadeie as chamadas:

$webDriver.get("https://my-website.com").then(function(){
    return $webDriver.findElement($selenium.By.linkText("Configuration Panel"));
}).then(function(){
    return $webDriver.findElement($selenium.By.partialLinkText("Configuration Pa"));
});

Localize elementos

Depois de especificar um URL para monitor, normalmente você desejará localizar um elemento específico na página. Localizar um elemento verifica sua presença na página e também permite interagir com o elemento da página.

Você pode localizar elementos por class, id, link text, name ou mesmo XPath. Para encontrar esses atributos, utilize as ferramentas de desenvolvimento do seu navegador ou visualize o código-fonte do seu site. Para obter uma lista de todas as funções do localizador, consulte localizador: Localizar elemento da página.

await $webDriver.findElement($selenium.By.className("button"));

await $webDriver.findElement($selenium.By.id("edit-submit"));

await $webDriver.findElement($selenium.By.linkText("Configuration Panel"));

await $webDriver.findElement($selenium.By.partialLinkText("Configuration Pa"));

await $webDriver.findElement($selenium.By.name("search-query-field"));

await $webDriver.findElement($selenium.By.xpath("//input[@placeholder = 'search-query-field']"));

Interaja com elementos

Como um monitor com script aciona um navegador Google Chrome real com tecnologia Selenium , o monitor com script pode interagir com o elemento da página da mesma forma que um usuário faria. Por exemplo, o monitor pode clicar em um link, inserir texto em uma caixa de pesquisa, etc. Para obter uma lista de ações disponíveis, consulte ActionSequence: vincular várias ações.

Primeiro, localize o elemento de página e depois chame uma função de interação:

await $webDriver.findElement($selenium.By.linkText("Configuration Panel")).click();

await $webDriver.findElement($selenium.By.className("config-panel-02")).click();

await $webDriver.findElement($selenium.By.name("search-query-field")).sendKeys("EXAMPLE USER NAME");

await $webDriver.findElement($selenium.By.id("search-q-box")).sendKeys("EXAMPLE USER NAME");

await $webDriver.findElement($selenium.By.name("search-query-field")).clear();

await $webDriver.findElement($selenium.By.id("search-q-box")).clear();

Espera e tempos limite

Elementos de página grandes, como imagens ou conteúdo dinâmico complexo, podem demorar muito para carregar. Seu script poderá falhar se o monitor tentar interagir ou localizar um elemento que ainda não foi carregado.

Para evitar esses problemas, defina condições de espera que pausarão o script até que o elemento de página especificado esteja presente ou sequencie ações manualmente. Para obter uma lista de condições, consulte Condições: pausar e aguardar condições.

//Call the wait function
await $webDriver.wait(async function() {
  //Tell the monitor to get the page title.
  var title = await $webDriver.getTitle();
  //Specify the expected page title.
  return title === "Your Page Title Here";
//If the condition is not satisfied within a timeout of 1000 milliseconds (1 second), proceed anyway.
}, 1000);

// Tell the monitor to wait up to 7,500 milliseconds (7.5 seconds) for a link whose text is `Your Link Text Here`.
var linkText = "Your Link Text Here"

var element = await $webDriver.wait(
  $selenium.until.elementLocated(
    $selenium.By.linkText(linkText),
  ),
  7500,
  'Timed-out waiting for element to be located using link text: "' +linkText+ '"',
);
// Wait for the element to be visible
await $webDriver.wait(
  $selenium.until.elementIsVisible(element),
  7500,
  "Timed-out waiting for element to be visible using ${element}",
);

Resultados do script de log

Você também pode log manualmente os resultados do monitor no logdo script. Use o log para solucionar problemas de um script: para descobrir qual etapa do seu script está falhando, inclua uma função de log junto com cada etapa principal do seu script.

//Send `Hello world.` to the console log.
console.log('Hello world.');

// ----------------------------------- Console log
Hello world.

//Declare the variable `WEBSITE_URL`
var assert = require('assert'),
  WEBSITE_URL = 'https://my-website.com/';

console.log('Hello world.');
//Load the website specified in `WEBSITE_URL`
await $webDriver.get(WEBSITE_URL);
//Log our success to the console
console.log('Success for', WEBSITE_URL);

// ----------------------------------- Console log
Hello world.
Success for https://my-website.com/

Desbloquear serviços analíticos

O Sintético bloqueia a execução de scripts de serviços analíticos populares por padrão. Você pode permitir que o script seja executado para serviços específicos. Isso permite que o script do serviço seja executado e colete dados como faria para um usuário real.

//Allow Google Analytics scripts to run
await $urlFilter.addToAllowList(['google-analytics.com']);

//Visit https://my-website.com
await $webDriver.get('https://my-website.com');

Personalize o agente do usuário

Você pode personalizar o agente de usuário do browser com script para garantir que quaisquer correções específicas do browser em seu aplicativo estejam funcionando corretamente ou para ignorar um mecanismo de segurança para filtrar um site interno.

//Simulate Internet Explorer 10.6
$headers.add('User-Agent', 'Mozilla/5.0 (compatible; MSIE 10.6; Windows NT 6.1; Trident/5.0; InfoPath.2; SLCC1; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET CLR 2.0.50727) 3gpp-gba UNTRUSTED/1.0');

//Visit http://httpbin.org/user-agent
await $webDriver.get('http://httpbin.org/user-agent');

Importar módulos opcionais

Você também pode importar muitos módulos populares do Node.js para aprimorar seu conjunto de testes, automatizar a inserção de dados de teste e simplificar funções complexas. Para obter mais informações, consulte Importando módulos Node.js.