DEV Community

Harshad Lambate
Harshad Lambate

Posted on

I built a free HTML test reporter for Playwright, Jest, Vitest and Cucumber.js that automatically captures API calls, screenshots and retries

#playwright #javascript #testing #automation

sample report
When a test fails in CI, I usually end up asking the same questions:

What did the API actually return?
What was on the screen when it failed?
Did it fail on the first try, or only on the retry?
Is this test flaky, or did something really break?

The default reports show the assertion and the stack trace, so the rest means adding console.logs, rerunning locally, or digging through traces.

So I built Ace Reports: one self-contained HTML file per run, with all of that captured automatically. It already existed for .NET, Java and Python, and it’s now on npm for TypeScript/JavaScript.

Live demo report: https://harshadlambate.github.io/AceReportsWebsite/demo.html

What it captures, without changing your tests
Every API call: method, URL, request and response bodies, status and duration. It hooks Node’s http/https and the global fetch, so it covers axios, fetch, got, supertest, node-fetch, ky and Playwright’s request fixture. It also covers calls made through your own API client wrappers and vendor SDKs, with nothing to wrap. Authorization and cookie headers are redacted.
A screenshot on failure, taken before teardown closes the browser. It finds the page by itself: Playwright’s page fixture, a Vitest test.extend page, a Cucumber World’s this.page, or the jest-playwright global.
Retries and flaky tests: every attempt is its own tab with its own logs, error, API calls and screenshots. A test that passes after a failed attempt is marked flaky instead of quietly showing green.
Logs:
Playwright test.step, actions and expects.
Cucumber Given/When/Then steps, with doc strings and data tables.
console.log output, placed under the test that wrote it.
Search, filters and categories: filter by status or tag, search by name, and click a category bar to narrow the table.
One HTML file, no server: attach it to a ticket, email it, or keep it as a CI artifact.
How to use it

Playwright Test: one line.

ts

// playwright.config.ts
reporter: [['list'], ['@acereports/playwright']],
Enter fullscreen mode Exit fullscreen mode

Jest: two lines.

js

// jest.config.js
reporters: ['default', '@acereports/jest'],
setupFilesAfterEnv: ['@acereports/jest/setup'],
Enter fullscreen mode Exit fullscreen mode

Vitest: two lines.

ts

// vitest.config.ts
test: {
  reporters: ['default', '@acereports/vitest'],
  setupFiles: ['@acereports/vitest/setup'],
}
Enter fullscreen mode Exit fullscreen mode

Cucumber.js: two lines.

js

// cucumber.js
plugin: ['@acereports/cucumber'],
requireModule: ['@acereports/cucumber/support'],
Enter fullscreen mode Exit fullscreen mode

Install with npm i -D @acereports/playwright (or /jest, /vitest, /cucumber). Run your tests as usual, and the report is written to TestResults/AceReport_.html.

To add your own lines or screenshots:

ts

import { ace } from '@acereports/playwright';

ace.info('Submitting payment');
await ace.takeScreenshot('After login');
Enter fullscreen mode Exit fullscreen mode

Retries come from what you already use: Playwright retries, jest.retryTimes, Vitest retry, or cucumber-js --retry. Parallel workers end up in one report.

Limitations
It doesn’t see HTTP/2 calls made with the http2 module, or gRPC.
Vitest is supported in Node mode only, not browser mode.
Requires Node 18+, Playwright 1.40+, Jest 29+, Vitest 3+ and Cucumber.js 10+.

It’s free to use, including at work.

Website: https://harshadlambate.github.io/AceReportsWebsite/
npm: https://www.npmjs.com/package/@acereports/playwright

I’d really like feedback: what’s missing from your current test reports, and which HTTP client or framework should I support next?

Top comments (0)