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);
}