Selenium IDE isn't working with canvas - selenium

Question

I'm using canvas (phaser.io game framework) to make games and would like to do selenium tests. Sadly I can't replay recorded actions on a canvas.
For example I can't replay the click on the button here https://phaser.io/examples/v2/input/button-open-popup
I get this in the log:
1.Trying to execute open on /examples/v2/input/button-open-popup... Success
2.Trying to execute selectFrame on index=0... Success
3.Trying to execute clickAt on css=canvas with value 422,502... Success
But nothing happens on the screen and the popup is not poping up.
Is there a problem with clicking on canvas through Selenium IDE or maybe I'm doing something wrong?

Answer 1

I did some automated tests for Phaser games.
Let's take an example, I have to click on a menu button.
The way I managed to click on the button precisely every time is that I created a html page, with the same width and height as my canvas ( first, I decided the size of the chrome window, for me I used 800x900, and then get the canvas size), and in my html page I only put javascript to output me the positions where I click.
So basically I created a html, with the same dimension as my canvas, and clicked on it at the approximate position of my canvas button.
Here is the code I've used for my tests:
var mainState ={
preload: function(){
},
create: function(){
game.stage.backgroundColor = '#71c5cf';
game.scale.pageAlignHorizontally = true;
game.scale.pageAlignVertically = true;
},
update: function(){
getcoordinates();
}
};
function getcoordinates(){
if (game.input.mousePointer.isDown){
var x = game.input.activePointer.position.x;
var y = game.input.activePointer.position.y;
console.log("x" + x, "y" + y);
var worldx = game.world.centerX;
var worldy = game.world.centerY;
console.log("world x" + worldx, "world y"+ worldy);
}
};
var game = new Phaser.Game(384,683, Phaser.CANVAS);
game.state.add('mainState', mainState);
game.state.start('mainState');
As for checking if my action was succesfull, I used JavascriptExecutor. And in Selenium I've created some functions that do just that, navigate to coordinates and execute click.