使用 Node/Nightwatch 自动点击图像映射 actions/links

Question

如何使用 NightwatchJs 自动点击图像的特定部分？我天真的做法是 select 与我想要触发的图像的特定区域相匹配的坐标属性；但它不起作用。

<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

如果我是你，我会使用 CSS 选择器来处理 map 元素内 area 元素的 position，例如 :first-child 或 :first-of-type。这是一个最小的工作示例：

PNG (map.png)

HTML/JS (index.html)

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

守夜人 (script.js)

module.exports = {
  'Clickable image map': function (browser) {
    browser
      .url('http://localhost:8000/index.html')
      .waitForElementPresent('map', 1000)
      .click('map > area:first-child');
      // ...
  },
};

命令

如果您的环境设置正确，您可以运行使用 nightwatch -t tests/script.js 脚本。您将看到警报，这意味着红色区域已被 Nightwatch 单击。

使用 Node/Nightwatch 自动点击图像映射 actions/links

Automating click to image-mapped actions/links using Node/Nightwatch

automated-tests

node.js

nightwatch.js