Interagindo com elementos dentro de um iFrame com Protractor

iFrame

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 dentre 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’);

WYSIWYG exemplo
WYSIWYG exemplo

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 argumentos é específicos 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!

JS NA VEIA

Anúncios

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 )

Imagem do Twitter

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

Foto do Facebook

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

Foto do Google+

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

Conectando a %s