Question

我想自动点击HTML5画布对象，以便我可以运行基于Selenium的自动化测试。我经历了许多关于自动触发点击事件的资源，如下例所示： Trigger Click

以及关于在canvas中制作可点击对象的示例： Clicking Canvas Objects

我尝试将这两个示例结合起来制作一个可自动点击的画布对象。但由于某种原因，我无法使其发挥作用。我在第二个示例中添加了以下代码，并期望在坐标（305,340）中自动单击该对象。

var e = jQuery.Event( "click", { pageX: 305, pageY: 340 } );
$('#myCanvas').trigger(e);

var e = jQuery.Event( "click", { pageX: 305, pageY: 340 } ); $('#myCanvas').trigger(e);

我在这里缺少什么？是“点击画布”和“点击画布对象”不同的概念？请帮忙。

非常感谢您提前。

Answer 1

我终于解决了这个问题。我将所有显示对象的当前实例存储在一个数组中。

var node = new Array();
for((var i in currentProject.rectangle)){
node.push(toArray(currentProject.rectangle[i]));
}

所有这些对象都被分配了一个id，所以我可以通过他们的id访问这些对象及其当前位置。后来当我不得不点击特定对象时，我搜索了该数组中的对象并得到了它的x和y位置，并简单地覆盖了pageX和pageY值。

clickedX = currentProject.rectangle[ID].x;
clickedY = currentProject.rectangle[ID].y;
clickData = {x: clickedX, y: clickedY};

SimulatedClickEvent(clickData);

function SimulatedClickEvent(data) {
this.pageX = data.x;
this.pageY = data.y;
this.preventDefault = function () {
}
}

这样我就可以在画布中访问对象，而不会干扰画布。

Answer 2

这里是您上面的示例代码的修改

$( document ).ready(function() {

    // canvas
    var x = 20;
    var y = 20
    var canvas = document.getElementById( 'canvas' );
    var ctx = canvas.getContext('2d');
    ctx.fillRect( x, y, 25, 25);

    // canvas click
    $( "canvas" ).on({
        click: function(e){
            alert( e.pageX +", "+ e.pageY );
        }
    });

    // jquery event
    var l = $( "canvas" ).offset().left;
    var t = $( "canvas" ).offset().top;
    var eve = jQuery.Event( "click", { pageX: x+l, pageY: y+t } );
    $( "canvas" ).trigger( eve );

});

这是一个工作示例＆gt;＆gt; http://jsfiddle.net/goutgffw/1

Answer 3

您是否尝试过使用画布对象上的点击坐标。我遇到了类似的情况，我必须单击画布中的元素，以下代码才能解决问题。

Actions clickAt = new Actions(driver);
clickAt.moveToElement(canvasElement, xCoordinates, yCoordinates).click();
clickAt.build().perform();

自动单击画布对象

3 个答案: