How To Use RapidAPI Client for VS Code and RapidAPI Studio to Test APIs?

There is a bidirectional sync between RapidAPI Studio and the Client. This sync has several use cases, among which one is writing tests quickly between these products.

In this piece, we will briefly look at RapidAPI Studio and the Client. Afterward, we will learn how to use bidirectional sync between these two products to write extensive tests for our APIs. So without any further ado, let’s jump in!

RapidAPI Studio

RapidAPI Studio houses different RapidAPI products into a single platform to provide an integrated user experience to build, consume, and govern APIs. It has the power of RapidAPI Provider to help you publish your APIs on RapidAPI Hub. It utilizes the strengths of Paw to create different branches, sessions, and environments to quickly debug your APIs.

If you want to learn more about RapidAPI Studio, I suggest you look at this guide.

RapidAPI Studio

RapidAPI Client

With this extension, RapidAPI has brought API testing right where you feel at home. The extension has a slick design and covers all the basics of API testing.

You can find a detailed piece on RapidAPI Client here where we have deeply discussed it.

RapidAPI Client – VS Code Extension

Build An API To Test

We have previously written a piece on how to build an API and deploy it on Heroku. You can find it here.

I have already developed a Number API for this piece and deployed it on Heroku. The API has two endpoints, i.e., number and even.

When the user sends a GET request to the number endpoint, they will receive an array of numbers. Whereas the even endpoint returns true or false when you make a POST request to it, representing whether the provided number is even or not.

You can find the source code of the API here. Feel free to tweak it a bit and publish it as your own.

Testing API Locally Inside VS Code

Let’s look at how we can test our API locally inside VS Code. We will use RapidAPI Client for it.

→ STEP #1

You can skip this step if you already have installed RapidAPI Client. If you haven’t, please go to VS Code extension marketplace and search for “RapidAPI Client”. Select the extension and click on the install button.

Once RapidAPI Client is installed, you will see a logo on your VS Code sidebar.

RapidAPI Client Installed

→ STEP #2

Now it’s time to sign into OctaPaw from RapidAPI Client to enable bidirectional sync between RapidAPI Studio and RapidAPI Client for VS Code.

You can do this by clicking on the top right icon on the RapidAPI Client extension.

Sign in icon on RapidAPI Client

When you click on the icon, it will open a popup box where you will have to allow the RapidAPI Client to sign in using OctaPaw.

A new tab will open in your default browser after you allow the extension. It will ask you to sign in to OctaPaw. Once you are done, you will see the following message at the bottom right corner of your VS Code:

You’re signed in and can start syncing to RapidAPI.

→ STEP #3

Now that we have enabled bidirectional sync let’s create a new project. Click on the icon next to the sign-in icon on the RapidAPI Client. It will open a menu where you will see an option to create a new project on RapidAPI. Please go ahead and select it.

Create New Project on RapidAPI

Now the RapidAPI Client will ask you where you want to create the project: local or RapidAPI (Personal). Since we want the project to be present on RapidAPI Studio as well, let’s go with the second one.

Location of the new project

Give your project a name and press enter. I have named it Number API.

Name your project on RapidAPI Client

Lastly, it will ask whether you want to sync your local project to the new Number API project on RapidAPI. Since we want this to happen, select yes.

Synced new project with RapidAPI

→ STEP #4

Let’s start testing our API. The API I have created for this piece has the following base URL:

Copy
https://number-api-app.herokuapp.com/

We can create a new request inside the RapidAPI Client by clicking on the plus icon in front of Requests. It will create a new tab where we can request our API. For now, let’s test the base URL to check what the API will provide us.

Testing base URL of Number API using RapidAPI Client

We did not get a 400 or 404 code. Instead, we received the 200 status code. It means the API is working as expected.

→ STEP #5

Now let’s create another API test where we will make a GET request to the /number endpoint. We can do this by clicking on the plus (+) icon again to create a new request tab, adding the API endpoint, and then clicking the Send button.

Testing /number endpoint using RapidAPI Client

As you can see, we have successfully received an array of numbers with a 200 status code.

→ STEP #6

Last but not least, let’s test our /even endpoint. This endpoint will receive a query parameter, i.e., number, and provide us with a response of whether the number was even or not. We will make a POST request to it.

Testing /even endpoint using RapidAPI Client

I provided 343 to the query parameter. Since it is an odd number, we received a false response.

Using RapidAPI Studio To Schedule API Tests

Let’s now look at how we can use RapidAPI Studio to write extensive tests for our API.

→ STEP #1

Head over to RapidAPI Studio and sign in if you haven’t already. Inside the RapidAPI Studio dashboard, you will find the Number API project we created earlier.

Please go ahead and open the Number API project and click on the Requests on the left sidebar. Here, you will find all the API requests we created inside the RapidAPI Client. This is due to the bidirectional sync we enabled inside RapidAPI Client.

API test requests present inside RapidAPI Studio

→ STEP #2

Now click on Tests on the left sidebar so we can create and schedule tests for our API. It will open a view on the screen. Now click on the Create Test button and give the test a name. I will call it Test /number endpoint.

Create new test inside RapidAPI Studio

Click on the Request Generator at the bottom. It will open a new preview. Here please go ahead and click on the Requests in front of Source. This will show you all the API tests you created inside the RapidAPI Client.

API Tests displayed inside RapidAPI Studio

Select the number endpoint API test, click on the Send button, and click on the Add to test button when the response comes back.

Add to test button

It will open a dialog box asking you to press the Ok button. Once you are done, the API test will be added successfully.

Added API test for /number endpoint inside RapidAPI Studio

Now click on the Save & Run button.

→ STEP #3

Repeat the process again, but we will create API tests /even endpoint this time. Create a new test. Let’s call it Test /even endpoint.

Create new test inside RapidAPI Studio

Again click on the request generator at the bottom and select the even endpoint API test. Click on the Send button and then Add to test and press Ok.

Added API test for /even endpoint inside RapidAPI Studio

It will create the test. Now go ahead and click on the Save & Run button.

→ STEP #4

The last step is to schedule these API tests. For this, open an API test inside RapidAPI Studio and click on the Schedule from the left sidebar.

Now click on Add Schedule button. It will ask you for the schedule frequency, environment, and location. I have set the frequency to six hours, the environment to default, and selected Paris for the test location.

Scheduled API Test inside RapidAPI Studio

Repeat the process for both the tests we just created, and it will do the trick.

Wrap Up

That’s all for this piece, folks! I suggest looking at the following pieces to learn more about RapidAPI Studio and RapidAPI Client.

• A Deep Dive Into RapidAPI Client for VS Code
• Everything You Need To Know About RapidAPI Studio