javascript - PhantomJS/SlimerJS 无法点击 Canvas 元素

Question

我正在尝试使用 PhantomJS 或 SlimerJS 自动化网站上的 Canvas 元素。我很难让 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);
}