Zmur
Zmur

Reputation: 334

Finding a center of a WebElement

Using appium and selenium to auto-test and android app. To press various buttons we were using WebElement.click() function but that was rather slow in some cases, so replacing it with WebDriver.tap(coordinates) I need to tap in the center of a button, so I wrote a simple function to determine where that center is:

        x_start = element.rect.get(X)
        y_start = element.rect.get(Y)
        width = element.rect.get("width")
        height = element.rect.get("height")

        x_result = x_start + width / 2
        y_result = y_start + height / 2

        self.driver.tap([(x_result, y_result)])

Worked like a charm until I encountered some buttons at the bottom of the screen which won't return the left edge, but the right one and I ended up with this:

selenium.common.exceptions.InvalidArgumentException: Message: Coordinate [x=359.5, y=1213.5] is outside of element rect: [0,0][720,1184]

As it seems to me, for some reason, when any of the following methods are called:

element.location_once_scrolled_into_view  #output: {'y': 1188, 'x': 297}
element.location  #output: {'y': 1188, 'x': 297}
element.location_in_view  #output: {'y': 1188, 'x': 297}
element.rect  #output: {'y': 1188, 'width': 125, 'height': 51, 'x': 297}

they return the right corner of the button and in this case I have to do not x_result = x_start + width / 2 but x_result = x_start - width / 2. The problem is however to know what case is this, because from the numbers I get from calling mentioned functions I have no way of knowing which corner of the element is used. They all seem to return same results and I couldn't find any functions that would return extents (x1,y1,x2,y2) of the element, not x,y,size_x,size_y.

Is there a way around this issue?

Upvotes: 0

Views: 1532

Answers (1)

Peter
Peter

Reputation: 21

we are trying to automate some webapp-tests on mobil devices (browsers) and we have similar problems. The webelements in the DOM are usually identified by:

driver.findElement(By.cssSelector(".some-class")).getRect().getX()
driver.findElement(By.cssSelector(".some-class")).getRect().getWidth()

and so on.

The problems on a touch screen are:

  • The coordinates of the touch screen (and TouchActions) are beginning on the left upper corner starting with [0,0] to [1080,2178] which is the screen resulution.
  • The coordinates of a webelement are starting from the left bottom of the visual website area.

First attempt was to calculate the right coordinates for the touch event with the help of the dimensions of the html-document:

int bodywidth =driver.findElement(By.tagName("body")).getRect().getWidth();
int bodyheight =driver.findElement(By.tagName("body")).getRect().getHeight();

But a solution doesn't come easily. The rectangle of the DOM-body includes the unvisible part (which you only can reach by swiping down).

So what we are looking for is a function like this, which executes the action on the element itself. In this case move some element 100 pixels to the left:

TouchActions scroll = new TouchActions(driver);
scroll.scroll(some-webelement, -100,0);
scroll.perform();

Still not found a good solution. Just a work around by using hard coded coordinates which you can get with some tools like "Screen Coordinates" from the playstore.

Upvotes: 2

Related Questions