Dicas de Protractor – Selecionando datas em sites que utilizam Materialize – TALKING ABOUT TESTING
Um dia desses recebi um email com uma dúvida específica, sobre como selecionar (com o Protractor) uma data qualquer, quando a aplicação utiliza MaterializeCSS.
Até então eu nunca havia tido que interagir com tal elemento nos projetos em que utilizei Protractor, porém, visto que gosto de explorar novas tecnologias e também gosto de ajudar as pessoas, resolvi experimentar.
A ideia deste post é compartilhar este aprendizado, para o caso em que alguém tenha que lidar com tal situação também.
Aos que preferem ver o código logo, o mesmo pode ser encontrado a partir do seguinte repositório no GitHub.
Aos que preferem acompanhar o processo, desde seu início até a resolução, aí vai:
Inicialmente comecei com alguns testes simples, para entender como o Materialize funciona. Neste momento criei os seguintes casos de teste:
Clica no campo de data (birthdate) e verifica que o date picker é aberto
Com o date picker aberto, clica no link Today e verifica que uma data foi selecionada, clica no link Close, e verifica que uma data continua selecionada e que o date picker não está mais aberto
Com o date picker aberto, clica no link Today, clica no link Clear, e verifica que não há uma data selecionada (uma nova verificação foi adicionada a este caso de teste depois, mais detalhes mais para o final do post)
Até aqui tudo tranquilo. Mas daí chegou a hora de testar a seleção de uma data qualquer no futuro ou no passado. Neste momento resolvi realizar a uma pesquisa no Google, a qual no primeiro resultado me levou ao stackoverflow.
E ali estava exatamente o que eu procurava. O post do stackoverflow comentava sobre a API do datepicker.js, a qual é utilizada pelo Materialize. Neste post foi possível descobrir como setar uma data em um campo date picker, através do seguinte código:
var $input = $('.datepicker').pickadate();
picker.set('select', [2015, 3, 20]);
Porém, como eu faria para utilizar tal código com o Protractor? Para isso o Protractor dispõe da seguinte função, que pode ser executada pelo navegador. A função executeScript.
A função executeScript funciona da seguinte forma:
// Isto é um exemplo de uso da função executeScript:
browser.executeScript("alert('Olá');");
Então eu poderia utilizar a função executeScript do Protractor para executar o código da API do datepicker.js para fazer a seleção de qualquer data. Bastou criar a função auxiliar setDate, a qual pude utilizar nos próximos dois casos de teste:
const setDatescript = "var $input = $('.datepicker').pickadate();" +
"var picker = $input.pickadate('picker');" +
"return picker.set('select', [" + date +"]);";
return setDatescript;
Os casos de teste criados foram os seguintes:
it('select some date in the future', () => {
// In the below date, consider that January is equal to 0, February is 1, ..., December is 11
const futureDate = '2033, 11, 25';
browser.executeScript(setDate(futureDate));
expect(pickerDaySelected.isPresent()).toBe(true);
pickerCloseLink.click();
// Verificação aqui.
it('select some date in the past', () => {
const pastDate = '1982, 3, 15';
browser.executeScript(setDate(pastDate));
Observação.: Os sleep times no testes foram adicionados para fins de demonstração quando os testes são executados, para tornar tal execução um pouco mais lenta, para simular a utilização por um humano.
Mas e como verificar que a data correta foi realmente setada? Para isso foi criada uma nova função auxiliar getDate, a qual pode ser consultada a seguir:
const getDatescript = "var $input = $('.datepicker').pickadate();" +
"return picker.get();";
return getDatescript;
Como a função setDate, a função getDate também pode ser executada pela função executeScript do Protractor, porém, de uma forma diferente, onde desta vez se verifica o retorno da promessa de tal função, para fazer a verificação.
const year = futureDate.substr(0, 4);
const monthAsNumber = futureDate.substr(6, 2);
const monthAsString = months[monthAsNumber];
const day = futureDate.substr(10, 2);
const dateNewFormat = day + ' ' + monthAsString + ', ' + year;
browser.executeScript(getDate()).then((date) => {
expect(date).toEqual(dateNewFormat);
const year = pastDate.substr(0, 4);
const monthAsNumber = pastDate.substr(6, 1);
const day = pastDate.substr(9, 2);
Veja que neste momento, além da verificação adicionada, também foram adicionadas algumas outras variáveis, necessárias para gerar a data em um novo formato, o qual é o retorno da função getDate.
Além disso, para geração da data neste novo formato, o seguinte array de meses foi criado:
E também aproveitei a nova função getDate para adicionar uma nova verificação ao caso de teste que selecionava a data de hoje e logo após a limpava, conforme comentado mais acima. A nova verificação foi a seguinte:
expect(date).toEqual('');
Executando o testes, obtive o seguinte resultado:
> materialize-protractor@0.0.1 test /Users/user/www/materialize-protractor
[23:18:13] I/direct - Using ChromeDriver directly...
[23:18:13] I/launcher - Running 1 instances of WebDriver
1 Materialize - Forms
✓ open date picker (5 secs)
. ✓ pick today's date and close date picker (5 secs)
. ✓ clear birthdate field right after picking today's date (7 secs)
. ✓ select some date in the future (5 secs)
. ✓ select some date in the past (5 secs)
Executed 5 of 5 specs SUCCESS in 26 secs.
Finished in 26.226 seconds
[23:18:40] I/launcher - 0 instance(s) of WebDriver still running
[23:18:40] I/launcher - chrome #01 passed
Uhuu! Tudos os testes passaram.
Ainda há espaço para melhorias, mas por enquanto foi aqui que cheguei, e creio já valer o post para compartilhar com a comunidade.
Uma versão refatorada dos testes está disponível através do seguinte link.
Gostou do post? Gostaria de saber mais o que é possível fazer com o framework Protractor? Veja o livro que publiquei pela editora Casa do Código sobre testes end-to-end automatizados com Protractor.
28 de novembro de 2016 1 de março de 2018 automação de teste de software, date picker, datepicker, e2e testing, materialize, materializecss, protractor, software test, software testing, test automation, Teste de Software