Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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]

like image 431
JackFrost Avatar asked Jan 11 '16 15:01

JackFrost


1 Answers

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:

  • WebElement.getLocation and WebElement.getSize in screen shots

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:

  • Get the browser viewport dimensions with JavaScript

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);
});
like image 71
alecxe Avatar answered Sep 28 '22 02:09

alecxe