PhantomJS/SlimerJS不能點擊畫布元素

Question

我想使用PhantomJS或SlimerJS自動化網站上的畫布元素。我很難獲取canvas元素來檢測我的點擊按鈕。從屏幕截圖中，我可以看出鼠標懸停在按鈕上，但拒絕點擊它們。

var page = require('webpage').create() 
page.viewportSize={width: 1280, height: 768}; 
var fs = require('fs'); 
page.open('http://www.soulofsoccer.com/app/',function(){ 
    setTimeout(function(){ //wait for canvas to load 
     page.render('soccer/step1.png','png'); 
     page.sendEvent("click",50,718); //menu button 

     //test to click a second time 
     setTimeout(function(){ 
      page.sendEvent("click",50,718); 
      page.render('soccer/test1.png','png'); 
     },1000); 

     //final screenshot 
     setTimeout(function(){ 
      page.render('soccer/test.png','png'); 
      //phantom.exit(); 
      //slimer.exit(); 
     },2000); 

    },10000); //wait for canvas to load 
}); 

有人可以告訴我我的錯誤在哪裏嗎？

PhantomJS版本：1.9.8
SlimerJS版本：0.9.5

Answer 1

我只設法使其工作在PhantomJS 2.0。

我看過了頁面。您必須先移動到您想要點擊的位置，然後點擊。鼠標移動和點擊直接設置位置有區別。看起來這個頁面非常特別，首先註冊一個鼠標移動，然後才啓用點擊操作。

page.render('test19_step1.png'); 
page.sendEvent("mousemove",50,718); //menu button 

setTimeout(function(){ 
    page.sendEvent("click",50,718); 
},1000); 

setTimeout(function(){ 
    page.render('test19_test.png'); 
    phantom.exit(); 
},2000); 

我建議你用一個抽象此：

function clickInCanvas(x, y, callback, delayBetween) { 
    delayBetween = delayBetween || 50; 
    page.sendEvent("mousemove", x, y); 

    setTimeout(function(){ 
     page.sendEvent("click", x, y); 
    }, delayBetween); 

    setTimeout(callback, delayBetween*2); 
}