无法使用 Selenium WebDriver 在 Canvas 上定位元素

Question

我有一个使用 Vaadin 框架开发的应用程序，现在我需要单击 Canvas.following 上的矩形多边形是 html 代码我在这里提供 Html 代码

<canvas width="1920" height="524" class="ol-unselectable" style="width: 100%; height: 100%;"></canvas>

我尝试使用使鼠标移到多边形上并单击的动作。

int x = (int) 5638326.333511386;
int y = (int)  2580101.9711508946;
driver.get("http://localhost:8080/internship");

WebElement ele = driver.findElement(By.xpath("//canvas[@class='ol-unselectable']"));
        //  driver.findElement(By.tagName("canvas"));
        //driver.findElemet(By.className("ol-unselectable"));
try {
    Actions builder = new Actions(driver);
    builder.moveToElement(ele, x, y);
    builder.clickAndHold();
    builder.release();
    builder.perform();
    } catch (Exception e) {
        // do nothing
    }

我收到以下错误

org.openqa.selenium.NoSuchElementException: Unable to locate element: //canvas[@class='ol-unselectable'].

任何人都可以建议一些示例如何在 canvas 上使用坐标查找多边形并单击它。

Answer 1

通常，canvas 元素嵌入在 iframe 中。因此，首先，您必须找到 iframe 元素，然后在 iframe 中找到 canvas。例如：

WebDriver driver = new FirefoxDriver(firefoxOptions);
        try {
            driver.get("https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_canvas_empty");
            WebElement iframe = driver.findElement(By.name("iframeResult"));
            driver.switchTo().frame(iframe);
            WebElement canvas = driver.findElement(By.id("myCanvas"));
            System.out.println(canvas.getText());
        } finally {
            driver.quit();
        }

我认为这段代码可能对您有所帮助。

编辑： 在与@RamanaMuttana 聊天并了解他对已发布问题的更改后，我可以更好地理解他的需求。

我们意识到只需使用 By.tagName 选择器就足以找到 canvas 元素，如下面的代码所示：

driver.findElements(By.tagName("canvas")).get(0);

无法使用 Selenium WebDriver 在 Canvas 上定位元素

Unable to locate the Element on Canvas using Selenium WebDriver

java

action

canvas

polygon

selenium-webdriver