Katarzyna Kmiotek

API testing with Thunder Client

When we talk about efficient API testing Postman is a go-to tool. We can all agree that it has many features that make our testing fast and easy: Collection runner, Environments and Variables, Test and Pre-Scripts section, build-in libraries ( Faker, Moment, UUID) and is great for team collaboration.
A few months ago new tool caught my eye - the announcement of the release Thunder Client VS Code Extension. Used it then for few HTTP requests to mock-server but now decided to learn what Thunder Client can offer and how comparable is to well know Postman.
Thunder Client has been created by Ranga Vadhineni and released at the end of March 2021 as an extension to VS Code. The Thunder Client is just 6 months old but already has over 330k downloads. Ranga keeps working on adding new features (current v1.9.0 release).

The tool has been designed with few goals in mind:
• being a lightweight solution for API testing. Installation of the tool takes just seconds; accessible from VS Code extensions marketplace. Opening and using Thunder doesn't involve launching any other tool just one click on the text editor sidebar.
• simple and easy to use. UI is very similar to Postman's making is intuitive to use for engineers with previous API testing experience.
• support for VS Code Thems . I have to admit Night Owl by Sarah Drasner just makes me happy. What's your favourite theme?
• collections and environment variables . It just makes sense to have requests organized.
• script-less testing . I know how to extract the body from the response so it's nice to don't repeat myself constantly.

New Request

Let's start by creating a new Collection in the Thunder Client tab. This is the place that lists recent activities, collections, and environments. All looks familiar, right? Right-click on the hamburger menu to create a New Collection prompting to assign name straight away, right-click on 3 dots beside collection name to add request. The couple of notes on request in Thunder Client:

• response body's view by default is full-screen size. In a Postman to view full response need to expand the response section hiding other sections.
• I usually do POST requests with JSON body type, that Thunder Client defaults to (no more raw > Json as in Postman).

Variables and Environment

The same as in Postman we can use the power of variables stored within a selected environment. To use a given environment in tests, it needs to be set to active (indicated by star display beside environment name) Importing and exporting environments is still in beta but supports already Postman 2.1.0 format and .env files.
To import environment from Postman - export or saved shared environment.json file, select hamburger menu beside Env in Thunder Client tab, click Import, and select a file.

The variable value can be defined in the environment tab or dynamically set by the response (see Tests section). Using a variable in tests is similar to Postman implementation with {{variableName}} format. Nonexisting variable or my typo will remain in white font colour when one that matched with value will change to green.

System Variables

The Postman has built-in libraries that help generates unique data but the Thunder Client doesn’t stay behind with set of system variables to make our life easier. To use system variables add # before the variable name. Data created this way:
• {{#guid}} - random UUID number
• {{#date, 'YYYY-MM-DD hh:mm:ss:fff'}} - formatted timestamp
• {{#string}} - random string
• {{#number}} or {{#number, min, max}} - random number within range
• {{#email}} - random email string

Tests

As mentioned earlier tests are script-less in Thunder Client. You can select a parameter from dropdown menu - let’s say ResponseTime , condition: < less than and value let's say 300 (ms), and that's it - the first test done!
There is a range of parameters to choose from, like ResponseCode , ResponseBody , Content-Type , Content-length .
Conditions include equal , notEqual , isJSON , isType , contains , regex , < , <= , > , >= .
Allowing us to verify if the response contains expected values, of expected data type or size.
Out of all parameters that can be used for tests SetEnv Variable and JSON Query got my attention. The first one allows to set value from API response to the environment or global variable . Simply provide a JSON path to the value select setTo from the condition and in value input between double curly brackets variable name. If the variable exists colour will change to green if not after executing this API call variable will be created and will be available in the environment or globally {{variable, global}} With the JSON Query parameter, you can verify that the expected value for the JSON path has been returned.

GraphQL

All GraphQL requests use the POST HTTP method and all are sent to the same endpoint. Simply within the Body section of the request change body type to Graphql and provide a valid query. In the example below, I am posting a request that returns the price and name of the given tea, making us of GraphQL variables section dynamically replace value to environment variable set in a previous call. It is just great!

Authentication

When I test API usually it's a secured endpoint requiring a set of credentials, or tokens that expire after 5 minutes. Thunder Client provides support to different authorization types None, Inherit, Basic Auth, Bearer, and OAuth 2.0

Collection runner

If you want there is a collection runner feature available allowing for efficient requests execution and their tests. Click the 3 dots symbol beside the collection name and select the Run All option. Click the Run button.

Useful links

This tool is keep growing so I will definitely keep follow its progress.
Documentation https://www.thunderclient.io/
GitHub feature request https://github.com/rangav/thunder-client-support
Medium article https://rangav.medium.com/thunder-client-alternative-to-postman-68ee0c9486d6
Twitter https://twitter.com/thunder_client

And as always feel free to use my GraphQl endpoint for API testing https://graphql-teas-endpoint.netlify.app/