Lately, we’ve been doing a lot of test automation using HTML5 web sites. As HTML5 games become more and more popular, automating tests for Canvas, the key feature of HTML5 that is used to develop web games in most cases, has become a hot topic in software testing field. Generally, it is very difficult but possible. The difficulty lies in problems recognizing the Canvas with some automation tools or to monitor or simulate what happens in the Canvas since the game logic is implemented by JavaScript and cannot be captured from the UI.

But one possible way to implement test automation using HTML5 is to use Selenium, writing JS scripts to hook the program in a white-box way. I know other automation tools have their own ways to support this, like TestComplete can call javascript, but like to work with HTML code directly, which is a key feature of Selenium. To test a Canvas game with Selenium, take the following steps:

  1. Analyze the game and get clear on the logic of the game.
  2. Find out what source or javascript code is used in this logic, since most Canvas applications are using js implementations.
  3. Find an indirect way that can test the application, instead of recording/replaying.
  4. Write scripts to get game data and test logic to implement it. For example, to test Snake, you need to get data regarding where the snake and eggs are at run-time and then use a script to direct the snake to the eggs.

We also use selenium in many projects for test automation using HTML5, not just games. Because selenium scripts are very flexible, if you are creative you can make them do almost anything.