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]

4
  • Could you make a reproducible example? Also, please show how are you determining the location. Thanks.
    – alecxe
    Commented Jan 11, 2016 at 15:46
  • 2
    Does the element have an animation, or any css on it that might seem out of the ordinary?
    – Brine
    Commented Jan 11, 2016 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
    Commented Jan 12, 2016 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
    Commented Jan 12, 2016 at 12:10

1 Answer 1

5
+25

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);
});
1
  • 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
    Commented Jan 28, 2016 at 20:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.