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

Vá para one.newrelic.com > All capabilities > Synthetic monitoring.
Clique em Create monitor.
Selecione o bloco User flow / functionality para testar a disponibilidade e a funcionalidade do seu site em diferentes locais.
Configurar o monitor. Preencha os campos desejados. Adicione um nome para seu monitor. Selecione o navegador e os dispositivos emulados que você gostaria de testar.
Clique em Select locations para selecionar o local onde deseja testar o monitor.
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.
Clique em Validate se quiser testar seu script. Isso pode levar alguns minutos dependendo do script.
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.

Localize um elemento pelo seu HTML class, por exemplo class="button". Uma classe geralmente é especificada para estilo CSS. Ao localizar um elemento por classe, o monitor selecionará o primeiro elemento da página que possui aquela classe:

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

Localize um elemento pelo seu HTML exato id, por exemplo id="edit-submit". Esta é uma maneira simples de localizar um elemento de página, mas tome cuidado ao especificar um id que provavelmente não será alterado.

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

Para obter um exemplo de localização de um elemento por seu id, consulte Aguardar a seção de um elemento específico .

Localize um elemento pelo texto vinculado exibido, por exemplo <a href="http://example.com>your link text here</a>. Você pode localizar pelo texto vincular exato $selenium.By.linkText ou por correspondência parcial $selenium.By.partialLinkText:

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

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

Localize um elemento pelo seu HTML exato name, por exemplo name="search-query-field". Isso é mais comumente usado com campos de entrada, como uma caixa de pesquisa:

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

Para obter um exemplo de localização de um elemento por seu name, consulte log em um site.

Para estruturas de páginas mais complexas, você pode usar XPath para localizar o elemento alvo:

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

Os seletores XPath podem falhar quando a estrutura do seu site muda. Para obter dicas sobre como criar bons seletores XPath, consulte Otimizando seletores XPath.

Dica

Para encontrar rapidamente o XPath de um determinado elemento, utilize as ferramentas de desenvolvimento do seu navegador. Por exemplo, do Chrome:

Navegue até o site de destino no Chrome.
Clique com o botão direito no elemento alvo e selecione Inspect element.
No painel Developer Tools que abre automaticamente, procure o elemento alvo em destaque.
Clique com o botão direito no elemento alvo e selecione Copy XPath.

Interaja com elementos

Como um monitor com script controla um navegador Chrome ou Firefox real, com tecnologia Selenium , ele pode interagir com o elemento de 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:

Para clicar em um link ou outro elemento da página, localize o elemento e chame a função click() :

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

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

Para obter um exemplo de clique em um elemento localizado, consulte Localizar por texto vincular.

Dica

Você pode controlar o mouse de outras maneiras com as funções doubleClick(), dragAndDrop(), mouseDown, mouseUp e mouseMove .

Para inserir texto em um campo, localize o campo e chame a função sendKeys() :

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");

Alguns campos podem conter texto padrão. Limpe estes campos antes de enviar texto para eles:

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

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

Para obter um exemplo de inserção de texto em um campo, consulte Localizar por texto vincular.

Dica

Você pode adicionar teclas modificadoras, como ALT e SHIFT com as funções keyDown() e keyUp() .

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.

Importante

Após um tempo de execução máximo de três minutos, o New Relic interrompe manualmente o script.

Instrua o monitor a aguardar que o título da página corresponda a um determinado valor. Isso garante que o browser recebeu pelo menos alguns dados da página de destino. Para aguardar o título da página, especifique um título esperado e um valor de tempo limite em milissegundos:

//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);

Para obter um exemplo de espera pelo título da página, consulte Aguardar o título da página.

Instrua o monitor a aguardar a presença de um elemento da página. Isso é útil quando um elemento do qual seu script depende demora muito para carregar ou simplesmente para garantir que um elemento de página esteja presente antes que seu script clique nele.

Use qualquer uma das funções de localização com a função de espera abaixo. Use a função desejada em vez da função $selenium.By.linkText usada abaixo:

// 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}",
);

Importante

elementIsVisible() não conseguirá encontrar um elemento se ele estiver totalmente atrás de outro elemento ou se tiver tamanho 0. Ele ainda encontrará elementos com opacidade 0.

manualmente os log resultados no do script 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.

Importante

O comprimento máximo do log é de 50.000 bytes. O log de script com mais de 50.000 bytes é truncado.

Para log uma linha de texto estático, chame console.log():

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

Isso resulta na saída:

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

Além de registrar texto estático, você também pode passar variáveis para console.log():

//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);

Procure estes resultados:

// ----------------------------------- 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');

Importante

Isso apenas falsifica o cabeçalho HTTP do agente do usuário para a solicitação ao servidor. Isso não altera o valor de navigator.userAgent.

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.

Importante

For Non-Legacy Runtimes O ambiente de script contém diretórios protegidos contra gravação. Se o seu script exigir o armazenamento de arquivos, acrescente qualquer um dos seguintes caminhos ao nome do arquivo:

runtime/input-output/input/
runtime/input-output/output/

Esta tradução de máquina é fornecida para sua comodidade.

Introdução ao monitor do browser com script

Como criar um script monitor de navegador com

Visite um URL

Sequenciar ações

Localize elementos

Localize por classe CSS

Localizar por ID HTML

Localizar por texto vincular

Localizar por nome

Localizar por XPath

Dica

Interaja com elementos

Clique em elemento da página

Dica

Insira o texto

Dica

Espera e tempos limite

Importante

Aguarde o título da página

Aguarde um elemento específico

Importante

manualmente os log resultados no do script log

Importante

Log texto estático

Passe uma variável para a função log

Desbloquear serviços analíticos

Personalize o agente do usuário

Importante

Importar módulos opcionais

Importante

Esta tradução de máquina é fornecida para sua comodidade.

Introdução ao monitor do browser com script

Como criar um script monitor de navegador com .css-21sua1{background:none;border:none;width:0;padding:0;}

Visite um URL

Sequenciar ações

Localize elementos

Localizar por ID HTML

Localizar por texto vincular

Localizar por nome

Localizar por XPath

Interaja com elementos

Clique em elemento da página

Insira o texto

Espera e tempos limite

Importante

Aguarde o título da página

Aguarde um elemento específico

manualmente os log resultados no do script log

Importante

Log texto estático

Passe uma variável para a função log

Desbloquear serviços analíticos

Personalize o agente do usuário

Importante

Importar módulos opcionais

Importante

Como criar um script monitor de navegador com