Skip to content

feat: hosted viewer for HTML report artifacts (zero-install, browser-only) #9971

@hi-ogawa

Description

@hi-ogawa

Clear and concise description of the problem

Vitest's --reporter=html produces a self-contained static site. In CI, this gets uploaded as an artifact zip. Viewing it requires: download zip -> unzip -> npx serve html/ -> open browser. This applies to any CI workflow producing HTML reports — whether from --merge-reports or a regular run.

Note: GitLab CI can preview HTML artifacts directly in the browser (powered by GitLab Pages). But GitHub Actions — the most common CI for Vitest users — does not support this, so the friction is real for most users.

Suggested solution

(🤖 This could be a slop. The idea is to be verified later.)

Host a static viewer page (e.g. vitest.dev/report) that lets users open an HTML report artifact zip entirely in the browser — no server, no install.

Implementation: a service worker intercepts fetch requests and serves files from the unzipped artifact. Since the HTML report is already a self-contained static site (SPA + data), the viewer is just a thin "zip unpacker + virtual file server" shell. The actual rendering comes from the artifact's own index.html, so there are no version compatibility concerns between the hosted viewer and the report format.

Prior art:

  • Playwright's trace viewer (trace.playwright.dev) uses this exact pattern — a service worker + @zip.js/zip.js to serve trace data from a zip URL
  • client-side-zip-server — generic SW-based zip serving

The core SW implementation is small (~100 lines). UX would primarily be drag-and-drop. A ?url= param is technically feasible — both GitHub API and the Azure blob storage redirect target set Access-Control-Allow-Origin: * — but the GitHub artifact download API requires authentication. The redirect target (a pre-signed Azure blob URL, expires in ~1 min) is publicly accessible, so ?url= could work if a CI step posts a comment with that URL. Drag-and-drop is the simpler, more universal approach.

This concept might be actually generic to any zipped static site, not Vitest-specific. If implementation turns out to be fully agnostic, it could live as a standalone tool that Vitest simply documents/recommends.

Alternative

No response

Additional context

No response

Validations

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions