2017-06-06 98 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一樣,並選擇它,但是當我在夜間運行它時,它不會單擊鏈接。 –