Friday, 2 March 2018

A practice exploratory testing session - javascript button game

TLDR; Do you practice your testing? One way involves picking a random game and exploiting it.

I decided to record, with commentary, one of my testing practice sessions.

If this proves useful to people then I’ll record more.

Practise Session

On Sunday 25th Feb 2018 I sat down to practice my testing.

I wanted something simple. And the first thing that popped into my head was for a JavaScript game with an HTML button.

So I searched for such a thing.

And lo, I did find such a thing.

And such a thing was located at this URL.

And if thou dost click on the URL, thou shalt also experience its manifest magnificence.

I do like simple games like this. They have an economy of code. They work. They are fun to play. The code is easy to read and understand. And they have bugs.

We can then use them to improve our:

  • understanding of HTML
  • understanding of JavaScript
  • understanding and practice of testing
If you watch the video below then you can see how I tested the game and the defects I found.

My text notes are embedded below:

4buttons - up, down, left , right, restart
button - click,
button.unclicked, clicked, down, up
mouse.down, mouse.up
poss memory leak - infitite board?

A Challenge

I didn’t film the following, so my text description below can act as a challenge for you. But I like to use what I have learned about games and their vulnerabilities to create new ways of playing the game. Sometimes this involves changing the code a little by monkey patching in different function implementations, and sometimes - as is the case below - just using the game functionality that is present in slightly different ways.

Because we know how to manipulate the game from the console and the GUI itself, we can start to create our own games by changing the gameplay mechanisms we are presented with by default.

As such I offer you Can you reach the right hand side without dying?

  • in the console type moveright();
  • now that you have started moving to the right…
  • your challenge is to use the GUI buttons to navigate through the approaching green laser beams and reach safety by moving off the right hand side of the screen
Did you start moving to the right? No? OK, then you probably want to override the `clearmove` function. Type the following into your console:

clearmove = function(){};

How do you practice?

Do you have any games or apps that you have used recently to practice your testing?

If so… feel free to let me know.


  1. Very interesting video and example, thanks!

    Anecdotally, I did see JS heap size ramp up as the game went on using the Memory or Performance tabs in the same console you were using. Two other small tidbits: I don't have the "Consolas" font on my computer so that was coming through to me as a default font. Also, I would arguably raise the fact that game functions can be accessed this way is in itself a potential bug, especially when one can get around it by putting them closures, etc.

    I'll definitely use this in the future when introducing when introducing Exploratory Testing concepts to others.

    1. Thanks for the additional info. Glad to hear you followed up and looked into the memory for me.

      Pretty much any JS on the page can be accessed from the console, so it probably should not be viewed as a bug, but you can view it as a risk. There isn't much you can do about it in a modern browser. We can see how far you can exploit the risk. To some extent it can be mitigated by obfuscation of the JavaScript code, but then you create the risk of it being hard to debug in production, and possibly the obfuscation itself adds some risk.