Protractor Testing (Using Selenium and Chrome on angular site) gives wrong x and y point

Protractor Testing (Using Selenium and Chrome on angular site) gives wrong x and y point

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]

Solutions/Answers:

Solution 1:

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:

Related:  How to set a JavaScript breakpoint from code in Chrome?

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);
});

References