Click Specific Item In Image Map Using Selenium 3 Webdriver

Question

I am using Selenium 3.3.1 and the Java Webdriver bindings, and need to click a specific item in an image map on a page. Here is the HTML for the image map

<img id="menu1" name="menu1" src="../../images/images/menu23t.gif" width="950" height="68" border="0" usemap="#Map">

<map name="Map">
    <area id="manager_indx" shape="rect" coords="220,13,297,60" href="../../backend/manager/index.php" target="_parent">
    <area id="pos" shape="rect" coords="306,13,336,60" href="http://10.10.10.99:8080/frontend/index.html" target="_parent">
    <area id="end_of_day" shape="rect" coords="347,13,410,60" href="../../backend/manager/end_of_day.php" target="_parent">
    <area id="customer" shape="rect" coords="415,10,470,60" href="../../backend/managecustomers/index.php" target="_parent">
    <area id="employee" shape="rect" coords="477,12,537,60" href="../../backend/employee_f/index.php" target="_parent">
    <area id="reports" shape="rect" coords="540,12,590,61" href="#" onclick="chk_report_security()">
    <area id="cash" shape="rect" coords="596,13,640,60" href="../../backend/manage_register/index.php" target="_parent">
    <area id="inventory" shape="rect" coords="650,12,705,60" href="../../backend/inventory/index.php" target="_parent">
    <area id="configuration" shape="rect" coords="720,11,802,60" href="../../backend/generalsetup/configuration.php" target="_parent">
    <area id="logon" shape="rect" coords="815,11,848,60" href="http://10.10.10.99:8080/frontend/index.html" target="_parent">
    <area id="exit" shape="rect" coords="852,11,890,61" href="javascript:javascript:exit_logout();">
    <area id="help" shape="rect" coords="892,14,937,60" href="javascript:top.banner.openContainer(window.parent.banner.isThrive);" target="_parent">
</map>

And here are the things I have tried to get it to click the area with the ID "reports".

WebElement banner = driver.findElement(By.cssSelector("map"));
WebElement area = banner.findElement(By.id("reports"));
area.click();//This click isn't working

I have also tried by ID, cssSelector, and xpath

driver.findElement(By.id("reports")).click();

driver.findElement(By.cssSelector("#reports")).click();

driver.findElement(By.xpath("//*[@id=\"reports\"]")).click();

And other xpath variants like //area[@id='reports'].

I'm primarily using Firefox and Geckodriver 0.15.0, but its happening in other browsers too. There was a bug opened for this back in 2011, but that was determined to be chrome only, and by now that thread so old its basically useless. If anyone has done this recently, it would help immensely if they could share how they did it. Thank you!

Answer 1

Answering my own question because the answer came from a suggestion in the comments. Using a javascript executor was the answer. Something like:

WebElement banner = driver.findElement(By.cssSelector("map"));
WebElement area = banner.findElement(By.id("reports"));

JavascriptExecutor executor = (JavascriptExecutor)driver;
executor.executeScript("arguments[0].click();", area);