Protractor Fails on Build Server - ElementNotVisibleError

Question

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 1

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.