Um pouco mais de Protractor

Rainbow art

Ano novo, projeto novo. E no projeto onde comecei a trabalhar este ano resolvemos que novas funcionalidades só serão desenvolvidas quando todas as funcionalidades já existentes estiverem cobertas por testes automatizados. Inicialmente estou ajudando na cobertura de testes e2e, para daqui para frente trabalharemos com TDD, evoluindo a aplicação com maior segurança e confiança.

Neste projeto os testes e2e estão sendo feitos com o Protractor, visto que a aplicação é AngularJS, e muitas lições estão sendo tiradas deste aprendizado, tais como o uso de orientação a objetos com JS nos testes e a melhor escrita de helpers. Minha idéia aqui é trazer um pouco mais da minha experiência com esta ferramenta fascinante, o Protractor. Inicialmente, quero lembrar-lhes do projeto protractor-todomvc, o qual criei para meus posts sobre o Protractor e o qual utilizarei para exemplos aqui. No segundo post que fiz, onde falei sobre refatoração de testes, eu expliquei sobre o uso de helpers, para a separação de código que se repete ao longo dos testes em diferentes arquivos, para sua utilização de forma genérica, porém, naquela época acabei pecando e ferindo uma boa prática na escrita de testes, onde além da lógica repetida, coloquei o próprio teste no helper. Well. Novo projeto, novos aprendizados e novas contribuições das lições aprendidas, à comunidade! Naquela época, eu havia criado um helper que testa a adição de um item à lista de to-do, porém hoje, vou mostrar como deixar no helper só a lógica de adição do item, e o teste em si, no arquivo spec.js. O helper que antes era assim:

// todomvc.helper.js

module.exports = {  
  addTodoItem : function(item) {
    it('should add an item into the todo list', function() {
      var todoTextField = element(by.id('new-todo'));

      text = item;
      todoTextField.sendKeys(text);
      todoTextField.sendKeys(protractor.Key.ENTER);
    });
  }
};

Refatorado para conter só a lógica e não o teste propriamente dito, fica assim:

// todomvc.helper.js

module.exports = {
  addTodoItem : function(item) {
    var todoTextField = element(by.id('new-todo')),
        text = item;
    todoTextField.sendKeys(text);
    todoTextField.sendKeys(protractor.Key.ENTER);
  }
};

E o teste dentro do arquivo spec.js é retadorado de:

todomvcHelper.addTodoItem('Criar teste para completed list');

Para:

it('should add an item into the to-do list', function () {
  var text = 'Teste de digitação em campo texto';
  todomvcHelper.addTodoItem(text);
  var todoLabel = element(by.css('.view .ng-binding'));
  expect(todoLabel.getText()).toEqual(text);
});

Note que na verdade no helper anterior o teste nem mesmo havia, somente havia a ação de adição de um item à lista, sem nenhuma verificação. Esta era feita em um próximo teste (em outro it).

Outro exemplo de reforação de um helper deste mesmo repositório no github pode ser visto abaixo, antes e depois (arquivos spec.js e helper.js respectivamente).

Antes:

todomvcHelper.verifyHeaderElementText('h3', 'AngularJS');
todomvcHelper.verifyHeaderElementText('h1', 'todos');
verifyHeaderElementText : function(headerType, headerText) {
  it('should verify the text of a header element', function() {
    var typeOfHeader = element(by.css(headerType));
    expect(typeOfHeader.getText()).toEqual(headerText);
  });
}

Depois:

it('should verify left sidebar hearder', function () {
  todomvcHelper.verifyHeaderElementText('h3', 'AngularJS');
});

it('should verify left sidebar hearder', function () {
  todomvcHelper.verifyHeaderElementText('h3', 'AngularJS');
});
 verifyHeaderElementText : function(headerType, headerText) {
  var typeOfHeader = element(by.css(headerType));
  expect(typeOfHeader.getText()).toEqual(headerText);
}

A idéia aqui é disseminar algumas boas práticas na escrita de testes com Protractor e dar chance a um aprendizado evolutivo, sempre em busca da melhoria.

android evolution

Por hoje esta é minha singela contribuição. Em breve estarei explicando um pouco sobre OO em JS para testes com Protractor.

Para acesso ao código trabalhado neste post, veja github/wlsf82

Aguardo teu comentário. =D

Anúncios

2 comentários em “Um pouco mais de Protractor

  1. Olá! Estou tentando rodar a partir dos arquivos do git, mas estou recebendo o seguinte erro:

    $ protractor conf.js
    (node:1044) [DEP0022] DeprecationWarning: os.tmpDir() is deprecated. Use os.tmpdir() instead.
    [16:53:16] I/launcher – Running 1 instances of WebDriver
    [16:53:16] I/hosted – Using the selenium server at http://localhost:4444/wd/hub
    Started
    F

    Failures:
    1) angularjs todo mvc homepage encountered a declaration exception
    Message:
    TypeError: Cannot read property ‘params’ of undefined
    Stack:
    TypeError: Cannot read property ‘params’ of undefined
    at new ProtractorPerf (/Users/tokenlab/Documents/Protractor/tests/2/node_modules/protractor-perf/lib/index.js:9:21)
    at Suite. (/Users/tokenlab/Documents/Protractor/tests/2/spec.js:19:14)
    at Object. (/Users/tokenlab/Documents/Protractor/tests/2/spec.js:7:1)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)

    1 spec, 1 failure
    Finished in 0.043 seconds

    [16:53:17] I/launcher – 0 instance(s) of WebDriver still running
    [16:53:17] I/launcher – chrome #01 failed 1 test(s)
    [16:53:17] I/launcher – overall: 1 failed spec(s)
    [16:53:17] E/launcher – Process exited with error code 1

    Mesmo quando rodo com protractor-perf. Pode me ajudar, por favor?

    1. Olá Ana,

      Este post está bastante desatualizado e também o código do repositório.

      Estou trabalhando em um curso de Protractor na Escola Talking About Testing (http://talkingabouttesting.coursify.me) o qual deve ser lançado em breve, portanto, se tiver interesse posso te avisar quando lançar o curso para que possa aprender mais sobre Protractor.

      O curso terá conteúdos mais atuais visto que minha experiência evoluiu bastante com o uso da ferramenta desde a escrita desse conteúdo até então.

      Se tiver interesse em ser notificada sobre o curso envie um email para talkingabouttesting@gmail.com solicitando isso, por favor.

      Atenciosamente,
      Walmyr Filho
      Equipe Talking About Testing

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

w

Conectando a %s