CODEWITHSUNDEEP
jqueryseleniumhtml5-canvasautomated-tests
Jalesa
Jalesa

Reputation: 21

Automatically click canvas object

I want to automatically click a HTML5 canvas object so that I can run my Selenium based automated testing. I went through many resource about automatically triggering click event as in this example: Trigger Click

and this example about making clickable objects in canvas: Clicking Canvas Objects

I tried to combine these two examples to make a automatically clickable canvas object. But for some reason I am unable to make it work. I added following code in the second example and expected to automatically click the object in coordinate(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);

What am I missing here? Are "clicking on canvas" and "clicking on canvas object" different concepts? Please help.

Thank you very much in advance.

Upvotes: 1

Views: 4634

Answers (3)

Jalesa
Jalesa

Reputation: 21

I finally solved this issue. I stored the current instance of all the displayed object in a array. 

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

All of those objects were assigned an id so I could access those objects and their current position through their id. Later when I had to click to particular object I searched object in that array and get its x and y position and simply override the pageX and pageY values.

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

This way I was able to access the objects in canvas without much interfering with canvas.

Upvotes: 1

Nick Briz
Nick Briz

Reputation: 1977

here's a modification of the sample code you've got above

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

});

here's a working example >> http://jsfiddle.net/goutgffw/1

Upvotes: 1

debugger89
debugger89

Reputation: 2766

Have you tried using the click coordinates on the canvas object. I came across a similar situation where i have to click on a element within a canvas and the following code did the trick. 

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

Upvotes: 0

Related Questions