3

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.

Community
  • 1
  • 1
timtos
  • 2,225
  • 2
  • 27
  • 39
  • Quick check. Are you sure the `buttonId` is unique?..what would be in the output in case: `element.all(by.id("buttonId")).count().then(function (count) { console.log(count); });`.? – alecxe Jun 08 '16 at 13:25
  • Hi @alecxe, thanks a lot for your help. The output is 1. – timtos Jun 08 '16 at 13:33
  • Okay, are you sure this is not a timing issue? Have you tried `browser.wait(EC.elementToBeClickable(element(by.id(buttonId))), 5000);` where `var EC = protractor.ExpectedConditions;` before clicking the button? – alecxe Jun 08 '16 at 13:34
  • Strange. On my local system, the output is 1. On the build server the output is 0. But the message on the build server is "element not visible"... I'll try your suggestion with "expectedConditions once more. I did it once and I received a timeout... Thanks again. – timtos Jun 08 '16 at 13:43
  • Yep. Now I get a timeout. I don't think this is a timing issue as I can reproduce the error by playing around with the window size. (Although the build server is behaving differently - for example setting the window size to 0,0 gives no error locally but the build server keeps complaining.) – timtos Jun 08 '16 at 13:48
  • Okay, what about moving to the element and then clicking? `browser.actions().mouseMove(elm).click().perform()`? – alecxe Jun 08 '16 at 13:53
  • @alecxe: That did the trick! :) Perhaps a good link to share: http://www.blaiseliu.com/protractor-error-element-is-not-clickable-at-point-xx-xx/ Can you post an answer I can accept? But it does not leave a lot of trust with protractor. Although I changed the window width it did not work. I even tried to set the window width to 5000, took a screenshot and still the button was clipped - on my machine I got a huge screenshot, just as expected. Is this a protractor bug? Is this mouseMove best practice? – timtos Jun 08 '16 at 14:27

1 Answers1

3

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.

Community
  • 1
  • 1
alecxe
  • 462,703
  • 120
  • 1,088
  • 1,195
  • Hey guys. Thanks so much for your hints. I had exactly the same problem where my build server's resolution was only 1024x768, so my element was never visible. I have used alecxe's `scrollIntoView()` method to work around this problem. – Ben Apr 13 '17 at 11:28