Menu

Ferramenta de teste de transferidor para teste de ponta a ponta de aplicativos AngularJS

protractor testing tool

Experimente Nosso Instrumento Para Eliminar Problemas

O que é transferidor?

O Protractor é uma ferramenta de teste de automação para teste de aplicativos da web; combinando tecnologias poderosas como Jasmine, Selenium Webdriver, Node.js etc.

A ferramenta de teste Protractor é uma estrutura de teste orientada por comportamento de ponta a ponta, projetada para manter os aplicativos Angular JS em mente. Mesmo que pareça que o Protractor não funcionará com aplicativos JS não angulares, ele funciona.

Ele funciona com aplicativos JS angulares e não angulares igualmente bem.

Sinta-se à vontade para explorar o toda a série de tutoriais AngularJS . Em nosso tutorial anterior, a diferença entre as versões angulares foi explicado em detalhes.

Tutorial de teste de transferidor

O que você aprenderá:

Transferidor vs Selênio WebDriver

O que torna o Transferidor diferente do tradicional Selenium WebDriver ?

Reserve um minuto para responder a estas perguntas:

  • É difícil determinar quando exatamente a página da web está finalmente carregada (todos os elementos assíncronos estão prontos e processados)?
  • Você está cansado de adicionar esperas e latências ao seu código?
  • Você quer se livrar do esforço incômodo de localizar os elementos angulares?
  • Frustrado com a localização de elementos com a mudança de Ids?
  • Você quer criar seu próprio localizador?
  • Você está escrevendo um código longo, mesmo para as afirmações mais simples?
  • Você é um entusiasta / fã de JavaScript?

Se você respondeu Sim a essas perguntas, Transferidor pode ajudar.

É um wrapper construído em cima do Selenium Webdriver e, portanto, fornece todos os recursos do Selenium junto com muitas adições úteis. Oferece:

Características

Oferece:

1) WaitForAngular

o que é uma lista ligada c ++

Da documentação:

' Instrua o WebDriver a aguardar até que o Angular termine a renderização e não tenha nenhuma chamada pendente $ http ou $ timeout antes de continuar. Observe que o Protractor aplica automaticamente este comando antes de cada ação do WebDriver. '

O que isso significa é que não há necessidade de adicionar esperas manualmente ao seu script e o Protractor esperará automaticamente que os elementos da web sejam carregados e só então executa as próximas etapas.

dois) Ele tem a capacidade de exportar uma função global elemento , que pega um localizador e retornará um ElementFinder. Este ElementFinder possui um conjunto de métodos de ação, como click (), getText (), sendKeys () etc. Este é o núcleo de como interagir com o elemento e obter informações dele.

Esta função global ajuda a reduzir a sintaxe de localização do elemento. Dê uma olhada na seguinte instrução para localizar o elemento no Selenium WebDriver e no Protractor:

Selenium Webdriver :

driver.findElement(By.cssSelector('css selector'));

Transferidor :

element(by.css('some-css'));

A sintaxe parece compacta, não é?

3) Algumas novas estratégias e funções do localizador fornecidas para ajudar a localizar os elementos angulares são: By.binding, By.repeater, By.textarea, By.model, WebElement.all, WebElement.evaluate etc.

Como o Transferidor pode me ajudar?

Dê uma olhada nos seguintes recursos importantes:

  • Sintaxe simples para escrever casos de teste
  • A capacidade de executar vários navegadores ao mesmo tempo usando Selenium Grid
  • Localizadores angulares específicos
  • Suporte para desenvolvimento orientado por comportamento, como Jasmine / Mocha
  • Não há necessidade de adicionar dorme / espera
  • Integração compatível com Jenkins / Browser Stack / Grunt etc.
  • Livre-se de lidar com o problema de sincronização em sites Angular JS
  • Suporte a vários navegadores (Firefox, Chrome, Safari, Internet explorer)
  • Capacidade de executar os mesmos scripts em navegadores móveis, também sem a necessidade de alterar o código

Qual Framework usar?

Suporta duas estruturas de teste de desenvolvimento orientado por comportamento (BDD) prontas para usar:

  • Jasmim: Jasmim é a estrutura de teste padrão quando o Protractor é instalado. Usaremos Jasmine neste artigo.
  • Mocha: Mocha é uma estrutura de teste JavaScript que roda em Node.js. Se você deseja usar o Mocha como sua estrutura de teste, você terá que configurá-lo com seu Transferidor e também precisará usar a interface de Desenvolvimento Orientado por Comportamento e Asserções Chai com Chai como Prometido (consulte esse link para mais detalhes )

Como baixar e configurar o transferidor

Como é um programa node.js, você precisa instalar node.js para colocá-lo em execução. O Node.js pode ser baixado deste URL selecionando o sistema operacional: Download Node.js

Com node.js, você também obtém Transferidor acima do nível do mar pacote, que agora pode ser usado para instalar o Protractor.

Agora que node.js está instalado em sua máquina, abra o prompt de comando (cmd) e pressione o comando abaixo para instalá-lo globalmente:

npm install -g protractor

‘-G’ é usado para instalar esta ferramenta globalmente. Remova-o se não quiser instalá-lo globalmente. Este comando também instala a API do Protractor junto com um servidor selenium padrão, o que significa que você não precisa necessariamente iniciar um servidor autônomo.

Agora, precisamos instalar o servidor selenium e o ChromeDriver. Use o seguinte comando (também vem com o Protractor) no cmd:

webdriver-manager update

Isso é tudo de que precisamos para começar a escrever nosso primeiro caso de teste usando este framework. Se desejar, você pode instalar qualquer IDE / editor para escrever seu código. Eclipse IDE é o mais popular, mas também existem alguns editores mais interessantes a serem considerados. Pessoalmente, prefiro o editor ‘Atom’ para minha escrita de código do Protractor.

Pronto para criar seu primeiro caso de teste?

São necessários 2 arquivos para ser executado:

  • Arquivo de configuração
  • Arquivo de especificações.

O Arquivo de configuração é o que diz ao Protractor onde encontrar os arquivos de teste (especificações) / qual navegador escolher / qual estrutura usar (Jasmine / Mocha) / onde falar com seu navegador Selenium e outras configurações. Se alguma configuração não estiver definida nos arquivos de configuração, ele usará os padrões.

O arquivo de especificação é aquele em que escrevemos nosso código de teste real. Todos os nossos fluxos / asserções funcionais de teste estarão neste arquivo específico. Pode haver vários arquivos de especificações com base no número de casos de teste, mas apenas 1 arquivo de especificações será capaz de executar todo o conjunto de testes de várias especificações.

Exemplo de caso de teste:

Agora, escreveremos um caso de teste simples em que navegaremos até uma URL e verificaremos o título da página.

Aqui estão as etapas:

  • Crie uma nova pasta para seu conjunto de testes.
  • Crie um novo arquivo com o nome ‘ js '. (Qualquer nome servirá) Todos os arquivos de especificação / configuração serão da extensão' .js '.
  • Crie um novo arquivo com o nome especificado como ‘ js '.
//CheckTitleSpec.js describe('Protractor Demo', function() { it('to check the page title', function() { browser.ignoreSynchronization = true; browser.get('https://www.softwaretestinghelp.com/'); browser.driver.getTitle().then(function(pageTitle) { expect(pageTitle).toEqual('Software Testing Help - A Must Visit Software Testing Portal'); }); }); });

Agora, estamos prontos para começar nossa codificação. Veja o código abaixo do arquivo ‘testCaseNameSpec.js’.

Aqui está a aparência do arquivo de configuração:

// conf.js exports.config = { framework: 'jasmine', capabilities: { browserName: 'chrome', }, specs: ('simpleTestSpec.js') };

Agora vamos quebrar esses 2 arquivos e ver como funciona.

# 1) Spec.js

  • Todos os comandos de nível do navegador serão tratados por ‘ navegador ', Um global criado pelo Transferidor.
  • Como estamos seguindo a estrutura Jasmine, ‘ descrever ' e ' isto 'São as sintaxes de Jasmine. Descrever conterá todo o fluxo de ponta a ponta do seu caso de teste, enquanto ‘isso’ pode conter algumas das etapas / cenários de teste etc. Você pode ter vários ‘ isto 'Blocos em seu programa, se desejar.
  • browser.get é uma sintaxe Selenium simples que diz ao Protractor para acessar um URL específico no navegador.
  • Como o site que estamos tentando acessar não é angular, definimos o ignoreSynchronization tag para ‘ verdade 'Conforme exibido na linha # 4. Se você não tornar esta tag verdadeira, seu teste falhará com o erro 'Angular não pôde ser encontrado na página'. A razão por trás disso é que o Protractor espera trabalhar com sites angulares por padrão, e se estivermos usando o Protractor para validar o site não angular, precisamos informar isso explicitamente ao Protractor. No entanto, se você estiver trabalhando em sites angulares, não há necessidade de usar esta declaração, pois o Protractor irá, por padrão, considerar a página web angular.
  • ‘Esperar’ nada mais é do que a afirmação em que comparamos o título da página da web a alguns dados predefinidos. Discutiremos mais afirmações em detalhes.

#dois) conf.js

  • Conforme discutido anteriormente, o arquivo de configuração é aquele que informa ao Protractor os detalhes principais. Conforme exibido no código, a estrutura é ‘Jasmine’.
  • Dentro da seção de recursos, as configurações do navegador são definidas. Você pode definir o nome do navegador, como Firefox / cromo etc. Você também pode definir as instâncias máximas dos navegadores para que, ao mesmo tempo, possa executar vários casos de teste em diferentes janelas de navegador disponíveis.
  • No ' especificações ', Fornecemos o caminho do arquivo de especificação, ou seja, exatamente onde o arquivo de especificação está localizado em relação ao arquivo de configuração.
  • Existem também muitos outros recursos interessantes que você pode anexar ao seu arquivo de configuração, como relatórios / função onPrepare / limite de tempo, etc. Cobriremos alguns deles neste tutorial.

Como executar seus casos de teste?

Nós escrevemos o código e agora tudo o que precisamos é um pequeno empurrão para que nosso código funcione. Pressione o seguinte comando em cmd para executar seu programa:

protractor conf.js

Este comando iniciará a execução do servidor selenium, seguido pela execução do script de teste. Você pode ver os logs no próprio cmd ou, se desejar, os logs podem ser capturados em um arquivo .txt também (apenas adicione >> textFileName.txt após o comando acima e os logs serão salvos no arquivo texto localizado no mesmo diretório do arquivo de configuração).

Uma janela cromada será aberta, onde SoftwareTestingHelp.com o site deve ser aberto. A saída seria '1 especificação, 0 falha' quando você executar o código. O que isso significa é que tínhamos 1 bloco ‘it’, que foi executado com 0 falhas.

Agora, considere o arquivo de especificações abaixo, onde estamos realizando algumas ações em uma página da web construída em AngularJS para que você possa ver a abordagem do transferidor sobre o Selenium quando se trata de testar o site Angular:

classificação rápida em c ++
// spec.js describe('Code to interact with Angular JS elements', function() { it('should multiply two integers', function() { browser.get('http://juliemr.github.io/protractor-demo/'); element(by.model('first')).sendKeys(5); element(by.model('second')).sendKeys(5); element(by.model('operator')).click(); element(by.xpath('.//option(@value= 'MULTIPLICATION')')).click(); element(by.id('gobutton')).click(); expect(element(by.binding('latest')) .getText()).toEqual('10'); //Incorrect expectation expect(element(by.binding('latest')) .getText()).toEqual('25'); //Correct expectation }); });

Você pode usar o mesmo conf.js para executar esta especificação também. Apenas certifique-se de atualizar o nome do arquivo de especificação.

Agora, neste arquivo de especificações, estamos brincando com um site JS angular para que você possa ver do que exatamente o Protractor é capaz.

Se você executar este arquivo como fizemos anteriormente, uma página da web será aberta com 2 caixas de texto, uma lista suspensa, um botão e alguns outros elementos da web. Como você já deve ter adivinhado, é uma página de calculadora. Estamos fornecendo 2 inteiros como entrada e realizando uma operação de multiplicação.

Como já discutimos, uma das maiores vantagens de usar esta ferramenta são suas técnicas exclusivas para localizar os elementos angulares. ‘Por.modelo’ é uma forma de localizar elementos. ‘.SendKeys ()’ é a sintaxe usual do Selenium para enviar valores em caixas de texto e '.clique()' é usado para clicar nos botões.

Como discutido anteriormente, 'Espero' é uma afirmação que pede ao Transferidor para capturar o resultado da multiplicação dos números e compará-lo com '10' e '25' sequencialmente. A matemática simples nos diz que a saída deve ser '25' e, portanto, a primeira afirmação falha e a segunda é aprovada.

Como resultado, você obterá ' 1 especificação, 1 falha 'Nos registros quando você executa o código, o que é esperado.

Mais alguns recursos interessantes do Transferidor

# 1) Asserções e anotações

Asserções são uma parte importante dos scripts de automação. As anotações também são muito úteis para marcar com eficácia certos métodos em uma classe para que tenham um significado especial.

Ele fornece uma variedade de afirmações e anotações e, além disso, também oferece a capacidade de criar suas próprias afirmações.

Considere o exemplo abaixo:

describe('Code to understand assertions/annotations', function() { beforeEach(function() { browser.get('http://juliemr.github.io/protractor-demo/'); }); afterEach(function() { browser.get('https://www.madewithangular.com/#/'); }); var multiplyNumbers = function(a, b) { element(by.model('first')).sendKeys(a); element(by.model('second')).sendKeys(b); element(by.model('operator')).click(); element(by.id('gobutton')).click(); }; it('should multiply two integers', function() { multiplyNumbers(2, 2); expect(element.all(by.repeater('result in memory')).count()).toEqual(2); multiplyNumbers(3, 3); expect(element.all(by.repeater('result in memory')).count()).toEqual(2); }); });

No exemplo acima, estamos usando 2 anotações, ‘Antes de cada’ e 'após cada' . Essas anotações também estão disponíveis no TestNG (selênio tradicional). Essas anotações garantem que uma parte específica do código seja executada antes / depois, respectivamente, da execução do código restante.

Então, aqui está como a execução do código ocorrerá,

  1. O transferidor alcançará dentro do ' antes de cada 'Bloqueará primeiro e atingirá' http://juliemr.github.io/protractor-demo/ 'URL no navegador.
  2. Agora, o fluxo se moverá para o bloco 'isso' e funcionará ' multiplyNumbers ’ será chamado que, por sua vez, executará as ações especificadas nele enviando o controle de volta para onde a função foi chamada.
  3. Por fim, a afirmação fará seu trabalho. Agora, se quisermos lidar com vários elementos ao mesmo tempo, você pode usar ‘element.all’, um recurso desta ferramenta. Ele identificará todos os elementos disponíveis com o localizador especificado (por.repetidor, neste caso). Depende de você o que deseja fazer com os elementos identificados. Neste caso, estamos comparando o histórico de cálculos com um determinado número.
  4. Visto que, na primeira afirmação, estamos comparando a contagem do histórico de cálculo com '2', embora tenhamos realizado o cálculo apenas uma vez, a afirmação falhará. A segunda afirmação, no entanto, passará como após o segundo cálculo, a contagem do histórico seria '2'.

Existem muitos outros tipos de afirmações disponíveis. Alguns dos quais são fornecidos abaixo:

a) Obtenha o texto de um elemento da web e compare-o com um determinado valor:

element(by.locator('someLocator')).getText(text) .then(function() { expect(text).toEqual('someData'); expect(text).not.toEqual('someData'); expect(text).toContain('someOtherData'); });

b) Verifique se um elemento da web é exibido na página ou não:

expect(browser.driver.findElement(by.locator(someLocator)) .isDisplayed()).toBe(true);

# 2) Lidar com vários navegadores / janelas / guias

Pode haver vários casos quando se trata de lidar com o navegador. Alguns desses casos são destacados a seguir:

a) Uma nova guia é aberta clicando em qualquer link

Às vezes, quando você clica em qualquer link, uma nova guia é aberta e o restante das ações precisam ocorrer na janela recém-aberta. Nesse caso, quando você escreve o código até o ponto em que uma nova guia é aberta, você precisa implementar o Window Handler da seguinte maneira:

//Get all of the opened windows and store the count in handles browser.getAllWindowHandles().then(function(handles) { //Now switch the control to the newly opened window browser.switchTo().window(handles(1)).then(function() { //Write the code which needs to be executed in the new tab }); });

Primeiro, faça uma contagem de todas as janelas disponíveis e, em seguida, use a indexação para alternar o controle entre as janelas. A janela original que iniciou a nova janela terá índice 0, enquanto as janelas subsequentes terão índices crescentes.

b) Abrindo um navegador totalmente novo com nova sessão

Quando você precisa realizar algumas ações em um navegador e precisa realizar outras ações em uma sessão diferente do navegador, precisamos usar o forkNewDriverInstance . Nesse caso, criamos uma nova instância do navegador com um novo nome de navegador da seguinte maneira:

describe('Code to understand assertions/annotations', function() { //Create a new browser instance var newBrowser = browser.forkNewDriverInstance(); it('should should open multiple browsers instances', function() { //Opens a URL in the 1st browser instance browser.get('http://juliemr.github.io/protractor-demo/'); //Opens a URL in the 2nd browser instance newBrowser.get('https://www.madewithangular.com/#/'); newBrowser.driver.quit(); }); });

c) Executando seu caso de teste em vários navegadores:

Executar seu caso de teste em 2 navegadores ao mesmo tempo é algo que o arquivo de configuração pode fazer por você. Basta adicionar o código abaixo em seu arquivo de configuração:

Assim que executar este arquivo de configuração, você verá testes em execução no Firefox e no Chrome simultaneamente e os logs de execução serão exibidos no prompt de comando separadamente.

// conf.js exports.config = { framework: 'jasmine', specs: ('SomeSpec.js'), multiCapabilities: ({ browserName: 'firefox' }, { browserName: 'chrome' }) }

# 3) Use objetos de página para tornar sua estrutura ainda melhor

Essa ferramenta é boa por si só, mas se torna invencível quando combinada com o Modelo de Objeto de Página (POM). A maioria de suas deficiências (se houver) são superadas com o modelo de objeto de página. Além disso, o POM também ajuda a manter seu projeto de uma forma mais estruturada.

Se você não sabe o que é POM, não se preocupe. POM é uma forma de separar seu caso de teste com base nas páginas.

Veja este exemplo:

Existe um site de compras. Seu caso de teste é selecionar um produto, adicioná-lo ao carrinho e depois comprá-lo.

Agora, existem duas maneiras de gerenciar seu código de script de teste para isso:

  1. Escreva um caso de teste simples com todos os localizadores na mesma página em que sua lógica está escrita,
  2. Escreva todo o seu fluxo de caso de teste, sua lógica em seu arquivo de especificações e separe seus localizadores e dados de teste em arquivos diferentes. Cada página da web terá um arquivo de página .js equivalente. Desta forma, seu código ficará estruturado e se houver algum outro caso de teste que requeira o mesmo localizador, você não precisa escrever estes localizadores novamente, apenas importe este arquivo localizador e use-o conforme sua necessidade.

Manter seus casos de teste pode ser uma verdadeira dor. Se você usar o POM, seu código ficará muito mais estruturado.

como reproduzir arquivos swf no windows 7

Aqui está um exemplo de uso do modelo de objeto de página:

modelo de objeto de página

Este é o fluxo no instantâneo acima:

  1. Existe um caso de teste que compra laptop. O código do fluxo e da lógica estará em purchaseLaptopSpec.js.
  2. Todas as páginas encontradas para comprar o Laptop terão 1 arquivo ‘.js’ com o título adequado. Todos os elementos necessários para a compra do Laptop, seus localizadores estarão dentro do respectivo arquivo de paginação.
  3. Os dados necessários para este caso de teste podem ser salvos na pasta TestData em um formato ‘.json’ ou em formato Excel.
  4. Uma vez feito com as páginas e localizadores, apenas importe esses arquivos em seu arquivo de especificações para usar os dados do localizador / teste e você está pronto com seu caso de teste.

# 4) Relatórios

O NPM (Node Package Manager) fornece vários pacotes de relatórios, com os quais a captura de tela de cada etapa do teste pode ser capturada e também, uma vez que a execução do teste for concluída, ele irá gerar um relatório HTML para você. Tudo que você precisa fazer é instalar esses pacotes abrindo um prompt de comando e clicando nos comandos abaixo:

npm install -g protractor-jasmine2-html-reporter npm install protractor-jasmine2-screenshot-reporter --save-dev

Uma vez que esses pacotes são instalados, toda vez que você executar seu arquivo de configuração, todas as capturas de tela de seus casos de teste serão salvas e também haverá um relatório HTML gerado exibindo o resultado de aprovação / reprovação do caso de teste.

# 5) Integre-se com outras ferramentas poderosas, como Git / Jenkins / Browserstack / Grunt

Existem várias ferramentas disponíveis no mercado para ajudar a tornar seus casos de teste ainda melhores. Git / Jenkins / BrowserStack / Grunt são algumas dessas ferramentas que agregam valor significativo aos scripts de teste normais do Protractor. E a melhor parte é que você não precisa mexer no seu arquivo de especificações para integrar o seu Protractor com qualquer uma dessas ferramentas. É o seu arquivo de configuração, que fará tudo isso para você.

Vai é uma ferramenta de controle de versão muito poderosa. É sempre uma prática recomendada manter seu código no Git se houver vários desenvolvedores envolvidos.

Jenkins é uma ferramenta de integração contínua com a qual você pode agendar seus casos de teste e executá-los conforme sua necessidade. Os scripts do transferidor também podem ser configurados com o Jenkins. O melhor uso de executar seus casos de teste no Jenkins é que é muito rápido e você também pode executar vários casos de teste ao mesmo tempo.

BrowserStack é uma ferramenta de teste entre navegadores que também pode ser usada para testar seus aplicativos em diferentes navegadores. Ele também pode ser integrado ao Protractor adicionando as credenciais browserStack em seu arquivo de configuração.

Terra é um executor de tarefas JavaScript. Ele oferece a capacidade de realizar várias tarefas para você. Sua grandiosidade é que existem mais de 4000 tarefas e você pode criar ainda mais tarefas de acordo com sua necessidade. A seguir estão algumas das tarefas de uso diário importantes para as quais podemos usar o Grunt:

  1. Liste todas as melhores práticas de codificação e informe imediatamente sempre que violar qualquer uma delas.
  2. Para criar vários arquivos de especificações em tempo de execução. Por exemplo , se houver algum caso de teste que você deseja executar várias vezes (variando de 1 a qualquer número). Isso pode parecer desnecessário neste momento, mas pense em executar qualquer fluxo de checkout de um site de compras em todos os países disponíveis. Seria tedioso criar várias especificações manualmente. Então, deixe Grunt fazer isso por você.
  3. O recurso de relógio. Você escreve um caso de teste e toda vez que salva seu código depois de fazer qualquer alteração nele, você deseja que seu caso de teste seja executado, Grunt conseguiu.
  4. Concatenar vários arquivos.

Basta tentar e você vai adorar.

Conclusão

Você pode fazer o selênio funcionar como transferidor, mas por que reinventar a roda? Se o Google se esforçou tanto para fazer o Transferidor funcionar como um encanto, vamos usá-lo ao máximo. Pelo menos para os sites da AngularJS, isso tornará sua vida muito mais fácil.

Além disso, este artigo não é apenas sobre o Transferidor. Existe um grande mundo de Protractor por aí e existem centenas de pacotes disponíveis no mercado oferecidos pelo NPM para adicionar mais recursos ao seu teste, além de cenários de teste simples. Fique à vontade para usar esses pacotes e torná-lo ainda melhor.

Sobre o autor: Este é um post convidado de Deshansh. Ele está trabalhando como engenheiro de desenvolvimento de software em teste com uma das principais multinacionais. Ele tem vasta experiência em testes de automação de selênio e transferidor.

Nosso próximo tutorial o ajudará a limpar qualquer entrevista do AngularJS com sucesso.

PREV Tutorial | PRÓXIMO Tutorial

Leitura recomendada

^