Conforme prometido, aí vai mais uma dica para automação de testes e2e (end-to-end) com Protractor.

Quando se está começando na automação de testes funcionais com o Protractor,  as vezes pode ser difícil, ou simplesmente, podemos não saber como lidar com determinadas situações. Você escreve os testes, as coisas parecem fazer sentido, mas mesmo assim eles falham.

Uma das minhas lições aprendidas foram sobre como lidar com testes que interagem com elementos dentro de iFrames. Segue um exemplo para ficar mais claro:

Imagine um formulário, onde dentro dele há um campo do tipo WYSIWIG. Em alguns casos, este elemento será exibido dentro de um iFrame, e para interagir com ele, para por exemplo, escrever um texto, não basta simplesmente o identificar e sair mandando um .sendKeys(‘seu texto’);

Uma forma com a qual obtive sucesso para interagir com elementos como este foi a seguinte:

1 function fillTinyMCEField(frameId, tinyMCEId, text) {
2   browser.switchTo().frame(frameId)
3     .then(function() {
4       var body = element(by.id(tinyMCEId));
5       body.clear();
6       body.click();
7       body.sendKeys(text);
8       browser.switchTo().defaultContent();
9     });
10 }

Para interagir com elementos dentro de um iFrame com o Protractor, precisamos utilizar o método browser.switchTo.frame(frameId…) (linha 2), para que o navegador entenda onde está o elemento a interagir. Veja que o id do iFrame é passado como argumento, além do id do campo WYSIWYG e do texto que nele será preenchido (o último argumento é específico do meu helper).

E por final, deve-se utilizar o browser.switchTo().defaultContent() (linha 8), para voltar ao conteúdo padrão do navegador, para que os testes possam seguir dali em diante.

Obs.: Tive problemas com o browser.switchTo().defaultContent(); quando executando testes contra o navegador Chrome, e descobri o seguinte:

Discussão sobre problema de voltar ao conteúdo padrão usando Chromedriver

Não sei se tal problema ainda persiste, mas por enquanto, estou executando meus testes contra o Firefox, no qual este problema não é percebido.

Se tiver alguma sugestão ou contribuição, deixe um comentário.

Até a próxima!