Simplify API Testing and Collection Versioning Using httpYac

As a developer, working with APIs can be both empowering and challenging. Whether you're building, testing, or debugging APIs, having the right tools at your disposal can make all the difference. While tools like Postman and Insomnia have become go-to solutions for API testing, there’s a "new" player in town that’s gaining traction for its simplicity and powerful features: httpYac.

In this post, we’ll dive into how httpYac’s extension(VScode) can help you. From sending requests and testing endpoints to versioning your collections for better maintainability, httpYac offers a seamless experience for developers of all levels. Whether you're a seasoned API developer or just getting started, this guide will show you how to leverage httpYac to simplify your API testing process and keep your collections organized and version-controlled.

Ready to explore a fresh alternative to Postman and Insomnia? Let’s get started!

What is httpYac?

httpYac is a lightweight, open-source tool for API testing and development. It combines a user-friendly interface with a powerful CLI, making it easy to send HTTP requests, test endpoints, and manage API collections.

One of the most powerful features of httpYac is its ability to define API requests as code, stored in simple text files. These files, often written in formats like .http or .rest, allow you to describe HTTP requests in a human-readable yet executable way. This approach not only makes it easy to version your API requests alongside your codebase using Git but also ensures that your API tests and documentation evolve with your application. By keeping your requests in sync with your code, you can improve collaboration, maintain consistency across environments, and simplify debugging.

You might be familiar with the Rest Client extension, and yes, httpYac is quite similar in some ways. However, httpYac takes things to the next level with its powerful features. With httpYac, you can define environments, set up global variables, import files, use custom scripts, create tests, and much more. It’s a versatile tool that adapts to your workflow, whether you're testing simple endpoints or managing complex API scenarios. Ready to see it in action? Let’s dive in!

Starting

httpYac offers both a CLI client and a VSCode extension, but for a fully integrated development experience, we’ll focus on the extension. By using the VSCode extension, you can create a seamless, connected workspace directly within your codebase. Getting started is simple: just search for httpYac in the VSCode extensions menu and hit install.

Now we can create a new .http or .rest file and start write our collections, I create a folder structure for hold this:

Now, on the login.http file, lets write the first request, I will use DummyJSON website for this post. The DummyJSON has a test endpoint, so, lets start from there.

So, write this request is very easy, just put the following code:

GET https://dummyjson.com/test

Yes, is just this, but, we can see some new things on the VSCode:

Upside the code, we can see some information's:

• send: Action to run the request
• env: Select the enverimont, we will see this after.
• session: the stored user sessions(we can delete the sessions).

Click in send and we can see the result:

When we send the request, we can see in the right panel the response, and we can see some status information, such as the status code, time (in ms), content-type, and the body.
To check more details, click on the "header" section, and we can see a detailed request log.

I won’t cover the basics here—like HTTP methods or initial setup—because the official documentation is straightforward and quick to read. Instead, let’s skip ahead to the fun part and dive straight into what makes httpYac truly powerful and exciting to use!

Creating the login request

Let’s create the login request using the input, environment variables (envs), and global features to enhance our request. Here is the initial login request:

## Auth Login
# @title login
POST https://dummyjson.com/auth/login
Content-Type: application/json

{
    "username": "emilys",
    "password": "emilyspass"
}

Cool, but we can start using some cool features to boost our requests. First, let's create a .httpyac.json file. This file is one of the files that httpYac uses to get environment values and other configurations. Just create this file in your project root, alongside the package.json.

In this file we can create the environments key and create a key for each ENVthat we have, including a $shared, that will share values between all envs.

{
  "environments": {
    "$shared": {},
    "stage": {
      "host": "https://stage-dummyjson.com",
      "username": "emilys",
      "password": "emilyspass"
    },
    "dev": {
      "host": "https://dev-dummyjson.com",
      "username": "emilys",
      "password": "emilyspass"
    },
    "prod": {
      "host": "https://dummyjson.com",
      "username": "emilys",
      "password": "emilyspass"
    }
  }
}

I created two variables:

• host: The base URL for requests. "host" is a reserved variable name. By setting the value here, we don’t need to refer to it explicitly in the code. httpYac will automatically read this value and use it in all requests.
• username: The default user identification.
• password: The default user password.

You may need to restart VSCode for the extension to read the file. I’m not sure if it’s a VSCode bug or an extension issue, but it happens to me sometimes.

Don’t forget to select the right environment in the menu at the top.

I also created the stage, dev, and prod environments. This is a great idea in case you have different values for each environment.

Refactoring the login request, we got:

## Auth Login
# @title login
POST /auth/login
Content-Type: application/json

{
    "username": "{{username}}",
    "password": "{{password}}"
}

But, if we want do ask the password or the username?
Just change the value on .httpyac.json to use a input commando, this will show a input component in VSCode asking to user type something, we can use input, password input or select components. Lets refc and add the input:

But what if we want to ask for the password or the username?
Simply change the value in the .httpyac.json file to use an input command. This will display an input component in VSCode, prompting the user to type something. We can use input, password input, or select components. Let's refactor and add the input:

{
  "environments": {
    "$shared": {},
    "stage": {
      "host": "https://stage-dummyjson.com",
      "username": "emilys",
      "password": "emilyspass"
    },
    "dev": {
      "host": "https://dev-dummyjson.com",
      "username": "emilys",
      "password": "emilyspass"
    },
    "prod": {
      "host": "https://dummyjson.com",
      "username": "{{$input Enter username $value: emilys}}",
      "password": "{{$input Enter password $value: emilyspass}}"
    }
  }
}

Very cool, we can create default values with $value prop and create a custom label.

We can use $input-askonce to store the input answer in a session and dont ask every-time we send a request.

And when we send the VSCode ask to type the username and password:

By checking the login response, we can see that it returns an accessToken, which is required to access subsequent endpoints (as expected). We don't want to copy and paste it into every request, so we can use the global object to store the returned token and reuse it in the following requests.

Global variables and storing the response token

Storing a value in the global state is very straightforward. We just need to access the $global object and create a new key with the desired value. Using this value later, after retrieving the response, is just as simple.

One of the most powerful features of httpYac is the ability to use Node.js scripts before or after requests. This allows us to read the response object, extract the token, and store it in the global state effortlessly.

## Auth Login
# @title login
POST /auth/login
Content-Type: application/json

{
    "username": "{{username}}",
    "password": "{{password}}"
}

{{
    $global.accessToken = response.parsedBody.accessToken
}}

Now we got the accessToken stored, lets create the next requests.

Request on authenticated endpoint

Authenticated endpoints can be a significant challenge for API testing and automation, but we have everything we need to overcome this.

Create a new folder and file for the products module:

We already know how to setup our request end point and headers, we just need to create a new field: Authorization and read the value from $global object, and its is so easy:

GET /products
Authorization: Bearer {{$global.accessToken}}

Yeah, its just that, we no need do anything else.

Finishing

httpYac is very simple and powerful, we can create very cool requests collections and keep it in the repository to use the GIT version control and team collaboration.

I created other requests too, you can see this in the demo repository:

GitHub - tuliocll/httpyac-post-demo: This is a demo for the post: Simplify API Testing and Collection Versioning Using httpYac

This is a demo for the post: Simplify API Testing and Collection Versioning Using httpYac - tuliocll/httpyac-post-demo

GitHubtuliocll

We can do a lot with that, I will create a part 2 showing how to integrate this with CI/CD, using the asserts and more. Subscribe to be notified!