Fetch Client - Test REST API Using VSCode Extension

7) Test

• We can test the API request and response data without any scripts/code in the Fetch client.
• It supports to test the below data,
  • Response Code
  • Response Body
  • Response Time
  • Content-Type
  • Content-Length
  • Content-Encoding
  • Specific Response Header value
  • Specific JSON property value in the JSON response

8) Response Data

• Fetch client supports Syntax highlight for Response data.
• Copy the response data using Copy button.
• It supports Tree view for JSON and XML responses and HTML preview for HTML responses.
• Download the response data as file.
• View the status code, response time and size of the response data.
• View response headers.

9) Test Results

• Once request is processed, Fetch client executes the test cases and display the test result with expected value and actual value.
• We can download the test results as JSON file.

10) Notes

Notes section is used to add the notes or documentation regarding the request. Fetch client has simple editor to add the documentation.

11) Code Snippet

Fetch client supports code snippet generation for various languages. Generate code snippets to send request from another application. Open request view and click icon (right side of the response section) for code snippet generation. The code snippet generation is available for following languages.

• C
• C#
• Go
• Java
• JavaScript
• Node
• PHP
• Python
• Shell

11) Request Cancel

Fetch client provides the feature for cancel the request. If you want to cancel the processing request then click then "Cancel Request" button in the response section.

12) Quick Access

Fetch client provides the quick access of History, collection and Environment variables in the side bar.

• History

  • Automatic saving of requests in History.
  • Save the history item to the collections.
  • Delete all history items or specific history item.

• Collection

  • Save requests to a collection.
  • Organize the request using the collections.
  • Run all the requests in the collection using Run All options and download the results as file.
  • Attach the Environment variable to collections.
  • Export the collections as JSON file.
  • Import the Fetch Client collections from above exported JSON file. (It is used to share the collections between team members.)
  • Duplicate the collection items.

  How to Import Collection

  • Select the Collection tab from the sidebar
  • Click Menu icon and Select Import option.
  • Now select Fetch Client collection file.

• Environment Variable

  • Create and set variables at multiple scopes
    • Global Level
    • Collection level
    • Request level
  • It is simple key value pair combination.
  • Use environment variables in URL, Query Param, Authorization, Header, Request Body (Form and Form-Encoded), Test sections.
  • Export variables as JSON file.
  • Import the Fetch Client variables from above exported JSON file.
  • In the input, enter a variable name in the {{variableName}} format.

  How to Import Variable

  • Select the Variable tab from the sidebar
  • Click Menu icon and Select Import option.
  • Now select Fetch Client variable file.

12) Run All requests

• Run all the requests in the collection using "Run All" options and download the results as file.
• Once completed the all request, export the test result as JSON or CSV.
• If you click the particular request from the table, it will open the corresponding request view.

Keyboard Shortcuts

• Ctl+Shift+P: From Command Palette
  • Fetch Client - New Request
• Ctl+Alt+N - Open Fetch Client View
• Enter on url textbox to send request

Configuration

• Open VSCode settings View, then search for Fetch Client.
• Fetch Client has below configurations.
  • Layout - Customize the UI layout
  • SSL Check - Enable Strict SSL Check for API Request
  • History Limit - Number of items to be displayed in the History
  • Time Out - Set Request Timeout
  • Default Protocol - Which protocol to add with URL either HTTP or HTTPS(if URL has no protocol)

Summary

In this article, you learned about how to use and test REST API using "Fetch Client" VSCode extension.

• GitHub Repo : https://github.com/Ganesan-Chandran/vscode-fetch-client
• To Raise Issue/New Features : https://github.com/Ganesan-Chandran/vscode-fetch-client/issues
• VS Code Marketplace : https://marketplace.visualstudio.com/items?itemName=GanesanChandran.fetch-client