Protractor – Testes automáticos end-to-end para aplicações em Angular

INTRODUÇÃO

Seria possível realizar um teste automático para uma aplicação web como um usuário? Sim! E neste artigo iremos tratar, através de um exemplo simples, como realizar um teste funcional automatizado utilizando Protractor.

Protractor é um framework para testes de aplicações em AngularJS. [2]

CONFIGURAÇÕES

O primeiro passo é verificar se possui o Node.js [1] instalado na sua máquina, para verificar se já o possui basta digitar o seguinte comando em um prompt

node --version
Consultando a versão do node.js
Consultando a versão do node.js
  • Se o comando não for identificado, é um sinal que o Node.js não está instalado, para isto basta acessar o site do fornecedor e realizar o download. Basta executar o programa de instalação, seguindo as instruções fornecidas pelo sistema.
Download do Node.js
Download do Node.js

Com o Node.js podemos realizar a instalação do Protractor:

  • Primeiro em uma linha de comando basta executar:
    npm intall -g protractor
  • Em seguida, para garantir que a instalação foi realizada com sucesso, ainda no prompt execute:
    protractor --version
  • E assim a versão instalada deverá ser retornada

AUTOMATIZANDO

Agora que as configurações necessárias estão prontas, é hora de começar a automatizar!

No caso estarei utilizando um site pronto para realizar um teste simples de preenchimento de formulário, mas é possível utilizar qualquer outro.

Obtendo arquivos de configuração

Para a execução dos testes no Protractor são necessários scripts de configuração geralmente denominados de “spec” e “configuration“. O arquivo “spec” é o conjunto de casos de teste e o “configuration” são as configurações necessárias para a execução dos testes.

Quando realizamos a instalação do framework alguns arquivos de exemplos foram criados, então vamos utilizar o arquivo de configuração já existente e iremos adaptar um arquivo com os testes.

Para obter o arquivo de configuração, digite o seguinte comando no terminal:

npm list -g

E acesse a pasta apresentada, e no diretório acesse: “node_modules > protractor > example” e copie o arquivo “conf.js” para algum outro diretório.

Arquivos de exemplo criados na instalação do protractor
Arquivos de exemplo criados na instalação do protractor

Criando um teste simples

No diretório que copiamos o arquivo “conf.js” vamos criar um novo arquivo chamado de “simple_test.js” e colocaremos o seguinte conteúdo:

describe ("Simples validação de preenchimento de formulario", function() 
{
 var campoUsername = element(by.model("Auth.user.name"));
 var campoPassword = element(by.model("Auth.user.password"));
 var campoUsernameDescription = element(by.model("model[options.key]"));
 var btnLogin = element(by.cssContainingText('.btn', 'Login'));
 var loginComSucesso = element(by.css('.ng-scope p'));
 var loginComErro = element(by.binding('Auth.error'));

 beforeEach(function() 
 {
 browser.get("http://www.way2automation.com/angularjs-protractor/registeration/#/login");
 });
 
 it("Validar Login realizado com sucesso", function()
 {
 campoUsername.sendKeys("angular");
 campoPassword.sendKeys("password");
 campoUsernameDescription.sendKeys("Primeiro Teste");
 btnLogin.click();
 
 browser.waitForAngular();
 
 loginComSucesso.getText().then(function(text){expect(text).toContain("You're logged in!!")});
 
 browser.sleep(600);
 
 });
 
 it("Validar campo Username e password invalidos", function()
 {
 campoUsername.sendKeys("teste");
 campoPassword.sendKeys("teste123");
 campoUsernameDescription.sendKeys("Segundo Teste");
 btnLogin.click();
 
 browser.waitForAngular();
 
 loginComErro.getText().then(function(text){expect(text).toContain("Username or password is incorrect")});
 
 browser.sleep(600);
 });
 
});em um botão (que irá redirecionar para uma nova página).

Um pouco sobre nosso código:

  • describe” e “it” são funções do framework Jasmine [10], e neste contexto “describe” trata-se de uma função global que indica uma suíte de testes, enquanto que “it” é uma função responsável por indicar as validações realizadas [11]. Talvez uma forma de interpretar seja: “describe” é meu roteiro de testes e “it” meus casos de testes.
  • “element” é uma função responsável por localizar elementos na página web [12].
  • BeforeEach” obriga que antes da execução de cada “it” essa função seja chamada.
  • expect” serve para assegurar que algum valor está sendo apresentado. Por exemplo na linha 24 estamos verificando se realmente o login foi realizado com sucesso através da mensagem ” You’re logged in!!

Agora precisamos alterar o nosso arquivo de configuração para que o protractor possa executar o nosso teste, então no arquivo “conf.js” vamos alterar a linha responsável por identificar o arquivo de “spec” (com o nome do nosso arquivo com os testes).

  // Spec patterns are relative to the current working directory when
  // protractor is called.
  specs: ['simple_test.js'],

Executando o teste

Para iniciar a execução do nosso teste, via terminal acesse o diretório em que os arquivos criados anteriormente estão contidos e digite o seguinte comando:

protractor conf.js

Neste instante o Protractor irá executar o nosso teste, e no final da execução irá exibir a quantidade de passos executados e quantos deles falharam 🙂

Execução do teste pelo Protractor
Execução do teste pelo Protractor
Resultado final da execução
Resultado final da execução

Que tal se aventurar um pouco e implementar mais algumas validações?

REFERÊNCIAS E LINKS

[1] https://nodejs.org/en/

[2] http://www.protractortest.org/#/

[3] http://www.way2automation.com/angularjs-protractor/registeration/#/login

[4] http://www.way2automation.com/protractor-angularjs-practice-website.html

[5] https://neoteric.eu/start-to-start-working-with-protractor-and-run-your-first-e2e-test

[7] https://www.youtube.com/watch?v=VAWKEHstjx8&list=PL_noPv5wmuO-mnEq8Sf0h43QRk-Gk2Cvb&index=2

[8] https://www.thoughtworks.com/pt/insights/blog/testing-angularjs-apps-protractor

[9] https://jasmine.github.io/

[10] https://jasmine.github.io/2.0/introduction.html

[11] http://www.protractortest.org/#/tutorial

Por JACQUELINE COSTA

Analista de Testes da MATERA, atuando na área desde 2013. MBA em Engenharia de Software Orientada para Serviços. Apaixonada por tudo o que faz!

Postado em: 07 de dezembro de 2017

Confira outros artigos do nosso blog

Introdução ao Dev-Test Pairing

13 de junho de 2018

Caio Rizolli

Falando sobre Teste de Intrusão (ou PenTest)

03 de abril de 2018

Jacqueline Costa

Testes em Node.js

04 de dezembro de 2017

Alan Cesar Elias

Automatizando Testes de Contrato API REST – Parte 1

30 de novembro de 2017

Monise Costa

Deixe seu comentário