Question

如何使用NightwatchJs自动点击图像的特定部分？我天真的方法是选择与我想要触发的图像的特定区域匹配的coords属性;但它不起作用。

<img src="..." usemap="#example">
<map name="example" id="example">
    <area shape="rect" coords="336,10,401,32" href="...">
    <area shape="rect" coords="25,171,97,198" href="...">
    ...
</map>

任何人遇到此问题或知道某项工作？谢谢！

Answer 1

如果我是你，我会使用area或{{1}等CSS选择器在map元素中使用:first-child元素的位置 }。这是一个最小的工作示例：

PNG （ map.png ）

Image map

HTML / JS （ index.html ）

:first-of-type

Nightwatch （ script.js ）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Nightwatch</title>
</head>
<body>
  <img src="map.png" usemap="#map">
  <map name="map">
    <area shape="circle" coords="51,51,29">
  </map>
  <script>
    // When the red area is clicked, we should display an alert.
    var area = document.querySelector('area');
    area.addEventListener('click', function () {
      alert('OK');
    }, false);
  </script>
</body>
</html>

<强>命令

如果您的环境设置正确，则可以使用module.exports = { 'Clickable image map': function (browser) { browser .url('http://localhost:8000/index.html') .waitForElementPresent('map', 1000) .click('map > area:first-child'); // ... }, };运行脚本。您将看到警报，这意味着Nightwatch已点击红色区域。

使用Node / Nightwatch自动点击图像映射的操作/链接

1 个答案: