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

How to Use the JavaScript Console for Technical Web Testing

DZone's Guide to

How to Use the JavaScript Console for Technical Web Testing

Alan Richardson shows how to use the JavaScript console and explains why it is increasingly important to learn how.

· Web Dev Zone ·
Free Resource

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

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 for viewing JavaScript errors. But I read the documentation for the JavaScript console and realized that I could issue commands and view objects. I slowly came to realize 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 ‘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 thousands 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 thousands of instantiations of a specific single template. Very useful when testing something that is randomly generated.

You can try for yourself on the sloganizer, its pretty simple code, see if you can figure out how to generate 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 for only $10 you can learn about dev tools, proxies, REST testing, mobile web testing and more.

What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.

Topics:
javascript ,console ,testing ,web dev

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}