Unable to locate the Element on Canvas using Selenium WebDriver

Question

I have an application developed by using Vaadin Framework, Now i need to click on the rectangular polygon which is on the Canvas.following is the html code here i am providing the Html code

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

and i tried by using Actions which makes the mouse move over the Polygon and click .

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
    }

i am getting the foloowing error

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

can anyone suggest some samples how to find polygon on canvas with co-ordinates and make click on it.

Thiago Procaci · Accepted Answer · 2018-03-29T16:24:54.820

1

Usually, the canvas element is embedded in an iframe. So, first, you have to find the iframe element and then find the canvas inside the iframe. For instance:

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

I think this code might help you.

EDIT: After chatting with @RamanaMuttana and his changes on the posted question, I could better understand his need.

We realized that just using the By.tagName selector was enough to find the canvas element as in the code bellow:

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

edited Mar 29 '18 at 16:24

answered Mar 29 '18 at 00:14

Thiago Procaci

1,485
11
16

now i am able to go to iframe after that ,i am not able to find the WebElement canvas =driver.findElement(By.className(" .ol-unselectable"); i am getting error as "Unable to find element with css selector == .ol-unselectable ". do you have any idea ,Do i need to use javascript executor to find element ? – RamanaMuttana Mar 29 '18 at 12:03
In your HTML code, there is no dot (.) before the class name. It is just ol-unselectable. – Thiago Procaci Mar 29 '18 at 12:10
sorry in my Test code also there is no "." it is only my mistake here when i am giving the comment – RamanaMuttana Mar 29 '18 at 12:15
Another option might be to use By.cssselector as in https://stackoverflow.com/questions/7475449/webdriver-classname-with-space-using-java . – Thiago Procaci Mar 29 '18 at 12:15
i tried with the the following but got unable to find the element WebElement element = driver.findElement(By.cssSelector("input[class='ol-unselectable']")); WebElement element = driver.findElement(By.cssSelector("canvas[class='ol-unselectable']")); WebElement element = driver.findElement(By.cssSelector("canvas.ol-unselectable")); WebElement element = driver.findElement(By.xpath("//canvas[@class='ol-unselectable']")); WebElement element = driver.findElement(By.xpath("//canvas[text() = 'ol-unselectable']")); – RamanaMuttana Mar 29 '18 at 12:30
Try using By.tagName like: driver.findElements(By.tagName("canvas")).get(0) – Thiago Procaci Mar 29 '18 at 12:41
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/167816/discussion-between-ramanamuttana-and-thiago-procaci). – RamanaMuttana Mar 29 '18 at 12:43

Unable to locate the Element on Canvas using Selenium WebDriver

1 Answers1