12

I have been debugging a test and found that protractor is finding the correct element but the location (x and y) do not link to the location of the button that has been found. When click is called on this element it misses and clicks the wrong place causing the test to fail.

As a note these tests seem to run fine on other machines with the only difference being the operating system the tests fail on is windows 10?

Does anyone know how protractor / selenium determines the location of the element.

Thanks in advance.

Jack Reeves

EDIT:

After comment requesting some examples:

To get the page object:

browser.get('examplePageAddress')

To get the header that the button is located:

var elem = element.all(by.className('header')).get(0)

To get the div that the button is located within the header:

var div = elem.element(by.name('examplename'))

To get the actual button 

var button = element(by.name('exampleButtonName'))

In the actual test a simple button.click() is called and that is what is missing the button by about 50px.

Through debugging and writing to the console I have confirmed that the correct element is selected [using .getInnerHTML()] and by measuring the location of the button determined it is about 50px different [used .getLocation() to determine x and y returned by protractor]

JackFrost
  • 255
  • 1
  • 12
  • Could you make a reproducible example? Also, please show how are you determining the location. Thanks. – alecxe Jan 11 '16 at 15:46
  • 2
    Does the element have an animation, or any css on it that might seem out of the ordinary? – Brine Jan 11 '16 at 18:08
  • Doesn't look like it, as I said it does work when this test is run on other machines which is the weirdest thing! The button itself is in a div of its own and its the location of the div that is wrong :S – JackFrost Jan 12 '16 at 12:08
  • Another point, when watching the test run I see it click on the wrong place on the page as there is a text box it hits, I was mainly hoping for some insight on how protractor / selenium determines the location of the element so I could do some reading about it if you are aware of any documentation (official documents just say it returns x and y). – JackFrost Jan 12 '16 at 12:10

1 Answers1

5

In the actual test a simple button.click() is called and that is what is missing the button by about 50px

In this case, move to the element first and then perform a click:

browser.actions().mouseMove(button).click().perform();

Or, scroll into view of the element:

browser.executeScript("arguments[0].scrollIntoView();", button.getWebElement());
button.click();

Note that getLocation() itself depends on the visible area - the viewport that a browser determines. It may be different in different browsers and different operating systems. See also:

And, you can actually get the viewport size and compare it on the browsers and systems you execute your tests on - I'm pretty sure you'll get different values, see:

You may also look into what getBoundingClientRect() returns in your case:

The Element.getBoundingClientRect() method returns the size of an element and its position relative to the viewport.

browser.executeScript("return arguments[0].getBoundingClientRect();", button.getWebElement()).then(function (rect) {
    console.log(rect.left);
    console.log(rect.top);
});
Community
  • 1
  • 1
alecxe
  • 462,703
  • 120
  • 1,088
  • 1,195
  • Hey been really busy at work, was hoping to try this out before awarding you the points but it auto expired so guess you get them :) thanks for the input I'll let you know if this does solve it! – JackFrost Jan 28 '16 at 20:13