Element doesn’t load properly in the browser using Protractor? Let’s solve it!
Are your e2e tests breaking because the browser doesn’t render the fields properly? Relax, we know how to solve it.
What scenario occur this problem?
When performing the project updates for the following versions*:
Chrome — 67
Chromedriver — 2.40
Protractor — 5.3.2
Node — 8.11.3
Npm — 5.6.0
For a period of time, all the tests continue to work as expected, until in a “mysterious” way some scenarios start to fail. After a quick investigation it was realized that the browsers, both Chrome and Firefox, opened like as though they had crashed and didn’t load the elements completely on the screen.
First idea to solve the problem.
Of course, the first attempt was to go back to the previous versions and try to execute the tests again. Initially it worked fine but then again, the problem returned. I always have the opinion that it is not cool does not have an updated project. After all, the updates come to fix problems, make tools safety, and bring improvements.
Searches in google without success.
As usual, searches with “How to solve …” on google didn’t result in any valid response to me. However, after many readings about the problems which occurred in very old browsers versions and the Protractor, they made me have an idea.
Finally, we will solve this problem!
The solution is so simple that “waste” all this time and did not find anything that works for this scenario is quite scary. I decided to get into the Chrome commands in Protractor and see if any arguments would make sense. I looked to “conf.js” file and came across “disable-gru” command. It command was widely used for headless testing in some old version of internet browsers.
Here’s an example for Chrome:
Yes, it was just that … just add an “args” in Chrome and/or Firefox “conf.js” to disable the GPU during the tests. After that, everything should work fine.
As seen in the documentation, by disabling this option, we are taking away the GPU hardware acceleration. However, if the software renderer is not in place, the GPU process will not start. For more information follow: GPU
Conclusion.
Some time ago, disabling the GPU was mandatory for headless testing. It was made clear that It was temporary and in the future releases this command would be no necessary. Therefore, it is very likely that in the new versions this will not be required again.
See the screen with all elements loaded correctly:
So that’s it guys, I hope this information can help more people.
And any questions just comment here on this post :)
References:
