DEV Community

Abhilash Biradar
Abhilash Biradar

Posted on

Beautiful HTML Reports for Your httpYac API Tests — Zero Dependencies

#node #testing #opensource #webdev

You run your httpYac tests in CI. Everything passes. You share the results with your team. They ask: "Can we see a report?" You stare at the terminal output and sigh.

That's the problem httpyac-plugin-reporter-html solves.

What is httpYac?

If you haven't used httpYac yet, think of it as the CLI-powered sibling of the REST Client VS Code extension. You write your API calls in plain .http files — method, URL, headers, body, assertions — and run them from the terminal or in CI/CD pipelines.

### Get user profile
GET https://api.example.com/users/42
Authorization: Bearer {{token}}

?? status == 200
?? body name != null
Enter fullscreen mode Exit fullscreen mode

Run it with:

httpyac send **/*.http
Enter fullscreen mode Exit fullscreen mode

It's fast, scriptable, and integrates beautifully with any pipeline. The missing piece? A shareable, human-readable report.

Enter httpyac-plugin-reporter-html

This plugin hooks into the httpYac lifecycle and generates a single standalone HTML file after your tests complete. Open it in any browser — no server, no internet, no dependencies. Everything — CSS, JavaScript, test data — is inlined.

Report overview

Expanded card with test assertions

Install and Run in 2 Minutes

Install the plugin:

npm install --save-dev httpyac-plugin-reporter-html
Enter fullscreen mode Exit fullscreen mode

httpYac automatically discovers the plugin — no extra config needed. Just run your tests:

httpyac send **/*.http
Enter fullscreen mode Exit fullscreen mode

report.html is written to your project root. Done.

Optional config in .httpyac.config.js:

module.exports = {
  htmlReporter: {
    title: 'My API Test Report',
    outputFile: 'reports/test-report.html',
  },
};
Enter fullscreen mode Exit fullscreen mode

What the Report Actually Shows

This isn't a wall of green checkmarks. Each test region gets a card with everything you need:

  • 9-stat hero bar — requests, passed, failed, skipped, duration + test-level totals
  • Color-coded cards — green (2xx), amber (3xx), orange (4xx), red (5xx)
  • Collapsible panels — request headers, request body, response headers, response body (pretty-printed JSON)
  • Assertion badges — every ?? assertion gets its own badge; failed ones show the actual error message inline
  • Metadata per request — source file + line number, timestamp, @title and @description from your .http file
  • Client-side filter & search — filter by outcome or HTTP status class, search by URL / name / file — no page reload

Non-HTTP regions (AMQP, MQTT, gRPC, WebSocket) are automatically skipped — the report stays focused on HTTP requests.

Drop It Into GitHub Actions

The report is CI-ready out of the box:

name: API Tests

on: [push, pull_request]

jobs:
  api-tests:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: npm

      - name: Install dependencies
        run: npm ci

      - name: Run httpYac tests
        run: httpyac send **/*.http --all
        continue-on-error: true   # still upload the report even if tests fail

      - name: Upload HTML report
        uses: actions/upload-artifact@v4
        if: always()
        with:
          name: api-test-report
          path: report.html
          retention-days: 30
Enter fullscreen mode Exit fullscreen mode

if: always() is important — you want the report even when tests fail.

Configuration Options

Option Type Default Description
title string "httpYac HTML Report" Title shown in the report header
outputFile string "report.html" Output path relative to workspace root

How It Works Under the Hood

The plugin hooks into the responseLogging lifecycle event — not onResponse.

This distinction matters. onResponse fires immediately after the HTTP response arrives — before ?? assertions have run. Collecting results there gives you empty test data every time.

responseLogging fires after the full execute loop including all assertions. By the time the plugin collects the result, every ?? assertion has been evaluated and the full status (SUCCESS, FAILED, ERROR, SKIPPED) is available on the region.

The report is written progressively after each request — so even if a run is interrupted mid-way, you get a partial report with whatever completed.

Try It, Star It, Break It

If you use httpYac in your projects, give the plugin a try and let me know how it goes in the comments. Found a bug? Have a feature idea — JSON export, multiple output formats, Slack webhook? Open an issue or send a PR.

Happy testing. 🧪

Top comments (0)