Protractor Fails on Build Server - ElementNotVisibleError - angularjs

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.