timtos timtos - 5 months ago 67
AngularJS Question

Protractor Fails on Build Server - ElementNotVisibleError

All my angular e2e tests using protractor with cucumber are running smooth and fine on my machine. But as soon as I run the tests on the build server, I get an error


ElementNotVisibleError: element not visible

Session info: chrome=51.0.2704.84

Driver info: chromedriver=2.21.371459

platform=Windows NT 6.1 SP1 x86_64


In the beginning, I thought this has something to do with timing, some asynchronous stuff that is happening but after hours of debugging I can finally reproduce the bug even on my local machine.

Minimizing the window is not enough but if I quickly drag the mouse to make the window as small as possible, I get this error. So it is just a matter of "window size".


Thus the error message is quite ok, but how are protractor meant to
run on a build server?


And why are some tests passing? Protractor seems to "see" something on the build server, thus

I tried

browser.driver.manage().window().maximize();


I tried

browser.manage().window().setSize(1920, 1200);


and I tried to change my code as suggested here and I tried a lot of more (hopeless) things. Nothing worked.

My big question now: How can I run a protractor test in a stable fashion on a build server (in my case TFS) when there is a rightmost button I want to click on some page?

Short code sample:

browser.get(browser.baseUrl + '#/somePage').then...
element(by.id(buttonId)).click();


Thank you!

UPDATE:

The main reason for my problems was the fact that the screen resolution while running the test on the build server had a width of 1024 and thus setSize(1920, 1200) failed. For that reason I now added an output of the current resoltuion in the onPrepare function, so that I will get a hint in the future:

onPrepare: function () {
browser.executeScript('return { height: screen.availHeight, width: screen.availWidth, top: screen.availTop, left: screen.availLeft};').then(function (result) {
console.log("Screen resolution: ");
console.log(result);
});

browser.manage().window().setSize(1920, 1200);


Of course this could be extended a little bit to throw an exception or something like this.

Answer

Sometimes, we need to bring the desired element into view in order to avoid "Element not visible" error. We can do that in two general ways:

  • use "browser actions":

    var elm = element(by.id("buttonid"));
    browser.actions().mouseMove(elm).click().perform()
    
  • scroll into view:

    var elm = element(by.id("buttonid"));
    browser.executeScript("arguments[0].scrollIntoView();", elm.getWebElement());
    

Also linking this answer that has a nice set of things you can try to tackle the problem.

Comments