TLDR; learn how to use the dev console and basic JavaScript commands (for, do…while, if…then, variables) to automate under the GUI and augment your interactive technical web testing.
I used to only use the JavaScript console in the Chrome Dev tools was for viewing JavaScript errors.
But I read the documentation for the JavaScript console
And realised that I could issue commands and view objects. And I slowly came to realise that I could use this to help me test better.
Playing with JavaScript games to learn
And then I started playing with JavaScript games… I mean do ‘playing with’ not ‘playing’. Essentially ‘hacking’ the games to get infinite lives. I started doing that by understanding the code, intercepting the source code in proxies and changing it.
I’ve already blogged about ‘hacking games’
All of this I did because I learned enough JavaScript to be dangerous, and how to write it at the console.
But Testers ‘work’ with applications
As a tester, I want to interact with applications, so I really want to learn how to test applications under the GUI and explore more conditions.
So instead of having to click the ‘I want a slogan’ button in my “Evil Tester Sloganizer”, every time. I could instead generate 1000’s of slogans from the console and review them there.
e.g.
for(var x=0;x<100;x++){console.log("-" + random_sentence());}
Or I could tweak the code slightly to generate 1000’s of instantiations of a specific single template. Very useful when testing something that randomly generates.
- You can try for yourself on the sloganizer, its pretty simple code, see if you can figure out how to generate a 1000 instantiations of one specific sentence.
If I was testing the todomvc application then I would want to create a lot of data very easily, rather than having to create a whole bunch of Todo Items in this application manually, and slowly, I could write a small amount of code and create 100 in less than a second. Or 1000 in less than a second. Or really push the app and see how many it can cope with.
But I should also be able to manipulate them - say toggle half of them. And I should be able to delete them as well.
- Try it for yourself:
- see if you can generate todos automatically
- delete the todos
- amend them
- toggle them to be completed
If you can do the above then you have implemented the CRUD (Create, Read, Update, Delete) functions needed to augment your interactive exploration and testing of the application, and you will now be able to test a whole bunch of new combinations and conditions that would have been harder to test.
From the Console
And all of this we can do from the JavaScript console.
With a few basic JavaScript commands:
We also need to learn how to find the seams in a JavaScript application by reading the source and using the ‘find’ functionality.
Learn how to use the console
The console was a tool I hardly ever used in my testing. I primarily worked with web applications at the GUI, or the HTTP level.
Using the console we can work under the GUI, without having to leave the browser and test at a new level with our application.
This will become even more important as we have to work with more single page applications, and applications using MVC JavaScript frameworks and code which uses a shadow dom.
If you’ve already learned HTML, and CSS, and you know how to use proxies, then you can push your Technical Web Testing down to the JavaScript level and learn how to take advantage of the console in your testing.
How to Test a JavaScript app from the Chrome developer tools console on Vimeo.
You can watch this video on YouTube if you prefer.
Note:
The “Testing JavaScript from the Browser Dev Tools Console” section of my “Technical Web Testing 101” course teaches you how to do this. This section has over an hour of video explaining how to test JavaScript applications from the browser console. Check out the course and you can learn about dev tools, proxies, REST testing, mobile web testing and more.
