Beautiful HTML Reports for Your httpYac API Tests — Zero Dependencies

Abhilash Biradar — Mon, 27 Jul 2026 16:21:37 +0000

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

Run it with:

httpyac send **/*.http

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.

Install and Run in 2 Minutes

Install the plugin:

npm install --save-dev httpyac-plugin-reporter-html

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

httpyac send **/*.http

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',
  },
};

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

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

npm: httpyac-plugin-reporter-html
GitHub: AbhilashBiradar/httpyac-plugin-reporter-html

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. 🧪

DEV Community: Abhilash Biradar