Take the 2-minute tour ×
Software Quality Assurance & Testing Stack Exchange is a question and answer site for software quality control experts, automation engineers, and software testers. It's 100% free, no registration required.

How do I click on a Canvas element by using Selenium Web Driver and Java? I have searched Google but didn't find what I needed.

A marker/pin is on the Google map and I have to click on the marker/pin. I've tried with JavaExecutor but it fails.

HTML Code:

  div id="map_canvas" style="width: 90%; height: 600px; margin: 0px auto; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;">
<div class="gm-style" style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
<div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
<div style="position: absolute; left: 0px; top: 0px; z-index: 1; width: 100%; cursor: url("https://maps.gstatic.com/mapfiles/openhand_8_8.cur"), default;">
<div style="position: absolute; left: 0px; top: 0px; width: 100%; z-index: 200;">
<div style="position: absolute; left: 0px; top: 0px; z-index: 101; width: 100%;"/>
</div>
<div style="position: absolute; left: 0px; top: 0px; width: 100%; z-index: 201;">
<div style="position: absolute; left: 0px; top: 0px; z-index: 102; width: 100%;"/>
<div style="position: absolute; left: 0px; top: 0px; z-index: 103; width: 100%;">
<div style="position: absolute; left: 0px; top: 0px; z-index: -1;">
<div style="position: absolute; left: 0px; top: 0px; z-index: 1;">
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 678px; top: 57px;">
<canvas draggable="false" style="-moz-user-select: none; position: absolute; left: 0px; top: 0px; height: 256px; width: 256px;" height="256" width="256"/>
<div style="width: 1px; height: 1px; position: absolute; left: 200px; top: 234px;"/>
</div>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 678px; top: 313px;">
<canvas draggable="false" style="-moz-user-select: none; position: absolute; left: 0px; top: 0px; height: 256px; width: 256px;" height="256" width="256"/>
</div>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 422px; top: 57px;"/>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 422px; top: 313px;"/>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 934px; top: 57px;"/>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 934px; top: 313px;"/>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 678px; top: -199px;"/>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 678px; top: 569px;"/>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 422px; top: -199px;"/>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 422px; top: 569px;"/>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 934px; top: -199px;"/>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 934px; top: 569px;"/>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 166px; top: 57px;"/>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 166px; top: 313px;"/>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 1190px; top: 57px;"/>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 1190px; top: 313px;"/>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 166px; top: -199px;"/>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 166px; top: 569px;"/>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 1190px; top: -199px;"/>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 1190px; top: 569px;"/>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -90px; top: 57px;"/>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -90px; top: 313px;"/>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 1446px; top: 57px;"/>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 1446px; top: 313px;"/>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -90px; top: -199px;"/>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -90px; top: 569px;"/>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 1446px; top: -199px;"/>
<div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 1446px; top: 569px;"/>
</div>
</div>
</div>
</div>

enter image description here Java code:

//Switch to frame
driver.switchTo().frame("ajaxUI-history-iframe");
        WebElement element = driver.findElement(By.xpath("//*[@id='map_canvas']//div[1]/canvas"));
        JavascriptExecutor executor = (JavascriptExecutor) driver;
        executor.executeScript("arguments[0].click();", element);
share|improve this question
    
you should check your xpath i am sure. The xpath and the HTML code you have posted has no equation. –  Karthikeyan May 8 at 5:15
    
@Karthikeyan Yeah you right, I'm pretty sure about Xpath is right. I didn't post all HTML. I posted just element info. Now I've updated the HTML. Please see if you need more things I would provide you. –  Adnan Ghaffar May 8 at 6:05
    
What browser and version of web driver are you using? I have extensively automated a canvas application and using the selenium click method has worked just fine. I did have issues doing more complex actions (like drag and drop) using actionBuilder and had to instead create javascript to create and execute events. I could share that if interested, but it does not answer your question. –  Sam Woods Sep 9 at 0:52

1 Answer 1

I would use Firefox and Selenium IDE recorder to see how it would identify the marker you want to click on. In my tests on classic Google maps it detects the marker as id=mtgt_A.1000

You need to have a couple of second delay after map is loaded in order for marker to load properly.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.