[Feature]: Make trace-viewer API public

[jeremy-daley-kr]

🚀 Feature Request

From what I can gather, it seems the trace viewer source is here: https://github.com/microsoft/playwright/tree/main/packages/trace-viewer ...and that's great, but what's the feasibility of opening up its functions (like HTML, CSS generation from Zip file) for public consumption?

Note: This would not be the same as the files from the html-reporter. I would only have the Zip file.

Perhaps that's already available, and I just need proper direction, but my use case involves setting up an internal web server to show the UI for Zip traces.

The other option might be, if I could send a POST request to the trace viewer site, my org already trusts it, but I can't host the Zip file publicly. Just trying to make things less manual for our devs after a Github workflow runs (via Annotation link).

Example

import { generateFromZip } from '@playwright/trace-viewer';

const generateFiles  = (zipPath: string) => {
  return generateFromZip(zipPath);
};

Motivation

I'd like to direct my organization's devs to an internally-hosted trace viewer instance that doesn't require them to manually upload a zip file.

[MindaugasMateika]

but my use case involves setting up an internal web server to show the UI for Zip traces.

Assuming you can run https web server on intranet you can basically dump built trace folder content (the one generated in html report) and run it and you'll have private trace viewer

[dgozman]

@jeremy-daley-kr I second what @MindaugasMateika suggests. I don't think we'll have any kind of API for the trace viewer app. You should host the trace viewer internally so that it has access to your traces. Let me know whether this works for you.

[jeremy-daley-kr]

@dgozman As of now, I only have the Zip trace file, whereas I think @MindaugasMateika is referring to the full collection of these generated files:

I don't have a problem hosting any kind of trace-viewer internally, but the Zip file contents are unfortunately limited to this:

I like the npx playwright show-trace, but it spins up its own server... which, how would you run that if already running a server?

[jeremy-daley-kr]

Are you suggesting pulling down the https://github.com/microsoft/playwright/tree/main/packages/trace-viewer repo, and running that? Am I correct that that's the repo for what's hosted on trace.playwright.dev?

If that's the only current option, I can explore that, but I assumed that tool itself has some module under the hood that creates the UI from just a Zip file because... well, that's what it (and show-trace) do.

[dgozman]

@jeremy-daley-kr Yes, pacakges/trace-viewer is the repo, and its built version is hosted on trace.playwright.dev. You will need a built version of it too, which is easy to take from a generated html report. Run a single test with a trace, and you'll get the trace viewer app to deploy. It is a static web app without a backend, so you can deploy it anywhere. Note that it changes with each Playwright release, so you'd probably want to regenerate it. This app creates the UI from the zip file, you don't need anything else.

npx playwright show-trace spins its own server indeed. If you'd like, run it with --port option somewhere, and make that ip:port available on your network. This would be an alternative to statically hosting the trace viewer app, but it seems suboptimal compared to the static web app.

[jeremy-daley-kr]

Yeah. I might just do what (I think) you suggested by copying the static files (html, js, css, etc.) from an existing html-report that I have, and just throw the Zip file in like so: http://127.0.0.1:8080/trace/index.html?trace=http://127.0.0.1:8080/data/some-individual-trace-file.zip

Also, looks like those assets might be built here: ./node_modules/playwright-core/lib/vite/traceViewer

Maybe there could eventually be some kind of npx playwright show-trace --generate-html some-trace.zip, or something along those lines.

[dgozman]

Yeah. I might just do what (I think) you suggested by copying the static files (html, js, css, etc.) from an existing html-report that I have, and just throw the Zip file in like so: http://127.0.0.1:8080/trace/index.html?trace=http://127.0.0.1:8080/data/some-individual-trace-file.zip

Yep, this should work.

Also, looks like those assets might be built here: ./node_modules/playwright-core/lib/vite/traceViewer

They are indeed, so you can copy directly from there.

Maybe there could eventually be some kind of npx playwright show-trace --generate-html some-trace.zip, or something along those lines.

So far, everyone was happy to run trace viewer locally or server it as a static app somewhere internally. I think it will stay this way in the near future. If your usecase is solved, I'll close this issue.

[jeremy-daley-kr]

That's fine. The assistance for a path forward was certainly helpful. Thanks!