如何在Java Selenium 驱动程序中单击canvas 的中心？

Question

我正在尝试编写代码来点击网页中的 canvas 中心。

下面是代码：

private static void clickCanvasCenter() {
    WebElement we = driver.findElement(By.tagName("canvas"));
    int x = we.getSize().width/2;
    int y = we.getSize().height/2;

    Actions builder = new Actions(driver).moveToElement(new WebDriverWait(driver,20)
                .until(ExpectedConditions.elementToBeClickable(we)));

    System.out.println("width:" + x + "\theight:" + y);
    builder.click().build().perform();
    System.out.println("clicked:1");

    builder.moveByOffset(x, y).click().build().perform();
    System.out.println("clicked:2");
}

输出为：

width:683   height:341
clicked:1
Exception in thread "main" org.openqa.selenium.interactions.MoveTargetOutOfBoundsException: move target out of bounds
  (Session info: chrome=79.0.3945.130)

在上面的代码中，如果我没有通过moveByOffset()方法移动鼠标，可以执行点击动作（因为你可以看到'clicked:1'），但是它没有点击canvas元素。如果我试图将鼠标移到 canvas 元素上，则会引发异常。

如何让它工作并单击 canvas 元素的中心？

Answer 1

相关的 DOM Tree 会帮助我们构建一个规范的答案。但是，在处理 <canvas> 元素时，您需要考虑以下几点：

<canvas>的左上角有坐标(0,0),而
使用 W3C Action class 命令，偏移距元素中心。

通常，<canvas> 元素将具有以下属性：

width
height
style 包含属性 width、height 等

举个例子：

<canvas id="canvas" width="227" height="294" style="position: absolute; display: block; background-color: rgb(255, 255, 255); width: 227.53px; height: 294px;"></canvas>

现在，点击网页中 <canvas> 元素的中心，您真的不需要计算：

we.getSize().width/2;
we.getSize().height/2;

作为：

The current implementation of Action class commands, offsets are from the center of element.

所以，您可以使用以下解决方案：

WebElement canvas = new WebDriverWait(driver, 10).until(ExpectedConditions.elementToBeClickable(By.id("canvas")));
//clicking on the centre
new Actions(driver).moveToElement(canvas).click().build().perform();

Incase，你想点击偏移量，你需要使用moveByOffset()如下：

new Actions(driver).moveToElement(canvas, 0, 0).moveByOffset((683/5)*3,(341/5)*3).click().build().perform();

参考

您可以在以下位置找到相关的详细讨论：

如何在Java Selenium 驱动程序中单击canvas 的中心？

How to click the center of the canvas in Java Selenium Driver?

java

selenium

canvas

click

参考