Concrete Logo
Hamburger button

Elemento não carrega no navegador com Protractor? Resolvemos isso!

  • Blog
  • 23 de Julho de 2018

Seus testes e2e passaram a quebrar porque o navegador não renderiza os campos corretamente? Relaxa, sabemos como resolver isso. 🙂

Em qual cenário vem ocorrendo esse problema? Ao realizar o update do projeto para as seguintes versões?

Chrome – 67
Chromedriver – 2.40
Protractor – 5.3.2
Node – 8.11.3
Npm – 5.6.0

Bom… durante algum tempo, todos os testes continuavam a funcionar conforme esperado até que, de forma “misteriosa”, alguns cenários começaram a quebrar. Após uma rápida investigação foi visto que os navegadores, tanto o Chrome quanto o Firefox abriam como se estivessem ‘crashados’ e não carregavam os elementos por completo em tela. Segue a imagem que aparecia no Chrome:

Primeiro pensamento para resolver

Logicamente, a primeira tentativa foi voltar para as versões anteriores e seguir com a vida. Inicialmente até que funcionou mas, novamente, voltou a ocorrer o problema. Também já tinha na cabeça que não era nada legal não termos um projeto atualizado, afinal, as atualizações chegam para corrigir problemas, tornar as ferramentas mais seguras e para trazer melhorias.

Pesquisas no google sem sucesso

Como de costume, as infinitas pesquisas com “How to solve…” no Google não resultaram em nenhuma resposta válida para mim. Porém, após muitas leituras sobre os problemas que aconteceram nas versões anteriores dos navegadores e do Protractor… tive um insight!

Enfim, vamos resolver esse problema!

É tão simples que chega a ser assustador ter “perdido” todo esse tempo e não ter achado nada que funcionasse para esse cenário. O fato é que resolvi entrar nos comandos do Chrome e ver se algum argumento faria sentido, até que me deparei com o –disable-gpu, muito visto em alguns ‘conf.js‘ do Protractor para testes em headless a partir de certas versões dos navegadores. Segue um exemplo para o Chrome:

E sim, era só isso… bastava usar um args no Chrome e/ou Firefox para desabilitarmos a GPU durante os testes que tudo voltaria ao normal.

Conforme documentação, ao desabilitarmos essa opção, estamos tirando a aceleração do hardware da GPU. Porém, se o renderizador de software não estiver no lugar, o processo da GPU não seria iniciado. Para mais informações, segue: GPU

Conclusão

Há algum tempo, a desativação do GPU estava sendo obrigatória para headless e deixaram claro que isso era temporário e que em versões futuras não haveria mais necessidade. Logo, é muito provável que em novas versões isso não seja necessário de novo, de qualquer forma, segue tela com todos os elementos carregados corretamente:

Então é isso, pessoal. Espero que o post possa ajudar a todos.

Qualquer dúvida basta comentar aqui no post. 🙂

Referências

https://peter.sh/experiments/chromium-command-line-switches/
https://github.com/angular/protractor/blob/master/docs/browser-setup.md
https://github.com/angular/protractor/issues/4641
https://github.com/angular/protractor/issues/4146
https://en.wikipedia.org/wiki/Graphics_processing_unit
http://www.itpro.co.uk/hardware/30399/what-is-a-gpu