使用 Selenium 3 Webdriver 单击图像映射中的特定项目答案

【问题标题】：Click Specific Item In Image Map Using Selenium 3 Webdriver使用 Selenium 3 Webdriver 单击图像映射中的特定项目
【发布时间】：2017-12-02 09:07:49
【问题描述】：

我正在使用 Selenium 3.3.1 和 Java Webdriver 绑定，并且需要单击页面上图像映射中的特定项目。这是图像映射的 HTML

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

这是我试图让它点击 ID 为“报告”的区域的东西。

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

ID、cssSelector、xpath我也试过了

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

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

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

还有其他 xpath 变体，例如 //area[@id='reports']。

我主要使用 Firefox 和 Geckodriver 0.15.0，但它也发生在其他浏览器中。这个back in 2011 有一个错误打开，但它被确定为仅限 chrome，现在该线程太旧了，它基本上没用。如果最近有人这样做，如果他们能分享他们是如何做到的，那将非常有帮助。谢谢！

【问题讨论】：

一个可能的选项 - 使用按坐标点击。使用Actions 类，移动到某个坐标/元素并单击
这也不起作用，我认为这是因为鼠标移动到图像映射中的某个位置，但实际上并没有移到我需要单击的链接上。它更容易在屏幕截图中显示，但是如果您使用浏览器 html 检查器查看代码，并将鼠标悬停在任何标记上，则整个图像地图都会突出显示，它无法区分不同区域之间的区别在地图中。
尝试使用 javascript 执行器
javascript executor 似乎已经完成了，谢谢。

标签： java selenium webdriver imagemap geckodriver

【解决方案1】：

回答我自己的问题，因为答案来自 cmets 中的建议。使用 javascript 执行器就是答案。比如：

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

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

【讨论】：