Selenium IDE isn't working with canvas

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?

I won't have a satisfying answer for you, but I have some experience with Selenium and web game frameworks. The reason click might not be working is because your element is expecting some sort of listener that cannot be triggered through selenium. Now I have never worked with something that is purely a canvas, so I can't help you further than that. My workaround usually was finding out what the specific listener on this element is and to trigger it manually through javascript. But I don't know how to find elements inside a canvas. — Charles Nough

lewilddude lewilddude · Accepted Answer · 2018-06-05T09:30:57

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.

Selenium IDE isn't working with canvas

1 Answers