Tutorial do driver da Web IO usando um site ativo e exemplos de trabalho: 8 etapas

2024 Autor: John Day | [email protected]. Última modificação: 2024-01-30 11:39

Tutorial do driver da Web IO usando um site da Web ativo e exemplos de trabalho

Última atualização: 2015-07-26

(Volte sempre enquanto eu atualizo este instructables com mais detalhes e exemplos)

Fundo

Recentemente, um desafio interessante foi apresentado a mim. Eu precisava apresentar o teste automatizado a um departamento de Q / A com muito pouca experiência técnica e nenhum conhecimento de programação.

Na verdade, foram dois (2) desafios separados. O primeiro foi identificar as tecnologias para realizar os testes automatizados. A segunda foi treinar o departamento de Q / A.

O artigo abordará apenas as tecnologias usadas e o que aprendi no processo.

As tecnologias funcionaram bem, mas eu realmente tive que pesquisar informações e passei muitas horas tentando resolver os problemas.

Tive dificuldade em encontrar informações na Internet sobre essas tecnologias que funcionavam juntas.

Eu queria compartilhar essas informações, então escrevi este artigo junto com scripts de teste de exemplo de trabalho e um site de teste para executar os scripts.

Todos os scripts de teste podem ser encontrados no github e o site de teste em funcionamento está localizado em Web Driver IO Tutorial Test Site

Eu espero que você ache isso útil. Se você fizer, por favor, conte para mim.

Objetivos Usar tecnologias para:

• Teste a funcionalidade do site
• Funcionalidade de teste de JavaScript
• Pode ser executado manualmente
• Pode ser executado automaticamente

• Linguagem fácil de aprender para não programadores

  Equipe de perguntas e respostas com conhecimento básico de HTML e JavaScript

• Use apenas software de código aberto

Tecnologias

Lista de tecnologias que escolho:

• mocha - executor de teste - executa os scripts de teste
• shouldjs - biblioteca de asserções
• webdriverio - vínculos de controle do navegador (vínculos de linguagem)
• selênio - abstração do navegador e fábrica em execução

• Navegador / drivers móveis + navegadores

  • Firefox (apenas navegador)
  • Chrome (navegador e driver)
  • IE (navegador e driver)
  • Safari (plug-in de navegador e driver)

Etapa 1: Instalação do software

Para começar, você precisa ter o servidor autônomo Node JS, Web Driver IO, Mocha, Should e Selenium instalado.

Aqui estão as instruções de instalação para o Windows 7.

(Sou um usuário Mac / Linux, mas tive que instalar tudo em máquinas com Windows 7, é por isso que incluí para sua referência. O procedimento para instalação em um Mac / Linux é semelhante. Consulte as referências online para mais em formação.)

De um navegador:

• Nó de instalação que inclui NPM (Node Package Manager)
• vá para
  • Clique em instalar
  • Salvar e executar o arquivo
  • Defina o caminho e a variável (NODE_PATH)
  • Vá para Painel de Controle-> Sistema e Segurança-> Sistema
    • Configurações avançadas do sistema

    • Configuração do ambiente (variáveis do usuário)

      • Adicionar ao PATH

        C: / Users {USERNAME} AppData / Roaming / npm;

      • Adicione o NODE_PATH (variáveis do sistema)

        C: / Users {USERNAME} AppData / Roaming / npm / node_modules

Observação: instalei todo o software abaixo usando a opção global npm (-g). Isso normalmente não é recomendado, mas para esta instalação eu precisei instalar globalmente, pois seria usado em vários projetos.

Abra o prompt de comando (cmd):

(administrador de usuário local)

• Instale o selênio "web driver IO"

  • npm install webdriverio -g

    Isso instalará o driver da web IO globalmente em sua máquina

• Instale o software executor de teste “mocha”

  • npm install mocha -g

    Isso irá instalar o mocha globalmente em sua máquina

• Instale a biblioteca de asserções “deveria”

  • npm install deve -g

    Isso irá instalar "deveria" globalmente em sua máquina

• Instale o Selenium Stand Alone Server

  • Vá para
  • Baixe o arquivo jar e vá para o diretório “selenium”.

• Instale navegadores e drivers de navegadores para testar

  • No prompt do cmd:

    • Crie o diretório “selênio”
    • C: / Usuários {NOME DE USUÁRIO} selênio

    • Comandos:

      • cd C: / Usuários {NOME DE USUÁRIO}
      • selênio mkdir

    • Raposa de fogo

      • Instale o navegador firefox, se ainda não estiver instalado.
      • O caminho deve ser definido para iniciar o Firefox a partir do prompt de comando (cmd).
      • Painel de Controle-> Sistema e Segurança-> Sistema
        • Configurações avançadas do sistema
        • Configurações de Ambiente
        • Adicionar (adicionar ponto e vírgula) à variável de caminho
        • C: / Arquivos de programas (x86) Mozilla Firefox
      • Nenhum driver especial da web é necessário para o Firefox.
    • cromada
      • Instale o navegador Chrome, se ainda não estiver instalado.
      • O caminho PODE ser definido para iniciar o Chrome a partir do prompt de comando (cmd).
      • Teste primeiro: chrome.exe no prompt de comando (cmd)
      • Se o Chrome não iniciar:
      • Painel de Controle-> Sistema e Segurança-> Sistema
        • Configurações avançadas do sistema
        • Configurações de Ambiente
        • Adicionar (adicionar ponto e vírgula) à variável de caminho
        • C: / Arquivos de programas (x86) Google / Chrome / Application / chrome.exe

      • Um driver especial da web é necessário para o Chrome.

        Acesse chromium.org e descompacte o driver de 32 bits no diretório “selenium”

    • Internet Explorer (apenas para Windows - não funcionará em outras plataformas)

      • Um driver da web especial é necessário para o IE.

        • Vá para
        • Baixe e descompacte o driver de 64 bits no diretório “selenium”.

Etapa 2: Script de teste básico

Vamos começar com alguns princípios básicos.

Aqui está um script mocha simples que abrirá um site e verificará o título.

// tutorial1.js

// // Este é um script de teste simples para abrir um site e // validar o título. // bibliotecas necessárias var webdriverio = require ('webdriverio'), should = require ('should'); // um bloco de script de teste ou descrição de conjunto ('Title Test for Web Driver IO - Tutorial Test Page Website', function () {// definir o tempo limite para 10 segundos this.timeout (10000); var driver = {}; // gancho para executar antes dos testes antes (function (done) {// carregar o driver do navegador driver = webdriverio.remote ({neededCapabilities: {browserName: 'firefox'}}); driver.init (done);}); // uma especificação de teste - "especificação" it ('deve ser carregada a página e o título corretos', function () {// carregar a página e, em seguida, chamar a função () return driver.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html ') // obter o título e, em seguida, passar o título para function ().getTitle (). then (function (title) {// verificar o título (title).should.be.equal ("Web Driver IO - Página de teste do tutorial "); // descomente para depuração do console // console.log ('Título da página atual:' + título);});}); // um" gancho "para executar após todos os testes neste bloco após (função (concluída) {driver.end (concluído);});});

Observações:

• Você deve primeiro observar que o script de teste está escrito em JAVASCRIPT (termina na extensão.js).

• A estrutura básica é quase idêntica para todos os scripts de teste.

  • Comentários do cabeçalho (//)
  • Bibliotecas necessárias
  • Definir opções (opcional)
  • Gancho: Carregar o driver do navegador
  • Suite de teste (descreva)
  • Especificações de teste (podem ser várias especificações em um conjunto)
  • Gancho: Limpe

• O conjunto de testes começa com uma função de descrição que leva dois parâmetros:

  • String - Descrição do conjunto de testes

    • “Verifique a página para ver o palavreado adequado”
    • “Verificar operações do botão de opção”

  • função - bloco de código a ser executado

    descrever (‘Descrição do conjunto de testes’, função () {});

• O conjunto de testes conterá 1 ou mais especificações de teste (especificação)

• As especificações começam com a função que leva dois parâmetros:

  • String - Descrição da especificação de teste

    • “Devem estar corretos o texto do link e o URL do link"
    • “Deve conter palavreado correto (cópia)
  • função - bloco de código a ser executado
  • it (‘Descrição da especificação de teste’, função () {});
• Uma especificação contém uma ou mais expectativas que testam o estado do código

• Estes são chamados de afirmações

  A biblioteca “deveria” fornece as afirmações

• Em quase todos os casos, você precisará localizar um ou mais elementos usando um seletor e, em seguida, realizar alguma operação no (s) elemento (s)

  • Exemplos:

    • Encontre o texto em uma página e verifique o texto
    • Preencher um formulário e enviar
    • Verifique o CSS de um elemento

Vamos examinar mais de perto o exemplo com comentários

Carregue as bibliotecas necessárias: driver da web IO e deveria.

// bibliotecas necessárias

var webdriverio = require ('webdriverio'), should = require ('should');

Defina o conjunto de testes. Este conjunto é denominado: "Title Test for Web Driver IO - Tutorial Test Page Website"

// um bloco ou pacote de script de teste

describe ('Teste de título para Web Driver IO - Site da página de teste do tutorial', função () {…});

Defina o tempo limite para 10 segundos para que o script não expire ao carregar a página.

// definir o tempo limite para 10 segundos

this.timeout (10000);

Hook para carregar o driver do navegador antes de executar as especificações "especificações". O driver do Firefox é carregado neste exemplo.

// gancho para executar antes dos testes

before (function (done) {// carregar o driver do navegador driver = webdriverio.remote ({neededCapabilities: {browserName: 'firefox'}}); driver.init (done);});

Defina a especificação do teste.

// uma especificação de teste - "especificação"

it ('deve ser carregada página e título corretos', função () {…});

Carregue a página do site

.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html')

Obtenha o título e, em seguida, passe o título para a função ()

.getTitle (). then (function (title) {

… });

Verifique o título usando a biblioteca de asserções.

(título).should.be.equal ("Web Driver IO - Página de teste do tutorial");

Hook para sair e limpar o driver quando terminar.

// um "gancho" para executar após todos os testes neste bloco

after (function (done) {driver.end (done);});

Etapa 3: execute o script de teste

Agora vamos ver o que o script de teste faz quando é executado.

Primeiro inicie o Selenium Stand Alone Server:

• Para Windows, use a linha de comando (cmd):

  • java -jar
  • # java -jar selenium-server-standalone-2.46.0.jar

• Para Mac ou Linux, abra o terminal:

  • java -jar
  • $ java -jar selenium-server-standalone-2.46.0.jar
• Veja a imagem acima

Em seguida, execute o script de teste:

• Para Windows, use a linha de comando (cmd):

  • moca
  • # mocha tutorial1.js

• Para Mac ou Linux, abra o terminal:

  • moca
  • $ mocha tutorial.js
• Veja a imagem acima

Então o que aconteceu?

Mocha invoca o script "tutorial1.js". O driver iniciou o navegador (Firefox), carregou a página e verificou o título.

Etapa 4: Exemplo de site

Todos os exemplos são executados neste site.

O site de exemplo está localizado em: Página de teste do tutorial de IO do driver da Web

Todos os scripts de teste podem ser baixados do github.

Etapa 5: Exemplos específicos

Todo o código está disponível no github: Web Driver IO Tutorial no github

• Verifique o link e o texto do link em uma lista não ordenada - "linkTextURL1.js"

  • A lista não ordenada possui um e o link é o 4º item da lista.
  • O URL deve ser "https://tlkeith.com/contact.html"

// Verifique o texto do link Fale conosco

it ('deve conter o texto do link Fale conosco', function () {return driver.getText ("// ul [@ id = 'mylist'] / li [4] / a"). then (function (link) {console.log ('Link encontrado:' + link); (link).should.equal ("Entre em contato");});}); // Verificar URL de contato it ('deve conter URL de contato', function () {return driver.getAttribute ("// ul [@ id = 'mylist'] / li [4] / a", "href").então (função (link) {(link).should.equal ("https://tlkeith.com/contact.html"); console.log ('URL encontrado:' + link);});});

• Verifique o texto de direitos autorais - "Copyright1.js"

  • Os direitos autorais estão no rodapé. Este exemplo mostra 2 maneiras diferentes de localizar o texto dos direitos autorais:

    • pelo como o seletor de elemento
    • usando xpath como o seletor de elemento

// Verifique o texto de Copyright usando id como seletor de elemento

it ('deve conter texto de Copyright', function () {return driver.getText ("# copyright"). then (function (link) {console.log ('Copyright found:' + link); (link).should. equal ("Tony Keith - tlkeith.com @ 2015 - Todos os direitos reservados.");});}); // Verifique o texto de Copyright usando xpath como seletor de elemento ('deve conter texto de Copyright', function () {return driver.getText ("// footer / center / p"). Then (function (link) {console.log ('Copyright found:' + link); (link).should.equal ("Tony Keith - tlkeith.com @ 2015 - Todos os direitos reservados.");});});

• Preencher campos de formulário e enviar - "formFillSubmit1.js"

  • Preencha o nome, sobrenome e envie, depois aguarde os resultados.

  • Este exemplo mostra 3 métodos de preenchimento do campo de entrada do nome:

    • por id
    • por xpath da entrada
    • por xpath do formulário-> entrada
  • Também mostra como limpar um campo de entrada

// Defina o primeiro nome usando id para: Tony

it ('deve definir o primeiro nome como Tony', function () {return driver.setValue ("# fname", "Tony").getValue ("# fname"). then (function (e) {(e).deve.be.equal ("Tony"); console.log ("Nome:" + e);});}); // Limpe o primeiro nome usando id it ('deve limpar o primeiro nome', function () {return driver.clearElement ("# fname").getValue ("# fname"). Then (function (e) {(e).should.be.equal (""); console.log ("Nome:" + e);});}); // Defina o primeiro nome usando xpath da entrada para: Tony it ('deve definir o primeiro nome para Tony', function () {return driver.setValue ("// input [@ name = 'fname']", "Tony").getValue ("// input [@ name = 'fname']"). then (function (e) {(e).should.be.equal ("Tony"); console.log ("Nome:" + e);});}); // Limpe o primeiro nome usando xpath a partir de sua entrada ('deve limpar o primeiro nome', function () {return driver.clearElement ("// input [@ name = 'fname']").getValue ("// input [@ name = 'fname'] "). then (function (e) {(e).should.be.equal (" "); console.log (" Nome: "+ e);});}); // Defina o primeiro nome usando xpath do formulário para: Tony it ('deve definir o primeiro nome para Tony', function () {return driver.setValue ("// form [@ id = 'search-form'] / input [1] "," Tony ").getValue (" // form [@ id = 'search-form'] / input [1] "). Then (function (e) {(e).should.be.equal ("Tony"); console.log ("Nome:" + e);});}); // Defina o sobrenome usando id para: Keith it ('deve definir o sobrenome para Keith', function () {return driver.setValue ("# lnome", "Keith").getValue ("# lnome"). Então (função (e) {(e).should.be.equal ("Keith"); console.log ("Sobrenome:" + e);});}); // Envie o formulário e aguarde os resultados da pesquisa it ('deve enviar o formulário e esperar pelos resultados', function () {return driver.submitForm ("# search-form"). Then (function (e) {console.log (' Enviar formulário de pesquisa ');}).waitForVisible ("# search-results", 10000).then (function (e) {console.log (' Search Results Found ');});});

• Clique no botão Mostrar / Ocultar e verificar o texto - "showHideVerify1.js"

  • O texto está em um elemento mostrar / ocultar. O botão controla o estado.

  • Este exemplo mostra:

    • Clique no botão para expandir
    • Aguarde até que o elemento esteja visível (expandido)
    • Verifique o texto (cópia)

// clique no botão "Mais informações" e verifique o texto no elemento expandido

it ('deve clicar no botão mais informações e verificar o texto', function () {return driver.click ("# moreinfo"). then (function () {console.log ('Clicked More Info button');}).waitForVisible ("#collapseExample", 5000).getText ("// div [@ id = 'collapseExample'] / div"). then (function (e) {console.log ('Text:' + e); (e).should.be.equal ("Todas as coisas boas vão aqui!");});});

• Validar erros de campo do formulário - "formFieldValidation.js"

  • Use scripts de teste para verificar se as mensagens de erro corretas são produzidas.

  • Este exemplo mostra:

    Verifique as mensagens de texto de erro e verifique a localização (posição da lista não ordenada)

it ('deve conter 5 erros: primeiro / último / endereço / cidade / estado', função () {

return driver.getText ("// ul [@ class = 'alert alert-danger'] / li [1]"). then (function (e) {console.log ('Error found:' + e); (e).should.be.equal ('Insira o primeiro nome');}).getText ("// ul [@ class = 'alert alert-danger'] / li [2]"). then (function (e) {console.log ('Erro encontrado:' + e); (e).should.be.equal ('Digite o sobrenome');}).getText ("// ul [@ class = 'alert alert-perigo '] / li [3] "). then (function (e) {console.log (' Erro encontrado: '+ e); (e).should.be.equal (' Digite o endereço ');}). getText ("// ul [@ class = 'alert alert-danger'] / li [4]"). then (function (e) {console.log ('Erro encontrado:' + e); (e).deve.be.equal ('Insira a cidade');}).getText ("// ul [@ class = 'alert alert-danger'] / li [5]"). then (function (e) {console.log ('Erro encontrado:' + e); (e).should.be.equal ('Insira o estado');}); });

• Loop de dados para validar link / texto / página de URL - "LoopDataExample1.js"

  • Este exemplo mostra: Use uma matriz de dados JSON para armazenar o link e o nome e, em seguida, itere

    • Verifique cada texto e link de URL
    • Clique no link e carregue a página

// Dados do link - link e texto

var linkArray = [{"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/tutorial1.js", "name": "tutorial1.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/linkTextURL1.js "," name ":" linkTextURL1.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/ master / copyright1.js "," name ":" copyright1.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/formFillSubmit1.js "," name ":" formFillSubmit1.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/showHideVerify1.js "," name ":" showHideVerify1.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/dynamicBrowser.js "," name ":" dynamicBrowser.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/ blob / master / callbackPromise.js "," name ":" callbackPromise.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/debugExample1.js "," name ": "debu gExample1.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/formFieldValidation.js "," name ":" formFieldValidation.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/common/commonLib.js "," name ":" commonLib.js "}, {" link ":" https://github.com/onewithhammer/ WebDriverIOTutorial / blob / master / dataLoopExample1.js "," name ":" dataLoopExample1.js "}]; … // percorre cada linkArray linkArray.forEach (function (d) {it ('deve conter texto / link e ir para a página -' + d.name, function () {return driver // certifique-se de que está na página inicial.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html').getTitle (). then (function (title) {// verify title (title).should.be.equal ("Web Driver IO - Página de teste do tutorial ");}) // encontre a URL.getAttribute ('a =' + d.name," href "). Then (function (link) {(link).should.equal (d.link); console.log ('URL encontrado:' + d.link);}) // vá para a página da URL e verifique se ele existe.click ('a =' + d.name).waitForVisible ("# js-repo-pjax- container ", 10000).then (function () {console.log ('Página Github encontrada');});});});

• Loop de dados estáticos para preencher campos de formulário - "loopDataExample2.js"

  • Este exemplo mostra: Use uma matriz de dados JSON para armazenar nome / sobrenome

    • Percorra os dados para preencher os campos do formulário e, em seguida, envie o formulário
    • Aguarde a página de resultados
    • Verifique o nome / sobrenome na página de resultados

// array de dados - firstName e lastNamevar dataArray = [{"firstName": "Tony", "lastName": "Keith"}, {"firstName": "John", "lastName": "Doe"}, {"firstName ":" Jane "," lastName ":" Doe "}, {" firstName ":" Don "," lastName ":" Johnson "}]; … // percorre cada dataArray dataArray.forEach (function (d) {it ('deve preencher os campos, página sumbit', function () {driver de retorno // certifique-se de que está na página inicial.url ('http: / /www.tlkeith.com/WebDriverIOTutorialTest.html ').getTitle (). then (function (title) {// verify title (title).should.be.equal ("Web Driver IO - Página de teste do tutorial");}).setValue ("# fname", d.firstName).getValue ("# fname"). then (function (e) {(e).should.be.equal (d.firstName); console.log ("Primeiro Nome: "+ e);}).setValue (" # lnome ", d.lastName).getValue (" # lnome "). Then (function (e) {(e).should.be.equal (d.lastName); console.log ("Sobrenome:" + e);}).submitForm ("# formulário de pesquisa"). then (function () {console.log ('Enviar formulário de pesquisa');}).waitForVisible ("# search-results", 10000).then (function () {console.log ('Result Page Found');}).getText ("// h1"). then (function (link) {console.log ('Texto encontrado:' + link); (link).should.equal ("Bem-vindo" + d.firstName + "" + d.lastName + ".");});});});

• Validar propriedades CSS - "cssValidation1.js"

  • Este exemplo mostra como:

    • Valide as seguintes propriedades CSS:

      • cor
      • preenchimento (superior, inferior, direita, esquerda)
      • cor de fundo

it ('deve conter a cor correta do texto do erro', function () {return driver.getCssProperty ("// ul [@ class = 'alert alert-danger'] / li [1]", "color"). then (function (result) {console.log ('Color found:' + result.parsed.hex + "ou" + result.value); (result.parsed.hex).should.be.equal ('# a94442'); });});

it ('deve conter preenchimento correto na célula da tabela', function () {

driver de retorno // preenchimento: canto superior direito inferior esquerdo.getCssProperty ("// tabela [@ id = 'filelist'] / thead / tr [1] / td [1]", "preenchimento superior"). then (função (resultado) {console.log ('padding-top found:' + result.value); (result.value).should.be.equal ('10px');}).getCssProperty ("// tabela [@ id = 'filelist'] / thead / tr [1] / td [1] "," padding-bottom "). then (function (result) {console.log ('padding-bottom found:' + result.value); (result.value).should.be.equal ('10px');}).getCssProperty ("// tabela [@ id = 'filelist'] / thead / tr [1] / td [1]", "padding- right "). then (function (result) {console.log ('padding-right found:' + result.value); (result.value).should.be.equal ('5px');}).getCssProperty ("// table [@ id = 'filelist'] / thead / tr [1] / td [1]", "padding-left"). then (function (result) {console.log ('padding-left found: '+ result.value); (result.value).should.be.equal (' 5px ');}); });

it ('deve conter a cor de fundo correta no cabeçalho da tabela', function () {

return driver.getCssProperty ("// table [@ id = 'filelist'] / thead", "background-color"). then (function (result) {console.log ('background color found:' + result.parsed. hex); (result.parsed.hex).should.be.equal ('# eeeeee');}); });

Etapa 6: dicas e truques

• Depurando:

  • Ative o log no nível do driver para mais depuração e para criar logs.

    • Defina logLevel como 'verbose'
    • Defina logOutput para o nome do diretório ('logs')

driver = webdriverio.remote (loglevel: 'verbose', logOutput: 'logs', {neededCapabilities: {browserName: 'firefox'}});

• Use console.log (), debug (), getText () para depurar.

  • console.log () - Use para exibir informações para determinar o estado.
  • debug () - Use pause o navegador / script até que enter seja pressionado na linha de comando.

  • getText () - Use para verificar se você está interagindo com o elemento correto.

    Especialmente útil com expressões xpath

// Clique no item 3 da lista

it ('deve clicar no item 3 da lista', function () {// use getText () para verificar se o xpath está correto para o driver de retorno do elemento.getText ("// ul [@ id = 'mylist'] / li [3] / div / div / a "). Then (function (link) {// use console.log () para gerar informações console.log ('Link encontrado:' + link); (link).deve.equal ("Item 3");}) // use debug () para interromper a ação e ver o que está acontecendo no navegador.debug ().click ("// ul [@ id = 'mylist'] / li [3] /div/div/a").then (function () {console.log ('Link clicked');}) // aguarde até que o formulário de pesquisa do Google apareça.waitForVisible ("# tsf", 20000).then (function (e) {console.log ('Resultados da pesquisa encontrados');});});

• Use a variável de ambiente para alterar o navegador dinamicamente:

  • Use a variável de ambiente SELENIUM_BROWSER para chamar um navegador diferente sem modificar o script de teste a cada vez.
  • Requer uma ligeira alteração de codificação para oferecer suporte.

Mudanças de código:

// carregue o driver para o navegador

driver = webdriverio.remote ({neededCapabilities: {browserName: process.env. SELENIUM_BROWSER || 'chrome'}});

Navegadores Suportados:

• Internet Explorer - IE 8+ (somente Windows)

  SELENIUM_BROWSER = ie mocha

• Firefox 10+ (Windows / Max / Linux)

  SELENIUM_BROWSER = firefox mocha

• Chrome 12+ (Windows / Max / Linux)

  SELENIUM_BROWSER = cromo mocha

• Opera 12+

  SELENIUM_BROWSER = opera mocha

• Safári

  SELENIUM_BROWSER = safari mocha

Teste:

• Para Windows, use git bash shell:

  • SELENIUM_BROWSER = cromo mocha
  • $ SELENIUM_BROWSER = chrome mocha DynamicBrowser.js

• Para Mac ou Linux, abra o terminal:

  • SELENIUM_BROWSER = cromo mocha
  • $ SELENIUM_BROWSER = chrome mocha DynamicBrowser.js

• Teste responsivo:

  • Determine pontos de interrupção com base no projeto ou estrutura (ou seja, bootstrap).

  • Defina variáveis de ambiente para cada ponto de interrupção:

    • DESKTOP - 1200 px
    • TABLET - 992 px
    • CELULAR - 768 px

  • Desenvolva um comando reutilizável para ler a variável de ambiente e definir o tamanho do navegador.

    Veja o exemplo abaixo

  • Chame o comando reutilizável em seu script de teste.

// código reutilizável - biblioteca // trecho de código if (bp == "DESKTOP") {obj.width = 1200; obj.altura = 600; obj.name = bp; } else if (bp == "TABLET") {obj.width = 992; obj.altura = 600; obj.name = bp; } else if (bp == "MOBILE") {obj.width = 768; obj.altura = 400; obj.name = bp; }

// Script de teste

before (function (done) {winsize = common.getWindowSizeParams ();… driver.addCommand ('setWindowSize', common.setWindowSize.bind (driver));} // definir o tamanho da janela ('deve definir o tamanho da janela', function (done) {// apenas a largura importa driver.setWindowSize (winsize.width, winsize.height, function () {}). call (done);});

• Comandos reutilizáveis (comandos personalizados):

  • O Web Driver IO é facilmente extensível.
  • Gosto de colocar todos os comandos reutilizáveis em uma biblioteca. (talvez isso seja antigo, mas funciona!)

common / commonLib.js

// verifyLastNameCheckError ()

// // Descrição: // Verifica a mensagem de erro de validação do formulário do sobrenome // // Entrada: // número - índice do erro (1-5) // Saída: // nenhum // var verifyLastNameCheckError = function () { var idx = argumentos [0], retorno de chamada = argumentos [argumentos.comprimento - 1]; this.getText ("// ul [@ class = 'alert alert-danger'] / li [" + idx + "]", função (err, e) {console.log ('Erro encontrado:' + e); (e).should.be.equal ('Insira o sobrenome');}).call (callback); }; // exporte a função module.exports.verifyLastNameCheckError = verifyLastNameCheckError;

Aqui estão as mudanças específicas necessárias para chamar uma função reutilizável

Veja formFieldValidation.js para um exemplo de trabalho completo

// requer o comando reutilizável - CommonLib

comum = requer ('./ Comum / CommonLib'); … // vincular os comandos driver.addCommand ('verifyFirstNameError', common.verifyFirstNameCheckError.bind (driver)); driver.addCommand ('verifyLastNameError', common.verifyLastNameCheckError.bind (driver)); it ('deve conter 2 erros: nome / sobrenome', function () {// chamar o driver de função reutilizável.verifyFirstNameError (1);.verifyLastNameError (2);});

• Arquivo de Projeto / Estrutura de Diretório:

  • Aqui está uma estrutura típica de projeto:

    • "Projeto" - diretório principal do projeto

      • README.md - leia-me para projeto global

      • "Comum" - diretório para funções globais comuns a todos os projetos

        • common-lib.js - biblioteca de função global
        • README.md - leia-me para funções globais

      • "Product1" - diretório para o produto 1

        • test-script1.js
        • test-script2.js

        • "Comum" - diretório para funções locais para o projeto 1

          • prod1-lib.js - biblioteca de funções local para o projeto 1
          • README.md - leia-me para funções locais para o projeto 1

      • "Product2" - diretório para o produto 2test-script1.jstest-script2.js

        • "Comum" - diretório para funções locais para o projeto 2

          • prod2-lib.js - biblioteca de funções local para o projeto 2
          • README.md - leia-me para funções locais para o projeto 2

• Divida os scripts de teste em vários arquivos:

  • Aqui está um exemplo do uso de vários arquivos:

    • Verificação de sanidade - script de teste básico para verificar se tudo está funcionando
    • Validação de elemento estático e texto - verifique todos os elementos e texto
    • Validação de erro de formulário / página - validação de erro
    • Resultados da pesquisa - teste o conteúdo dinâmico

• Callbacks VS. Promessas:

  • A versão 3 do Web Driver IO suporta retornos de chamada e promessas.

    Promessas são o método preferido, pois reduzem o código de tratamento de erros. Veja abaixo o mesmo exemplo escrito usando retornos de chamada e promessas.

Callbacks

// Definir / verificar nome / sobrenome usando Callback

it ('deve definir / verificar o nome / sobrenome usando Callbacks', function (done) {driver.setValue ("# fname", "Tony", function (e) {driver.getValue ("# fname", function (err, e) {(e).should.be.equal ("Tony"); console.log ("Nome:" + e); driver.setValue ("# lnome", "Keith", função (e) { driver.getValue ("# lnome", função (err, e) {(e).should.be.equal ("Keith"); console.log ("Sobrenome:" + e); done ();});});});});});

Promessas

// Definir / verificar nome / sobrenome usando promessas

it ('deve definir / verificar nome / sobrenome usando promessas', function () {return driver.setValue ("# fname", "Tony").getValue ("# fname"). then (function (e) {(e).should.be.equal ("Tony"); console.log ("Nome:" + e);}).setValue ("# lname", "Keith").getValue ("# lname"). então (function (e) {(e).should.be.equal ("Keith"); console.log ("Sobrenome:" + e);});});

Etapa 7: Mais recursos

Aqui estão alguns recursos adicionais para sua referência:

• Grupos de discussão (Gitter)

  • Grupo de discussão de IO do driver da web
  • Grupo de discussão Mocha

• Outros projetos interessantes

  • Superteste - asserções
  • Chai - afirmações

Etapa 8: Conclusão

Passei algum tempo pesquisando as tecnologias para usar em meu projeto. Eu comecei originalmente com o Selenium Web Driver, mas mudei para o Web Driver IO. O Web Driver IO parecia ser mais fácil de usar e muito mais fácil de estender (pelo menos a documentação para estender - comandos reutilizáveis era melhor).

Quando comecei a olhar para as tecnologias, era difícil encontrar bons exemplos que fossem relativos a qualquer coisa que eu estava tentando fazer. Este é o motivo pelo qual queria compartilhar essas informações e conhecimento com você.

As tecnologias funcionaram muito melhor do que eu esperava, no entanto, houve uma curva de aprendizado envolvida. Depois que entendi como todos os componentes funcionavam juntos, fui capaz de escrever scripts de teste complicados em um tempo muito curto. Os scripts mais difíceis eram componentes baseados em JavaScript, como um selecionador de data e seletores modais.

Eu nunca me rotulei como um desenvolvedor JavaScript nem sempre quis ser um especialista em JavaScript, mas usar essas tecnologias definitivamente me motivou a aprimorar minhas habilidades em JS.

Espero que este artigo seja útil e os exemplos sejam claros e informativos.

Por favor, deixe-me saber se você tiver alguma dúvida ou comentário.

Obrigado, Tony Keith