Using .http files to test API endpoints Part 4

Setting up VSCode to use .http files

To get started with .http in Visual Studio Code, we’ll be using the httpyac extension. There is a simpler alternative extension – Rest Client – but this is much less powerful and useful.

Installation

The process is straightforward:

  1. Open Visual Studio Code.
  2. Navigate to the Extensions view by clicking the square icon on the sidebar or pressing Ctrl+Shift+X
  3. Search for "httpYac" in the search bar.
  4. Locate the extension authored by anweber and click Install.

Running Requests

Simply type your request in an .http file using standard HTTP syntax (e.g., GET https://api.example.com). Above each request, a Send Request code lens appears automatically. Clicking this executes the call and opens the response in a side-by-side view.

Variables and Environments

Use simple syntax like @name = value to define variables. Environments allow you to swap configurations (e.g., dev vs. prod) without altering your request logic.

  • Defining: Use a .httpyac.json file in your root directory to store environment-specific variables.
  • Usage: Access variables within requests using double curly braces, such as {{host}}/users.
  • Prompting: You can use $input or $password to trigger interactive prompts in VS Code for sensitive or dynamic data.

Chaining Requests

You can chain requests by using Node.js scripts to extract data from one response and store it as a variable for the next.

POST {{baseUrl}}/login 
{“user”: “admin”}

{{
  // Post-request script to store token
  exports.token = response.parsedBody.token;
}}

GET {{baseUrl}}/data
Authorization: Bearer {{token}}

Assertions and Testing

httpYac supports lightweight, declarative assertions and full JavaScript testing.

  • Declarative: Use ?? to check responses quickly (e.g., ?? status == 200 or ?? header content-type includes json).
  • Scripted: Use the test() function within a script block to perform complex validations using built-in or third-party libraries like chai.

Scripting and Hooks

Scripts are wrapped in {{ ... }} blocks.

  • Pre-request: Code placed before the request line executes before the call is sent.
  • Post-request: Code placed after the response is received handles data extraction or assertions.
  • Hooks: Use event hooks (e.g., {{+after ...}}) to register global logic that triggers automatically for every request, perfect for logging or global header injection.

Advanced Features

httpYac extends far beyond simple REST calls:

  • Protocols: Built-in support for GraphQL, gRPC, SOAP, and WebSockets.
  • Authentication: Native support for OAuth2, OpenID Connect, and AWS Signature v4.
  • Automation: Use the httpyac CLI to run your .http files in CI/CD pipelines, enabling automated API testing directly from your source-controlled request files.

Authentication

Obviously, API endpoints are secured so that only calls that are authenticated and authorized are allowed. We use JWT tokens in the REST Request headers. The typical way of doing this is to grab the access token if it’s stored in browser local storage, and include this in a Bearer parameter value. And httpyac supports that. But it is cumbersome and time-consuming, and provides underlying flows to simplify this, using either OAuth2 or Open ID Connect.

The flow I’ve adopted is OpenID’s Resource Owner Password Credentials (ROPC) Grant. Warning: Since this relies on username and password data, this must not be stored in any Repo, or on local file systems. Put this sensitive data in Keeper, and copy/paste into your file temporarily just for the duration of the development session.

GET https://api.example.com/v1/user-info
Authorization: openid password local

How it functions under the hood:

  • Identification: When httpYac encounters openid password local, it looks up the local entry settings in your configuration.
  • Exchange: It sends a POST request to the token_endpoint with the grant_type=password along with your credentials.
  • Token Handling: The OIDC provider (WSO2) returns a JSON response containing an access_token. httpYac stores this in its internal cache for the duration of the session.
  • Injection: It then replaces the Authorization: openid password local header with the actual standard Authorization: Bearer header before sending the request to the target API.

Setting up the configuration

# .env file
USERNAME=my_user
PASSWORD=my_secure_password
CLIENT_ID=my_client_id

References

httpYac Documentation: https://httpyac.github.io

httpYac extension for VS Code: https://marketplace.visualstudio.com/items?itemName=anweber.vscode-httpyac