Using Hoppscotch to test REST APIs
Tags: webdev, testing, hoppscotch
Published: 2022-07-05 22:32:44

Recently I've been involved in backend development writing an REST API to expose some data to other apps from our client's ecosystem.

After messing with [curl](https://curl.se/), I felt the need to have some friendlier way to test the API, besides writing some shell scripts or Python code, so non-technical people could also test with ease. [Hoppscotch](https://hoppscotch.io) came to the rescue.

## Hoppscotch

Hoppscotch is a free open source API development suite which runs in your browser. A commercial equivalent is Postman. Hoppscotch provides a workspace environment, where you can organize your work in request collections and environment variables.

This post shows the basic usage of Hoppscotch services for testing requests to an API. For more details on how to setup testing and scripts, refer to the official documentation at [https://docs.hoppscotch.io/](https://docs.hoppscotch.io/).

## Sample code for the server

For this article, I'm using the following GitHub repository for the server code (Go with Gin). It provides an API to retrieve and create drivers for an ~~not nearly secure or even close to~~ hitchhiking-like app (you know which one).

{% embed https://github.com/killerasus/GoRest %}

The server (as of the time of writing this post) provides the following API:

| Method | Endpoint | Action |
| :----: | :----: | :---- |
| `GET` | `/driver` | Recover drivers list |
| `GET` | `/driver/:id` | Recover driver information |
| `POST` | `/driver` | Create a driver |

We'll start by creating a collection to hold our requests.

## Creating a collection

Collections are a way to organize your work. So, for your workspace, you could create a collection for all driver-related requests, other collection for hitchhiker requests, and another for the rides requests.

Let's start by clicking on the Collections icon and then clicking on `+ New`.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kcdmcuzcjiyayu83xjoz.PNG)

Give your collection a name (if following the example API, I would recommend GoRestDrivers).
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pw5tcqmi0rh56qnwehaw.PNG)

Next, we'll create our first request. On the three dots icon on the right hand side of your collection, you can see other operations, such as exporting and renaming your collection.

## Creating a request

After creating a collection, we can use the New button to create a new request. Let's do that.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jvcudxsj0c07pjhw9dy8.PNG)

Let's name our request Create Driver. The main area is now representing this request. Let's customize the request. According to the documentation, to create a driver we must send a request usiung the method POST to the `/driver` endpoint. The body of our request is a json object.

There's a combo for choosing the method. On the left, click on `GET` and change it to `POST`. The URL should be `http://localhost:8080/driver`, as I am running my server on the localhost using port 8080.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/npvku3lnlz4vldkqmd98.PNG)
 
To set the body of our request, click the Body tab. Set content-type to `application/json`, and on the raw request body, we can insert the data to create our driver.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r2nwwh1h9p3r6rgkgkr2.PNG)

## Running the request and troubleshooting

To test our request, we must first run the server. Then, we'll need to click on the button `Send`.

If this is your first time running, you may receive an error that  the API endpoint couldn't be reached. This could mean the server isn't running, you need a proxy or you haven't installed the Hoppscotch browser extension. A message similar (because I already have installed the browser extension, but haven't started the server yet) to the following should appear.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qctb8zz2yptosoginghi.PNG)
 
After installing the browser extension and making sure the server is running on the correct port, click `Send` again. You should see the result.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ye5ge0sgs7kmk73letxc.PNG)
 
Try modifying the body json to create new drivers. A following exercise should be creating the other request, like the `GET` request to get the list of drivers to verify everything is working as it should.

## Creating environment variables

Until now, our requests used a hardcoded port (8080) to access our server. But if we are to modify the port, we would have to change every request created.

We can use environment variables to avoid this issue. Let's change our `GET /driver` request to use a variable named port instead of a hardcoded port. The URL will be written as follow:

![http://localhost:<<port>>/driver](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lsjtlvay1muvyebpalfy.PNG)

Variables are referenced by `<<variable>>` and can be used everywhere. For example, you can define a `token` variable and use it as the authorization token value. When a variable isn't defined yet, it will have a red shading. After defining the variable, it will assume a blue shading.

Click the Environment icon, and the Global environment.

![Environment creation/edition](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mbbd367945eb79k20yym.PNG) 

A popup will open to Edit Environment. Click the + icon to create a new variable, name it port and assign the port value.

![Variable definition in an environment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fhy8xu2tb3oh278hkplc.PNG)

The port variable shading in the request will be changed, signifying it is defined.

![Variable port correctly defined in the request](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qpf6jdyvnyfxkaorslq8.PNG)
 
Anytime you need to change the value of the port, you just need to change the variable value in the Environment.

## Conclusion

This was a quick introduction to Hoppscotch. I hope this has driven your curiosity to experiment with Hoppscotch. It has made testing our APIs easier.

For more information, check the current documentation on [https://docs.hoppscotch.io/](https://docs.hoppscotch.io/).