Skip to content
This repository has been archived by the owner on Nov 29, 2018. It is now read-only.

WebDriver cannot click an 'area' element #2354

Open
lukeis opened this issue Mar 3, 2016 · 31 comments
Open

WebDriver cannot click an 'area' element #2354

lukeis opened this issue Mar 3, 2016 · 31 comments

Comments

@lukeis
Copy link
Member

lukeis commented Mar 3, 2016

Originally reported on Google Code with ID 2354

I am in the process of migrating my test suite from the Selenium 1 to WebDriver. I've
come across a problem clicking on elements on a page which contains a map of the USA
clickable states.

Using Selenium 1 I would do the following to select a particular state from the map.
selenium.click("css=area[alt=North Carolina]");


In Selenium 2 I'm converting this to
driver.findElement(By.cssSelector("area[alt=North Carolina]")).click();


WebDriver actually selects a different State. This is not a timing issue, a state is
selected it is just the incorrect state. I've tried switching out cssselector for xpath
with the same result.

What steps will reproduce the problem?

Code example to reproduce issue

        driver.get("http://www.servsafe.com/FoodHandler");

        driver.findElement(By.xpath("//*[@id='studentNav']/li[1]/a")).click();

        driver.findElement(By.xpath("//area[@alt='California']")).click();


        //Compare current page to correct/expected page
        String currentpage = driver.getCurrentUrl();

        System.out.println("URL IS "+ currentpage);

        String correctpage = "http://www.servsafe.com/catalog/productlist.aspx?SCID=55&RCID=21";

            System.out.println(correctpage.equalsIgnoreCase(currentpage));

What is the expected output? What do you see instead?

User should select the State of California. It is selecting a generic state although
I can't determine which state it is selecting as only a few states on the map have
specialized pages (you can see this in the HTML for the page). 

Selenium version:
OS: WIN7 & WIN XP
Browser: Firefox 5/6 and Internet Explorer 8 



Reported by brett.kochendorfer on 2011-08-27 19:21:38

@lukeis
Copy link
Member Author

lukeis commented Mar 3, 2016

See also related issue 824

Reported by barancev on 2011-10-13 08:35:00

  • Labels added: Component-WebDriver

@lukeis
Copy link
Member Author

lukeis commented Mar 3, 2016

Reported by barancev on 2012-06-02 17:36:34

@lukeis
Copy link
Member Author

lukeis commented Mar 3, 2016

This does not work in Chrome either.
Chrome : 19
Windows 7
.Net Driver

I'm wondering if this should be handled by Selenium team or the Chrome driver team.

Reported by ravindrarupadhya on 2012-06-22 08:01:43

@lukeis
Copy link
Member Author

lukeis commented Mar 3, 2016

The same is the issue for me too

I have a map on an image written something like this

<map name="nav" style="background-color: transparent;">
<area coords="8,17,255,41" title="title1" href="http://reference1
<area coords="9,53,113,72" title="title2" href="http://reference2
<area coords="131,52,187,71" title="title3" href="http://reference3
<area coords="8,75,215,92" shape="rect" title="title4" href="http://reference4
</map>

I have tried clicking title2 using css=area[title='title2'], but it is always clicking
the area title3, no matter which ever area I am trying to click

I am using RemoteWebDriver to do this
My selenium server version: 2.24.1
OS: WinXP
Browser: firefox 12.0

Reported by bala539 on 2012-07-17 12:31:13

@lukeis
Copy link
Member Author

lukeis commented Mar 3, 2016

Using Selenium 2.25.1, WinXP, IE 9.0.8112.16421, I am also unable to click within an
area using XPath and using title as the identifier, webdriver.FindElement(XPath("//map[contains(@class,'chart_map')]//area[contains(@title,'Ex1')]")).Click();

<map name="example" class="chart_map" >
 <area tabIndx="-1" title="Ex1" class="chart_area" shape="POLY" coords="36,...">
 <area tabIndx="-1" title="Ex2" class="chart_area" shape="POLY" coords="79,...">

Any tips on a solution?

Reported by davemunns@comcast.net on 2012-12-05 21:52:25

@lukeis
Copy link
Member Author

lukeis commented Mar 3, 2016

For Firefox it's implemented by revision 5a0284c1a625
The fix should be available in release 2.31

Reported by barancev on 2013-02-26 20:51:24

@lukeis
Copy link
Member Author

lukeis commented Mar 3, 2016

Issue 2750 has been merged into this issue.

Reported by barancev on 2013-04-16 07:25:58

@lukeis
Copy link
Member Author

lukeis commented Mar 3, 2016

Reported by barancev on 2013-04-16 07:27:17

  • Labels added: Browser-IE, Browser-Chrome, Browser-Safari

@lukeis
Copy link
Member Author

lukeis commented Mar 3, 2016

The problem still exists in WebDriver 2.31 version, when performing click on Map/Area(area
element which is generated using co ordinates) no error displayed, but it is not clicking
also.Anybody has found any solution for this, please comment..!! 

Reported by juelghosh on 2013-06-17 16:05:27

@lukeis
Copy link
Member Author

lukeis commented Mar 3, 2016

I am still the facing the issue in Firefox -20.0.1; WebDriver-2.31; 
I have tried all the below alternatives to click on the Map/Area element,none of them
worked for me.
Webdriver is able to identify the area and able to perform mouse over/MouseMoveTo element
and tooltip was displayed, but unable to click, sometimes it clicks the Default selected
area under the same Map tag.
If anyone have any sollution to this problem, please add a comments here or can send
a email to me(juelghosh@gmail.com) 
1. WebElement link=browser.findElement(By.xpath("//a[text()='New Grade']"));
link.click();//link.doubleclick()
//click once again
link.click();
2. Keyboard way, ENTER key
link.sendKeys(Keys.ENTER);
3. Actions moveTo = new Actions(driver);
moveTo.moveToElement(link).click().build().perform();
4, try as finding the elelemnt with CSSSelector

Sample Code:
<map id="grid_W126_0_map1090" name="grid_W126_0_map1090">
<area tooltip=" ToolTip Text" href=" " linked="true" shape="poly" cx="[8,2,2,0]" onmousedown="*****('grid_W126_0_gb').onmousedown(event);"
onclick="*****('grid_W126_0_gb').submitControlAction(3,'F299 K89','1'); return false"
seriesid="8" coords="226,110,219,80,200,55,173,41,142,39,113,51,92,73,82,103,86,134,102,160,128,177,141,144,128,135,120,122,118,106,123,92,134,80,148,75,163,75,177,83,187,95,190,110"
cxid="grid_W126_0_cmm" onmousemove="onGraphMouseMove(event, 'grid_W126_0_gb');">
</map>

Reported by juelghosh on 2013-06-20 13:59:45

@lukeis
Copy link
Member Author

lukeis commented Mar 3, 2016

I have reproduced this issue on selenium 2.26 IE today. I am using Robot Framework +
Selenium2Library, just open following web page: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap,
go into iframe 'view', and then click element by xpath //area[contains(@alt, "Sun")],
everything works fine; click "Mercury", you will click on 'Sun' as well; click "Venus",
and nothing will happen. I guess the element positioning algorithm is not working on
area. I guess it will be too much work for selenium to support click point and visibility
calculation for every area, I suggest just js execution in this scenario.

Reported by adwu73@hotmail.com on 2013-07-24 07:14:22

@lukeis
Copy link
Member Author

lukeis commented Mar 3, 2016

Implemented in Chrome

Reported by barancev on 2013-11-02 14:15:27

  • Labels removed: Browser-Chrome

@lukeis
Copy link
Member Author

lukeis commented Mar 3, 2016

Selenium Webdriver unable to click on map/area.
Reproduced it with version 2.37. Firefox version: 24
Its is working with version 2.25 and Firefox version: 13

Always get error: element is not visible with 2.37
Aggressively waiting for solution to this.

Reported by akshay.tuli7 on 2013-11-19 08:32:06

@lukeis
Copy link
Member Author

lukeis commented Mar 3, 2016

No repro => no answer :)

Reported by barancev on 2013-11-19 09:33:56

@lukeis
Copy link
Member Author

lukeis commented Mar 3, 2016

Its reproducible if Webdriver tries to click on Imagemap code.

Source code is something like:
<map name="xyz">
<area coords="7,24,36,40" title="xyz1" onmouseout="xyz2();" onclick="abc('0');" href=""
name="0">
</map>

Webdriver is able to find 'map' tag but not finding 'area'.
This whole code is hidden though.

Error displayed: element is not visible
Made this code visible as well using javascript by setting display property. Still
no luck.

Reported by akshay.tuli7 on 2013-11-19 13:45:59

@lukeis
Copy link
Member Author

lukeis commented Mar 3, 2016

I can repeat the same once again: no repro => no answer

We have regression tests that show selenium can work with image maps in FF. We have
tests that show selenium can determine element visibility as expected. Your page might
be an edge case, but how can we know?

Reported by barancev on 2013-11-19 15:19:37

@lukeis
Copy link
Member Author

lukeis commented Mar 3, 2016

I am using the latest version (selenium-dotnet-2.37.0), but the issue related to map/area
click, is not fixed yet.It does not work in any browser(FF 25/Chrome/IE. 
please let me know if it works for anybody.

Reported by juelghosh on 2013-11-19 15:34:04

@lukeis
Copy link
Member Author

lukeis commented Mar 3, 2016

A sample in Java (works in FF25 with Selenium 2.37):

WebDriver driver = new FirefoxDriver();
WebDriverWait wait = new WebDriverWait(driver, 10);
driver.get("http://www.december.com/html/demo/imagemap.html");
List<WebElement> elements = driver.findElements(By.cssSelector("map area"));
elements.get(1).click();
wait.until(ExpectedConditions.titleIs("HTML Station--Welcome"));
driver.quit();

Reported by barancev on 2013-11-19 16:56:08

@lukeis
Copy link
Member Author

lukeis commented Mar 3, 2016

Getting the following error in chrome for click on Map/Area element:
unknown error: Element is not clickable at point (738, 199). Other element would receive
the click: <area onmousemove="onGraphMouseMove(event, 'grid_K75_0_gb');" cxid="grid_K75_0_cmm"
coords="6,5,307,191" seriesid="-1" onmousedown="microstrategy.bone('grid_K75_0_gb').onmousedown(event);"
cx="[0]" shape="rect"> (Session info: chrome=31.0.1650.57) (Driver info: chromedriver=2.6.232923,platform=Windows
NT 6.1 SP1 x86)
System.InvalidOperationException
at OpenQA.Selenium.Remote.RemoteWebDriver.UnpackAndThrowOnError(Response errorResponse)
in c:\Projects\WebDriver\trunk\dotnet\src\webdriver\Remote\RemoteWebDriver.cs:line
1012 at OpenQA.Selenium.Remote.RemoteWebDriver.Execute(String driverCommandToExecute,
Dictionary`2 parameters)
in c:\Projects\WebDriver\trunk\dotnet\src\webdriver\Remote\RemoteWebDriver.cs:line
846 at OpenQA.Selenium.Remote.RemoteWebElement.Click()
in c:\Projects\WebDriver\trunk\dotnet\src\webdriver\Remote\RemoteWebElement.cs:line
336

Reported by juelghosh on 2013-11-20 09:20:36

@lukeis
Copy link
Member Author

lukeis commented Mar 3, 2016

Reply to #21:
I see this code working on my machine for FF 24 and 2.37.

Not sure why image map on my application is not click able. Seems I am doing nothing
wrong in it.

The only difference it has is, on clicking area my application opens a dropdown menu
instead of taking to new page.

Reported by akshay.tuli7 on 2013-11-20 09:36:51

@lukeis
Copy link
Member Author

lukeis commented Mar 3, 2016

Many others are also facing the same map area issue. 
Something is there which WebDriver in not able to handle with 2.37. Unless it is not
caught it can not be fixed. 
I see the #21 working on Firefox, similar thing does not work on my application and
many others when click event opens a dropdown menu or may be something different. 
I wish I could have some more information for now.

Reported by akshay.tuli7 on 2013-11-23 11:41:58

@lukeis
Copy link
Member Author

lukeis commented Mar 3, 2016

Hi, I am also facing similar kind of issue.

here is the html source.
<map name="nav">
<area coords="8,17,255,41" title=" Upload " href="reference1">
<area coords="9,53,113,72" title=" Order " href="reference2">
<area coords="131,52,187,71" title=" Share " href="reference3">
<area coords="8,75,215,92" shape="rect" title=" Shop " href="reference4">
<area title="Mobile" alt="Mobile" href="reference5" coords="24,92,114,110" shape="rect">
</map>

When I am trying to click on area with title "Share" or "Order" or "upload", it is
not working and getting below exception. Interestingly, click action is working for
"Shop" and "Mobile". This entire map is in hidden though.

I am getting this exception for the first 3 area elements.

Exception in thread "main" org.openqa.selenium.ElementNotVisibleException: Element
is not currently visible and so may not be interacted with
Command duration or timeout: 61.95 seconds
Build info: version: '2.38.0', revision: 'bd32d4e', time: '2013-12-05 16:15:38'
System info: host: 'naveen', ip: '127.0.1.1', os.name: 'Linux', os.arch: 'amd64', os.version:
'3.8.0-34-generic', java.version: '1.6.0_27'
Session ID: 247fd534-7c37-43a0-9c7c-0666d6e2dd82
Driver info: org.openqa.selenium.firefox.FirefoxDriver
Capabilities [{platform=LINUX, acceptSslCerts=true, javascriptEnabled=true, browserName=firefox,
rotatable=false, locationContextEnabled=true, version=26.0, cssSelectorsEnabled=true,
databaseEnabled=true, handlesAlerts=true, browserConnectionEnabled=true, nativeEvents=false,
webStorageEnabled=true, applicationCacheEnabled=true, takesScreenshot=true}]
Command duration or timeout: 62.97 seconds
Build info: version: '2.38.0', revision: 'bd32d4e', time: '2013-12-05 16:15:38'
System info: host: 'naveen', ip: '127.0.1.1', os.name: 'Linux', os.arch: 'amd64', os.version:
'3.8.0-34-generic', java.version: '1.6.0_27'
Session ID: 1837aaaa-e76f-498f-baab-fb4aa1baf454
Driver info: org.openqa.selenium.remote.RemoteWebDriver
Capabilities [{platform=LINUX, acceptSslCerts=true, javascriptEnabled=true, browserName=firefox,
rotatable=false, locationContextEnabled=true, webdriver.remote.sessionid=1837aaaa-e76f-498f-baab-fb4aa1baf454,
version=26.0, cssSelectorsEnabled=true, databaseEnabled=true, handlesAlerts=true, browserConnectionEnabled=true,
nativeEvents=false, webStorageEnabled=true, applicationCacheEnabled=true, takesScreenshot=true}]
    at sun.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method)
    at sun.reflect.NativeConstructorAccessorImpl.newInstance(NativeConstructorAccessorImpl.java:57)
    at sun.reflect.DelegatingConstructorAccessorImpl.newInstance(DelegatingConstructorAccessorImpl.java:45)
    at java.lang.reflect.Constructor.newInstance(Constructor.java:534)
    at org.openqa.selenium.remote.ErrorHandler.createThrowable(ErrorHandler.java:193)
    at org.openqa.selenium.remote.ErrorHandler.throwIfResponseFailed(ErrorHandler.java:145)
    at org.openqa.selenium.remote.RemoteWebDriver.execute(RemoteWebDriver.java:554)
    at org.openqa.selenium.remote.RemoteWebElement.execute(RemoteWebElement.java:268)
    at org.openqa.selenium.remote.RemoteWebElement.click(RemoteWebElement.java:79)

I am able to reproduce this also. 

Selenium version: 2.38
FF: 26
OS: Ubuntu

Reported by naveendnr on 2013-12-18 09:33:24

@lukeis
Copy link
Member Author

lukeis commented Mar 3, 2016

@barancev
Another guy in #26 who is facing this problem. Seem there is something incorrect here.
Any solution?

Reported by akshay.tuli7 on 2014-01-02 04:36:10

@lukeis
Copy link
Member Author

lukeis commented Mar 3, 2016

Please provide a complete sample page to reproduce the issue.

Reported by barancev on 2014-01-02 09:08:20

@lukeis
Copy link
Member Author

lukeis commented Mar 3, 2016

See the below sample page. try to click on any map/area


Reported by toshanker on 2014-01-08 23:41:27


- _Attachment: [sample.html](https://storage.googleapis.com/google-code-attachments/selenium/issue-2354/comment-29/sample.html)_

@lukeis
Copy link
Member Author

lukeis commented Mar 3, 2016

Please provide also the image to be mapped

Reported by barancev on 2014-01-09 06:54:12

@lukeis
Copy link
Member Author

lukeis commented Mar 3, 2016

got the same bug

<div class="follow-daodao home-image box-shardow">
<div class="title home-font">到到无处不在</div>
<ul class="content">
<li class="first">
<li class="second">
<li class="last">
</ul>
<img usemap="#appmap" src="http://cc-baitu.ddcdn.com/img2/x.gif"/>
<map id="appmap" name="appmap">
<area href="/MobileApps/" target="_blank" coords="1,40,361,200" shape="rect"/>
<area href="http://e.weibo.com/daodaofans?ref=http%3A%2F%2Fwww.weibcom%2Fu%2F3191877571%3Fwvr%3D5%26"
target="_blank" coords="691,40,991,200" shape="rect"/>
</map>
</div>


Reported by hewenjun1987 on 2014-01-13 08:44:48

@lukeis
Copy link
Member Author

lukeis commented Mar 3, 2016

2.41 java still has this problem

Reported by julyguo7 on 2014-04-17 06:31:35

@lukeis
Copy link
Member Author

lukeis commented Mar 3, 2016

Using Selenium 2.41, I was successful in clicking map area. Below, I have tried to close
lightbox image by clicking "X" which has action associated with it and has placed on
image using co-ordinates. 

code:
if(ExpectedConditions.presenceOfElementLocated(By.id("monetate_lightbox_content"))!=null){
   driver.findElement(
   By.xpath(".//div[contains(@id, 'monetate_lightbox_content')]/descendant::area[contains(@href,'#close')]")).click();
    }

HTML:
<img alt="" src="http://b.monetate.net/img/1/85/215504.png" usemap="#monetate_lightbox_contentMap"
style="border: none; outline: none;">
<map id="monetate_lightbox_contentMap" name="monetate_lightbox_contentMap"><area shape="rect"
coords="358,14,388,40" href="#close" target="_self" style="outline: none; cursor: pointer;">

Reported by ravendrat on 2014-09-07 22:56:29

@lukeis
Copy link
Member Author

lukeis commented Mar 3, 2016

Using Selenium 2.42, firefox 35.0.1, click on Image does not seem to work. It works
on chrome perfectly.

HTML:
<span class="btn btn-file">
<img src="../images/FolderBlack.png"/>
<input id="UP_FILE" class="btnGeneral" type="file" name="File1" accept=".xls,.xml,.txt,.trn,.qif"
multiple=""/>

Reported by chan1385 on 2015-02-17 23:55:08

@lukeis
Copy link
Member Author

lukeis commented Mar 3, 2016

Reported by luke.semerau on 2015-09-17 17:44:25

  • Labels added: Restrict-AddIssueComment-Commit

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

1 participant