無法使用Selenium WebDriver在畫布上找到元素

Question

我有一個使用Vaadin Framework開發的應用程序，現在我需要單擊Canvas上的矩形多邊形。以下是這里的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：無法找到元素：// canvas [@ class ='ol-unselectable']。

誰能提出一些示例，說明如何使用坐標在畫布上查找多邊形並單擊它。

Answer 1

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

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