É 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).
Mas afinal, o que são testes e2e?
Os testes tipo end-to-end 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!
Usando Protractor em testes end-to-end
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 tests criada.
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 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`
Interagindo com a aplicação
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á 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 o Protractor, 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
***
(Atualização – 26/02/16)
Gravamos um podcast conversando sobre atualidades do universo dos testes automatizados.
Coloque o fone de ouvido e venha conhecer a Taverna Taller!
Veja a lista com todos os programas | Taverna Taller no iTunes