自动点击 canvas 个对象

Question

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

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

我试图将这两个示例结合起来制作一个可自动点击的 canvas 对象。但由于某种原因，我无法让它发挥作用。我在第二个示例中添加了以下代码，并希望自动单击坐标 (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);

我在这里错过了什么？ "clicking on canvas" 和 "clicking on canvas object" 是不同的概念吗？请帮忙。

非常感谢您。

Answer 1

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

$( 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 );

});

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

Answer 2

您是否尝试过在 canvas 对象上使用点击坐标。我遇到过类似的情况，我必须单击 canvas 中的一个元素，下面的代码可以解决问题。

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

Answer 3

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

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 () {
}
}

这样我就可以访问 canvas 中的对象，而不会过多干扰 canvas。

自动点击 canvas 个对象

Automatically click canvas object

jquery

selenium

automated-tests

html5-canvas