Protractor na prática em 3 passos

/usr/local/lib/node_modules/protractor/lib/cli.js:91
      throw new Error('Test file ' + specs[i] + ' did not match any files.');
            ^
Error: Test file tests/hello_world.js did not match any files.
    at run (/usr/local/lib/node_modules/protractor/lib/cli.js:91:13)
    at Object. (/usr/local/lib/node_modules/protractor/lib/cli.js:265:1)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Function.Module.runMain (module.js:497:10)
    at startup (node.js:119:16)
    at node.js:901:3

Então vamos criar os testes para que o Protractor possa executa-los.

Passo 3 - Criando testes

Como já citado nesta introdução o Protractor roda em cima do Selenium e por isso ele se utiliza de todas as vantagens que o Selenium tem embutido em si. Porém o que faz do Protractor o melhor framework de automação de testes para aplicações AngularJS são as facilidades criadas nele especificamente para testar esse tipo de aplicação.

Os comandos customizados pelo Protractor visam capturar os elementos da interface da aplicação através das diretivas do AngularJS. Isto torna o framework interessante pelo fato de que o profissional que aprender a utilizar o Protractor, automaticamente vai aprender sobre o comportamento do AngularJS em relação a renderização de elementos na interface. O inverso também acontece, a partir do momento que se conhece AngularJS, facilmente se aprende a utilizar o Protractor.

O AngularJS utiliza algumas técnicas específicas para manipular o DOM, inserindo ou extraindo informações do HTML. Exemplos disso são a utilização do ng-model para a entrada de dados, o binding de atributos para exibir dados no DOM e o ng-repeat para a exibição de informações no HTML que estejam contidas em uma lista no javascript.

Para capturar um elemento na interface que contenha um ng-model por exemplo o Protractor provê o comando by.model("nome"). Através desse comando o framework retorna o WebElement o qual contém a diretiva ng-model com o valor nome.

<div>
	<label>Nome</label>
	<input type="text" ng-model="nome">
	<label>Endereço</label>
	<input type="text" ng-model="endereco">
</div>

Dado o exemplo acima, quando executado o comando element(by.model("nome")) o Protractor retorna o WebElement abaixo:

<input type="text" ng-model="nome">

Para capturar elementos os quais o AngularJS faz binding de alguma informação o comando é um pouco diferente, mas a lógica é a mesma do model. O exemplo abaixo demonstra como utiliza-lo.

<div>
	<label>{{nome}}</label>
	<label>{{endereco}}</label>
	<label>{{CEP}}</label>
</div>

Acima temos um código onde fizemos alguns bindings de informações através do AngularJS. Ao executar o comando element(by.binding("endereco")) pelo Protractor, é retornado o WebElement abaixo:

<label>{{endereco}}</label>

Na utilização do ng-repeat o Protractor fornece o comando by.repeater("aluno in alunos") o qual retorna um array de elementos.

Este comando permite encadear as chamadas das funções row e column para tornar sua busca mais especifica.

Encadeado com o comando row retorna o elemento em que o ng-repeat está porém com as informações do objeto na posição passado por parâmetro ao comando row. Ex: by.repeater("aluno in alunos").row(0) retorna o primeiro elemento da lista de nomes, pois o javascript inicia a contagem do 0.

Caso queira buscar um elemento específico dentro da estrutura do repeater, é possível utilizar ainda o comando column encadeado com os outros dois anteriores. Neste comando passa-se o nome do atributo que está sendo feito binding no HTML, com isso o Protractor retornará o WebElement no qual este binding está sendo feito.

O exemplo abaixo demonstra como funciona estes comandos.

<div ng-repeat="aluno in alunos">
	<span>{{aluno.nome}}</span>
	<span>Nota {{aluno.nota}}</span>
	<input type="text" ng-model="aluno.nota"/>
</div>

<div ng-repeat="aluno in alunos">
	<span>André</span>
	<span>Nota 8</span>
	<input type="text" ng-model="aluno.nota"/>
</div>
<div ng-repeat="aluno in alunos">
	<span>Fernando</span>
	<span>Nota 9</span>
	<input type="text" ng-model="aluno.nota"/>
</div>
<div ng-repeat="aluno in alunos">
	<span>José</span>
	<span>Nota 7</span>
	<input type="text" ng-model="aluno.nota"/>
</div>

<div ng-repeat="aluno in alunos">
	<span>Fernando</span>
	<span>Nota 9</span>
	<input type="text" ng-model="aluno.nota"/>
</div>

<span>Nota 9</span>

Agora que já sabemos como usar alguns dos comandos do Protractor, vamos criar alguns testes para demonstrar na prática o uso dos mesmo. Vamos utilizar o exemplos de site do AngularJS (http://angularjs.org/) o que apresento abaixo.

<html ng-app>
  <head>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>

Para esta aplicação podemos criar 2 testes como exemplo:

• No primeiro vamos verificar se o texto inicial da tag h1 é "Hello !", pois não temos nenhum valor no atributo "yourName" ainda.
• Em seguida usaremos "Protractor" como entrada de dados para representar o atributo "yourName" e verificar novamente the o texto dentro da tag h1 contém o valor "Hello Protractor!". O comando sendKeys("Protractor") que é um método do WebElement para digitar o valor dentro do campo texto.

describe('Hello World form', function() {

  it('should display Hello !', function() {
    browser.get('');
    expect(element(by.binding('yourName')).getText()).toEqual("Hello !");
  });

  it('should be able to insert text',function(){
    browser.get('');
    element(by.model('yourName')).sendKeys("Protractor");
    expect(element(by.binding('yourName')).getText()).toEqual("Hello Protractor!");
  });

});

Colocando esses testes dentro no arquivo hello_world.js conforme configuramos no capítulo anterior irá fazer desta a sua atual suite de testes.

O que você precisa fazer agora é rodar novamente o Protractor e agora não será mais uma mensagem de erro que será exibida mas o status de cada um dos testes executados.

Finished in 2.663 seconds
2 tests, 2 assertions, 0 failures

Voila! Seus testes estão funcionando. Você pode incrementar a sua suite de testes quanto for preciso ou ainda melhor, integrá-la a uma ferramenta de integração contínua para mantê-los rodando constantemente.