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

PhantomJS / SlimerJS无法单击canvas元素

1 个答案: