Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

How to Practice Your JavaScript, Software Testing, and Test Automation Skills

DZone's Guide to

How to Practice Your JavaScript, Software Testing, and Test Automation Skills

If you're looking to improve any of these things, then check out this post for some great ideas on how to get going.

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

One way I practice my software testing, improve my JavaScript programming, and practice my automating is by 'hacking' JavaScript games.

One of my bots scored 282010 on https://phoboslab.org/xtype/. This 'bot' is JavaScript code that runs from the Browser Dev Tools and plays the game.

I have a video showing the bot in action below.

To create this I have to learn to use the dev tool to inspect the DOM and the running memory space and read the JavaScript. All of this is modelling the application. A recon step that helps me with my software testing.

As I recon the app, I look at the network tab to see what files are loaded and what API calls are issued. This also informs my model. And makes me think about injection and manipulation points.

Perhaps I can use a proxy to trap and amend those requests? Perhaps my proxy can respond with a different file or data automatically?

These are thought processes and skills that I can apply in my testing. I also learn more about HTTP, dev tools, and proxies.

When the game is running I have to observe its execution behavior. I build a model of the software and its functionality. This informs my software testing. I have to build models of the application as I test and make decisions about what to target.

To 'hack' the game, I have to inspect the objects which have been instantiated by the code. I can do this in the console by typing in the object names.

To learn what these objects are I have to read the game code. This improves my JavaScript because one of the best ways to learn to write code is to read code and try to understand what it does.

I can use the Snippets view in Chrome Sources to write JavaScript. This is a built-in mini JavaScript IDE in the browser.

I can write simple code here to manipulate the game objects in memory to help me cheat and hack the game. I don't need to learn a lot of JavaScript to do this, and most of the JavaScript you need is already in the game source itself.

To write a 'bot' — code that executes in its own thread periodically to do something — I use the setInterval command. This is the fundamental key to writing JavaScript bots. For example:

var infiniteLivesBot = setInterval(infiniteLives,1000); 

The above line calls a function named infiniteLives every second. That infiniteLives function checks if my number of lives have decreased, and if so, increase them.

function infiniteLives(){
    if(game.lives<3){
        game.lives=3;
    }
}

var infiniteLivesBot = setInterval(infiniteLives,1000);

I can easily stop this bot using the clearInterval command.

clearInterval(infiniteLivesBot); 

I can run that code from the snippets view, or paste it into the console, or convert it into a bookmarklet. Whatever is more convenient to help me when I want to hack the game. I do the same thing to support my testing, e.g. setup data, delete data, etc.

This is a form of 'tactical' automating. It won't scale, it doesn't go into continuous integration. It supports me. It does a specific task. It automates part of my work. It is a good start to learning to automate more strategically.

To automate type, I had to learn how to trigger mouse events to initiate the firing functionality. I couldn't remember how to do this. I copy and pasted a snippet of code from Stack Overflow: stackoverflow.com/questions/2381572/how-can-i-trigger-a-javascript-event-click

var event = document.createEvent("MouseEvents");
event.initEvent("mousedown", true, true);
document.getElementById("canvas").dispatchEvent(event, true);

Part of learning programming is knowing where to find a general answer and knowing which part of the answer to isolate. Then having the confidence to bring that into your code and experiment with it.

As I do this, I learn more JavaScript. Which allows me to write scripts in other tools, e.g. Postman. And I can inject code into applications, e.g. using WebDriver JavaScriptExecutor. The more I practice, the more options I open up.

I take the knowledge and then write small utilities or applications to help me. I write a lot of small JavaScript utilities to help me with data extraction activities and the reformatting of data from web applications.

I extended my knowledge by writing JavaScript applications and games which I bundled into:

If you want to experiment with simple games manipulation and hacking then the games in this app are designed for that purpose.

Doing this also has a knock-on effect on how I view web applications. The GUI is no longer a trusted client. The GUI can be manipulated by the user. The messages it sends to the server can be manipulated by the user. The server needs to be robust.

This helps my software testing, as I have to go deeper when I test. And by practicing, I develop the skills to go deeper when I test. I can recognize when requirements need to be tested more deeply than they state on the surface.

This helps my programming, as I am very aware that the server needs to validate and approach the input data with caution.

This is one way that I practice my software testing, JavaScript programming, and automating skills. The benefits to me have been enormous. I recommend this, or feel free to adapt the ideas and create your own practice path.

I cover many of the skills to do this in my online Technical Web Testing 101 course https://www.eviltester.com/page/onlinetraining/techwebtesting101/

Free Video Discussing This Topic


Want to See My XType Bot in Action?

This was a hard bot to write X-type in a bullet hell shooter whichise challenging to play, let alone automate — and no, I'm not going to show you the code for the bot.

But this is not my first bot.

I've written bots to play z-type, Cookie Clicker, and 3D Monster Maze

I like these games because they are all well written, I can read the code to improve my programming, and they are fun to play.

Many of my bots are not full playing bots like the X-type bot. They are support tools. And when I started to automate X-type, I started with support tools.

  • An infinite lives hack.
  • An auto-aimer so that I didn't have to keep track of the boss while I was controlling the player.
  • I added auto firing to the auto-aiming so I only had to concentrate on moving the player.
  • I combined all three and had a bot that could play the game, although it was cheating with infinite lives.
  • Only then did I approach the autonomous playing of the game.

For 3D Monster Maze I only wrote support tools:

  • A heads up display so that a map of the screen was rendered on screen as I played showing me the position of Rex to help me avoid him, and showing me where the exit was.
  • A trap for Rex, so that if he entered it he couldn't move.
  • A chain for Rex so that he never moved from his starting point.
  • Armor so that if Rex caught me, he couldn't kill me.

For many games, I try to think about how to add extra features to make the game more interesting. I don't have the skill or patience to write games like these, but I do have the skill and motivation to 'augment' them for my learning.

This is analogous to writing 'tools' to support our testing, or making applications more 'testable.'

Note: my games github.com/eviltester/TestingApp are not well written, but they are very easy to understand and hack.


Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.

Topics:
web dev ,devops ,github ,javascript testing ,web application testing

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}