Blogs

Thunder Client – An exemplary extension for Visual Studio Code that substitutes Postman

Purpose of the article: To share the latest useful update in Visual Studio Code to reduce the time and effort while validating the API endpoints using separate application like Postman.

Intended Audience: Friends and Colleagues

Tools and Technology: Visual Studio Code

Keywords: : Visual Studio Code Extensions, Thunder Client, Alternate to Postman, Scriptless Testing

Hello there!

“Being a software developer who uses Visual Studio Code as a developer-friendly IDE, I feel exhilarated to share about this great extension.

For back-end and front-end developers who use VSCode as their IDE and for front-end developers who want to validate the given APIs endpoints — Undoubtedly, Thunder Client is a treat!

What is Thunder Client?

A lightweight Rest API Client Extension for Visual Studio Code, hand-crafted by Ranga Vadhineni with a simple and feasible design. This allows developers to test HTTP requests and directly view the response message with a simple GUI interface in VSCode.

Its remarkable features answer the question — Why to use?

“Technology is best when it makes our efforts easier.”

Easy Installation through VSCode

The Thunder Client extension can be used withVS Code version (1.57) and aboveGo to VSCode extensions or type cmd + shift + x (on a Mac) or ctrl + shift + x (on a PC). Now search and install the extension “Thunder Client” (Ref. Image 1).

How to Use?

Create New Request: After installing the extension, click on the new panel extension (Image 2 — in yellow color). Now hit “New Request” (Image 2 — in red color), which opens up the New Request tab having Query, Headers, Auth, Body, Tests, Response, Headers, etc.

Add endpoint and send request: Adding the endpoint URL and selecting the type of request (GET in this case) as in Image 2 (in green color), hit the “SEND” button. This gives the response for the request sent (Image 2 — in blue color).

Other Requests: Similarly, we can validate all the HTTP requests “GET, POST, PATCH, PUT, DELETE, OPTIONS, HEAD” by selecting the type of request, adding query params and headers as necessary, giving authentication as required, sending request body as needed based on the type of request.

Collections: We can create/import collections and postman collections from the options shown in Image 3 in the Collections tab.

Environment Tab: All the necessary variable names and their values can be added or updated using this tab (Ref. Image 4). Update/Set Environment Variables from the API response in the Tests tab is possible now; please see the GitHub page for details.

Query Parameters: No need to worry about adding “&” while adding query params. We need to add the params and values (Ref. Image 5); adding the params to the endpoint happens automatically.

Individual Sections: Separate sections are provided for adding necessary HTTP headers as keys and values, auth, Bearer token, etc.

OAuth Authentication: It also has independent sections to add Basic Auth, Bearer Token, and OAuth2.0. We can generate the OAuth token by giving the required details (Ref. Image 6), and created token will be automatically added to the Authorization header as a bearer token.

Request Body Type: In the body section, data can be sent using JSON, XML, text, form, form-encoded, etc.

Conditions for testing: We can add our custom conditions for testing if the response code to be equal to 200, or you want the response body to contain any fixed value.

Scriptless Testing: Refer to Scriptless Testing to know more about it.

Links:

 

Conclusion:

I experienced ease while using the Thunder Client extension. Hope you echo the same. If you enjoyed this article, share it with your friends and colleagues! Also, please share in the comments if you have any such updates.

Hit a clap if you find it engaging and valuable. Happy reading!!!

Leave A Comment

Related Post

Making the Web Accessible

Purpose of the Article: How to create a custom Vue component and publish it as an npm package Intended Audience: Frontend Developers(Vuejs) Tools and Technology:

Read More »