Code Snippets #1 – Console.Log()

posted in: Software Testing | 0

The console.log() function acts like the print command, whereby anything you include in it, will be printed to the console of the developers tools in chrome from within Postman.

To gain access to the chrome developers tools for Postman, you need to do the following: Enabling Chrome Developer Tools Inside Postman

In it’s simplest form console.log() can print text to the console log:

console.log("some text");

Note the syntax whereby all text should always be within speech marks and there should always be a semi-colon after the last bracket of the statement; this is to say you are done with this function. 

So, that is all great and we are getting feedback, but what if we want to highlight the text amongst a lot of other console logs on screen? 

Well, that is simple as the console.log() function supports css! 

console.log("some text", "color:green;");

Note, there is a comma between the text you want to display and the css. This will change the default colour of your console to be green for this log.
Another example of using css:

console.log("some text", "color:green; font-weight:bold;");

This will make the text in the console for this log turn green and the text will be bold

Now, what if you only wanted certain text a different colour? Well, this can also be achieved by using the prefix of %c at the beginning of where you want the colour to start.

console.log("some text %cwith the colour green and not black.", "color:green;");

The “some text” will remain black (default colour), whilst everything after %c will now be green.

But I only want the word green, to be green. How do I do that?

console.log("some text with the colour %cgreen %cand not red", "color:green;","color:red;")

So in this snippet, we have two prefixes which then pertain to the respective css separated by a comma. It can get very messy if you want to then include bold, italic etc, but it is doable. 

Well, that’s good. Now I can put some meaning to my tests via feedback which will help me debug, but what about adding values that have been returned by the response?

Well, that is also very easy. You simply add a plus sign followed by the path of the relevant value. 

console.log("This is the response code returned: " + responseCode.code);

 
In the above example, the responseCode.code will print the returned number value of the response and not the text. So for example 200 OK is the response; this will only print the 200 part. 

Here is the same console log, but this time with css

console.log("%cThis is the response code returned: " + responseCode.code, "color:green;");

 
You can add data from the returned response array as well. For example:

console.log("This is the value of A: " + array.A);

 

I hope you found this useful. Feel free to add comments and I will update this post with new ideas and usage for the console.log as and when they become apparent to me.
 

Back

 

 

Leave a Reply