2017-06-06 99 views
0

如何使用NightwatchJs自动点击图像的特定部分?我天真的做法是选择与我想要触发的图像的特定区域相匹配的坐标系属性。但它不起作用。使用Node/Nightwatch自动点击图像映射动作/链接

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

任何人都遇到这个问题或知道工作?谢谢!

回答

0

如果我是你,我会与位置播放使用CSS选择像:first-child:first-of-typemap元素中area元素。这里是一个最小的工作示例:

PNGmap.png

Image map

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> 

Nightwatch周的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点击。

+0

谢谢,你的答案适用于铬。由于某种原因,它不适用于Firefox。你有什么建议吗?我在firefox上运行querySelector来选择它,就像我使用chrome一样,并选择它,但是当我在夜间运行它时,它不会单击链接。 –