BIGtheme.net http://bigtheme.net/ecommerce/opencart OpenCart Templates

Testando aplicações AngularJS com Protractor – por Walmyr Filho

É sempre importante fazer testes, e melhor ainda se podemos fazer os testes antes (TDD) e, em algumas situações, até mesmo escrever uma especificação executável, a chamada “documentação viva” do BDD(Behavior-driven development). Mas quando falamos de escrever os testes antes, podemos falar tanto de testes de unidade (unit tests), como de testes e2e (end-to-end).

Neste post a ideia é falar de testes do tipo e2e, os quais se propõem à automação da utilização da aplicação como se fosse um usuário final interagindo com a mesma em fluxos do início ao fim, como o processo de login, o preenchimento e envio de um formulário de contato, a simples visita a uma página e muitos outros.

Nem sempre os testes serão utilizados como documentação para pessoas não técnicas, como se propõe a prática do BDD, portanto nem sempre precisam ser escritos neste formato, mesmo quando sendo utilizados para testes de regressão, os quais se propõem a garantir que funcionalidades que já estavam funcionando não quebraram durante a entrada de novas funcionalidades, melhorias ou correções de bugs.

No caso em que o teste não precisa ser uma documentação que venha ser lida pelo cliente, ou uma pessoa não técnica, o mesmo pode ser somente código, e se puder ser na linguagem que a equipe de desenvolvimento está acostumada, melhor ainda!

Meu foco aqui será no uso do Protractor, ferramenta para criação de testes e2e (em JS) para aplicações AngularJS.

Para instalar o Protractor em um ambiente Unix-based (no meu caso Mac OS X Maverick), utilize o comando demonstrado abaixo:

ATENÇÃO: Para realizar a instalação do Protractor é necessário que o NodeJS esteja instalado, e que esta instalação não tenha sido realizada com permissão de super usuário (sudo). Além disso, é necessário que o Java Development Kit (JDK) esteja instalado.

$ npm install -g protractor

Este comando irá instalar o Protractor e o webdriver-manager

Para verificar que o Protractor foi corretamente instalado, verifique a versão instalada, utilizando o comando abaixo:

$ protractor --version

Logo após, será necessário atualizar o webdriver-manager, o qual irá prover um selenium server rodando para dirigir o browser. Execute o comando abaixo:

$ webdriver-manager update

E então inicialize o servidor com o comando abaixo em um console o qual ficará rodando:

$ webdriver-manager start

Com o selenium server rodando, você está pronto para iniciar a criação de seu primeiro teste com o Protractor.

Inicialmente, vamos criar uma pasta para guardar nossos testes.
Dentro da pasta do projeto, crie uma pasta tests (ou utilize o nome que você preferir). Nesta pasta estarão localizados os dois arquivos essenciais para a execução de testes com o Protractor: o arquivo de configuração e o arquivo com os testes propriamente ditos.

Logo após, crie os arquivos conf.js e spec.js e salve-os na pasta testscriada.

Edite o arquivo conf.js no seu editor preferido (utilizei o Atom), e inclua a seguinte configuração (este arquivo especifica onde o selenium server estará rodando, e qual arquivo com a especificação dos testes será utilizado):

// conf.js
exports.config = {  
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['spec.js']
}

Para fins de um teste experimental, iremos utilizar uma aplicação AngularJS de exemplo, que chama-se todomvc.
Abra o arquivo spec.js criado e cole o seguinte código no mesmo:

// spec.js
describe('angularjs todo mvc homepage', function() {  
  it('should have a title', function() {
    browser.get('http://todomvc.com/examples/angularjs/#/');

    expect(browser.getTitle()).toEqual('AngularJS • TodoMVC');
   });
});

Executando de dentro da pasta tests o comando abaixo, com o *selenium server *rodando, você terá seu primeiro teste rodando (e passando)!

protractor conf.js  
$ protractor conf.js
Using the selenium server at http://localhost:4444/wd/hub  
.
Finished in 2.416 seconds  
1 test, 1 assertion, 0 failures`  

Agora, vamos interagir um pouco mais com a aplicação, visto que neste primeiro testes, somente acessamos a URL da aplicação exemplo, e verificamos seu título.

O plano agora é interagirmos com o campo de texto da aplicação, para simular um usuário real digitando neste campo.
Edite do arquivo spec.js, e adicione o seguinte teste:

it('should be able to type a text in the text field', function() {  
  element(by.id('new-todo')).sendKeys('Teste de digitação em campo texto');
})
Execute novamente e verás seu novo teste rodando ( e passando também!):
Finished in 5.956 seconds  
2 tests, 2 assertions, 0 failures`  

Agora vamos evoluir o teste criado acima, para que após a digitação do texto no campo, o mesmo seja submetido e então seu resultado seja verificado.
Podemos fazer isto da seguinte forma. Edite o arquivo spec.js, e modifique o teste criado acima, refatorado da seguinte forma:

it('should be able to type a text in the text field, press enter, and verify the result', function() {

  var todoTextField = element(by.id('new-todo'));
  var todoLabel = element(by.className('ng-binding'));
  var text = 'Teste de digitação em campo texto'

  todoTextField.sendKeys(text);
  todoTextField.sendKeys(protractor.Key.ENTER);

  expect(todoLabel.getText()).toEqual(text);
});
Após a execução do novo teste (refatorado), você deve perceber um aumento no tempo de execução, devido aos novos passos adicionados ao mesmo.
Finished in 6.974 seconds  
2 tests, 2 assertions, 0 failures  

Por fim, vamos deletar o registro criado no cenário acima após a submissão do campo texto, e validar que o mesmo não está mais disponível na lista. Veja o código abaixo.

it('should clean the items from the list and verify that no items are available in the list',function() {

  var toogleAllCheckBox = element(by.id('toggle-all'));
  var clearCompletedButton = element(by.id('clear-completed'));
  var viewDiv = element(by.className('view'));

  toogleAllCheckBox.click();
  clearCompletedButton.click();

  expect(viewDiv.isPresent()).toBe(false);
});
Finished in 7.547 seconds  
3 tests, 3 assertions, 0 failures  

Pronto! Você já tem o conhecimento básico necessário para iniciar a criação de testes de sua aplicação AngularJS, utilizando oProtractor, e tendo a facilidade de desenvolver a aplicação como um todo, na mesma linguagem, inclusive nos testes.

Você também pode acessar no GitHub os arquivos gerados no desenvolvimento deste post.

Referência: Protractor

Fonte: http://blog.taller.net.br/testando-aplicacoes-angularjs-com-protractor/

Sobre Luiz Lohn

Luiz Lohn trabalha como QA Engineer em uma multinacional, além de realizar palestras e consultorias em empresas. Atua como um dos coordenadores do GUTS-SC (Grupo de usuário de teste de software), membro ativo na comunidade de qualidade e teste de software, ministra palestras e cursos. Especializando-se em segurança web e mobile.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.

Page Reader Press Enter to Read Page Content Out Loud Press Enter to Pause or Restart Reading Page Content Out Loud Press Enter to Stop Reading Page Content Out Loud Screen Reader Support