In this article, you will learn how to start testing Rest API right from your VS Code Editor with the help of an extension Thunder Client.
Introduction
Thunder client is a lightweight Rest Client VS code extension for Testing APIs.
Fun Fact: It works just like Postman😍
Installation
Okay! Back to business. First, we are going to install the Thunder Client extension in our VS Code Editor. Head over to the Extension Tab Ctrl+Shift+X and search for Thunder Client.
Using Thunder Client
Next, click the Thunder Client icon in the VS code activity bar to start using the Thunder client extension for Testing APIs.
Sending HTTP Request
To send a HTTP request using Thunder Client, click the New Request button.
We would be using JSON Placeholder to send a test HTTP request to get all todos.
GET https://jsonplaceholder.typicode.com/todos
Paste the endpoint in Thunder Client, set the request type to GET and hit the send button then boom 💥 you should see the result in the Response tab in Thunder Client.
Saving Request to Collection
Just like how Postman works you can save all your endpoint request to a collection.
Click the 3 dots ... in the request panel in Thunder client and then click Save to Collection. You should be greeted with a new form that says Add To Collection. In the form, enter a name for the request then click the collection drop-down and select the collection you want to save the request to. If you haven't created a collection yet then click Create New. When you are done hit the Submit button and that's it.
View Website
View Website
View Website
Setting up Environments
Environments can be used for storing sensitive information like bearer token and any API secrets. But in this case we will be using it to store value for a query parameter.
Let's see how to set up one. Head over to Env tab, click the three horizontal line icon, then click New Environment. You will be prompted to enter an environment name then press the enter button when you are done.
To try out our environment we will be fetching all comments for a particular post using JSON Placeholder.
GET https://jsonplaceholder.typicode.com/comments?postId=1
Let's create a variable named postId and give it a value of 1, then click Save.
Great Job so far! Let's create a new request. In the request url field type https://jsonplaceholder.typicode.com/comments .
In the Query Parameter section, type postId as the parameter name and {{postId}} as the value. The double brace tells Thunder Client to pull the postId from the environments. Finally hit the Send button, you should see the result in the response tab. Cool right!😎
Creating Tests for a Request
We can also set up tests for any request sent from Thunder Client. Let me show you how. We want to check if our response body contains postId. Using the same request we used in the last section, on the request panel side, click the tests tab. In the first drop-down select ResponseBody, in the second drop-down select contains then in the last field type postId. Finally hit the Send button, head over to the response panel side and click the tests tab. You should see that the test result passed.👍
Conclusion
Now you can start testing your API endpoints right inside VS Code without having to switch between apps while developing your application.
External Links
Thunder Client website: https://www.thunderclient.io/
VS Code Extension: Download Extension
Comments (0)