Protractor - Testes end-to-end para AngularJS

Você certamente ficará surpreso com o poder que essa ferramenta possuí mas também irá entender que ele exige muito trabalho pra que tudo fique bem no fim do dia.

Bem, Protractor nada mais é que - em tradução livre - um framework de teste end-to-end para aplicações AngularJS . Ele executa testes contra seu aplicativo em execução em um navegador real, interagindo com ele como um usuário faria ( http://angular.github.io/protractor/#/ ). Em suma ele substitui aquele bom e velho checklist que alguém da sua equipe gasta um tempo pra fazer, ou seja, significa redução de custos e de tempo pra sua empresa, ainda mais se você utilizar ele em conjunto com um servidor de integração contínua, como o Jenkins por exemplo ( mas isso é pra um outro post).

O Protractor usa algumas tecnologias pra fazer a sua mágica, são elas:

  • Jasmine : ferramenta de testes de comportamento para javascript, é com ele que você irá escrever seus testes ( http://jasmine.github.io/ );
  • Webdriver : basicamente automatiza processos em navegadores, é ele quem obedece o Jasmine e clica, preenche e interage com a sua aplicação como se fosse um usuário ( https://github.com/angular/protractor ).
  • NodeJS : uma linguagem baseada no V8 JavaScript Engine , orientada a eventos e feita para ser facilmente escalável, é a tecnologia em que o Protractor foi escrito ( https://nodejs.org/ ).

Agora, antes que fique chato demais, vamos a prática…

PARTE 1 - Criar a aplicação a ser testada

  • Vamos pegar uma aplicação de exemplo do AngularJS mesmo, o mais simples, segue:

<!doctype html>

Name:


Hello {{yourName}} !

  • Crie uma pasta no lugar de sua preferência com o nome de protractortest e salve esse arquivo com o nome index.html .
  • Abra index.html no navegador pra garantir que a aplicação funciona.

PARTE 2 - Definindo e baixando as dependências

  • Crie um arquivo chamado package.json na raiz da aplicação com o seguinte conteúdo:

{

“name” : “protractortest”,

“version” : “0.0.1”,

“private” : true,

“scripts” : {

“start” : “cls & http-server -p 8888 -c-1”,

“update-webdriver” : “webdriver-manager update”,

“test” : “protractor protractor.conf.js”

},

“dependencies” : {

“protractor” : “^1.6.1”,

“http-server” : “^0.8.0”

}

}

  • Caso não tenha o NodeJS instalado, faça isso agora https://nodejs.org/download/
  • E instale o protractor globalmente: via linha de comando, execute ‘npm install -g protractor’
  • Para, enfim, baixar as dependências da aplicação execute via linha de comando na pasta da aplicação o comando ‘npm install’ , caso dê algum erro tente executar como sudo (Linux) ou Administrador (Windows).

PARTE 3 - Configurando tudo

  • Crie o arquivo de configuração do protractor (protractor.conf.js) na raiz da sua aplicação, conforme exemplo abaixo:

exports . config = {

specs : [

‘./tests/test.js’,

],

capabilities : {

‘browserName’ : ‘chrome’

},

baseUrl : ‘http://localhost:8888/’,

framework : ‘jasmine’,

jasmineNodeOpts : {

showColors : false,

isVerbose: true,

includeStackTrace: true

},

directConnect : true,

onPrepare : function () {

browser . manage (). window (). maximize ();

}

};

  • Via linha de comando, na pasta raiz da aplicação, digite ‘npm run update-webdriver’ , isso irá instalar o Webdriver e o driver para o navegador escolhido e assim estaremos prontos para rodar os testes, mas calma, ainda precisamos escrever um…

PARTE 4 - Escrevendo testes

  • Crie uma pasta chamada tests e crie nela um arquivo chamado test.js , nele adicione o seguinte conteúdo:

describe ( ‘Meu primeiro teste usando Protractor’ , function () {

it ( ‘Acessando aplicação’ , function () {

browser . get ( ‘http://localhost:8888/’ );

});

it ( ‘Escrevendo no input’ , function () {

var name = ‘o meu nome é Teste, obrigado por me usar…’;

var elementName = element ( by . model ( ‘yourName’ ));

var elementResponse = element ( by . css ( ‘h1’ ));

elementName . sendKeys ( name );

browser . sleep ( 2000 ); // essa linha não é necessária, serve apenas para que você veja a mágica acontecendo

expect ( elementResponse . getText ()). toEqual ( 'Hello ’ + name + ‘!’ );

});

});

FINAL - Rodando os testes

  • Novamente, via linha de comando e na pasta raiz da aplicação, digite ‘npm start’ para subir a aplicação no http://localhost:8888 , em seguida, em outro terminal, digite ‘npm test’ e espere a mágica acontecer…

    2 tests , 1 assertion , 0 failures

  • Deu certo? Ótimo! Nesse momento feche os olhos e imagine o quanto isso pode melhorar a sua vida e a qualidade dos seus produtos, agora abra-os, dê aquele sorriso, respire fundo e ao trabalho meu jovem!!

Obrigado por ter lido até aqui, compartilhe em tudo quanto é lugar, afinal, o mundo precisa saber disso…

Pronto :slight_smile:

p.s.: por favor, se não deu certo e você não teve sucesso, não desista… Deixe suas dúvidas (ou sugestões) nos comentários que eu terei o prazer de responder e ajudar se preciso.

https://tsdn.tecnospeed.com.br/files/render/a/rTxaDtkw3uI/m/2Aal0HUq8WcsUkGJHDOIuxVL8QzTBMkNxmuPYT_WmSuXEgQQRC-pbFfCjQ-w5CdWBzI2RQIb0hw

https://tsdn.tecnospeed.com.br/files/render/a/rTxaDtkw3uI/m/2Aal0HUq8WedKCXJ1JSNv1OfknRZ-46y6wruSOGq_PabPw9DYhxqofc-LSRHEma7yUhKzgvtKY4