feat(trace): special UI for API tests

[Skn0tt]

For tests that don't use Playwright's browser features, but exclusively API testing, our UI currently looks just like the UI for browser tests:

Most of the screen is taken up by the blank browser snapshot, the network requests are tucked away in a tab below, and they show exactly the same entries as the action panel already does. We also show a Locator tab that doesn't do anything inside an API test.

This PR is a draft for a special UI for API tests. It replaces the browser snapshot with the request details of the currently selected action, hides the Locator tab and removes the Network tab because the same list exists inside the actions panel:

Opening this here as a draft to gather feedback from our community. If you use Playwright extensively in your API testing, do you make use of the Playwright UI? Would these changes help you? What other UI changes would you like to see?

[Skn0tt]

To play around with this locally, clone the PR and then set up your local env with:

npm ci
npm run watch
npx playwright install

Then you can cd examples/todomvc and run npx playwright test --ui.

[github-actions]

Test results for "tests 1"

31 failed
❌ [chromium-library] › tests/library/trace-viewer.spec.ts:1020:1 › should open two trace files @chromium-ubuntu-22.04-node18
❌ [chromium-library] › tests/library/trace-viewer.spec.ts:1020:1 › should open two trace files @chromium-ubuntu-22.04-node20
❌ [chromium-library] › tests/library/trace-viewer.spec.ts:1020:1 › should open two trace files @chromium-ubuntu-22.04-node22
❌ [firefox-library] › tests/library/trace-viewer.spec.ts:1020:1 › should open two trace files @firefox-ubuntu-22.04-node18
❌ [playwright-test] › tests/ui-mode-test-network-tab.spec.ts:164:5 › should not duplicate network entries from beforeAll @macos-latest-node18-1
❌ [playwright-test] › tests/reporter-html.spec.ts:565:5 › merged › should show multi trace source @macos-latest-node18-2
❌ [playwright-test] › tests/reporter-html.spec.ts:599:5 › merged › trace should not hang when showing parallel api requests @macos-latest-node18-2
❌ [playwright-test] › tests/reporter-html.spec.ts:565:5 › created › should show multi trace source @macos-latest-node18-2
❌ [playwright-test] › tests/reporter-html.spec.ts:599:5 › created › trace should not hang when showing parallel api requests @macos-latest-node18-2
❌ [chromium-library] › tests/library/trace-viewer.spec.ts:1020:1 › should open two trace files @ubuntu-20.04-chromium-tip-of-tree
❌ [playwright-test] › tests/ui-mode-test-network-tab.spec.ts:164:5 › should not duplicate network entries from beforeAll @ubuntu-latest-node18-1
❌ [playwright-test] › tests/reporter-html.spec.ts:565:5 › merged › should show multi trace source @ubuntu-latest-node18-2
❌ [playwright-test] › tests/reporter-html.spec.ts:599:5 › merged › trace should not hang when showing parallel api requests @ubuntu-latest-node18-2
❌ [playwright-test] › tests/reporter-html.spec.ts:565:5 › created › should show multi trace source @ubuntu-latest-node18-2
❌ [playwright-test] › tests/reporter-html.spec.ts:599:5 › created › trace should not hang when showing parallel api requests @ubuntu-latest-node18-2
❌ [playwright-test] › tests/ui-mode-test-network-tab.spec.ts:164:5 › should not duplicate network entries from beforeAll @ubuntu-latest-node20-1
❌ [playwright-test] › tests/reporter-html.spec.ts:565:5 › merged › should show multi trace source @ubuntu-latest-node20-2
❌ [playwright-test] › tests/reporter-html.spec.ts:599:5 › merged › trace should not hang when showing parallel api requests @ubuntu-latest-node20-2
❌ [playwright-test] › tests/reporter-html.spec.ts:565:5 › created › should show multi trace source @ubuntu-latest-node20-2
❌ [playwright-test] › tests/reporter-html.spec.ts:599:5 › created › trace should not hang when showing parallel api requests @ubuntu-latest-node20-2
❌ [playwright-test] › tests/ui-mode-test-network-tab.spec.ts:164:5 › should not duplicate network entries from beforeAll @ubuntu-latest-node22-1
❌ [playwright-test] › tests/reporter-html.spec.ts:565:5 › merged › should show multi trace source @ubuntu-latest-node22-2
❌ [playwright-test] › tests/reporter-html.spec.ts:599:5 › merged › trace should not hang when showing parallel api requests @ubuntu-latest-node22-2
❌ [playwright-test] › tests/reporter-html.spec.ts:565:5 › created › should show multi trace source @ubuntu-latest-node22-2
❌ [playwright-test] › tests/reporter-html.spec.ts:599:5 › created › trace should not hang when showing parallel api requests @ubuntu-latest-node22-2
❌ [webkit-library] › tests/library/trace-viewer.spec.ts:1020:1 › should open two trace files @webkit-ubuntu-22.04-node18
❌ [playwright-test] › tests/ui-mode-test-network-tab.spec.ts:164:5 › should not duplicate network entries from beforeAll @windows-latest-node18-1
❌ [playwright-test] › tests/reporter-html.spec.ts:565:5 › merged › should show multi trace source @windows-latest-node18-2
❌ [playwright-test] › tests/reporter-html.spec.ts:599:5 › merged › trace should not hang when showing parallel api requests @windows-latest-node18-2
❌ [playwright-test] › tests/reporter-html.spec.ts:565:5 › created › should show multi trace source @windows-latest-node18-2
❌ [playwright-test] › tests/reporter-html.spec.ts:599:5 › created › trace should not hang when showing parallel api requests @windows-latest-node18-2

5 flaky

⚠️ [firefox-page] › tests/page/page-evaluate.spec.ts:403:3 › should throw for too deep reference chain @firefox-ubuntu-22.04-node18
⚠️ [playwright-test] › tests/ui-mode-test-watch.spec.ts:145:5 › should watch all @ubuntu-latest-node22-1
⚠️ [playwright-test] › tests/ui-mode-trace.spec.ts:341:5 › should work behind reverse proxy @ubuntu-latest-node22-1
⚠️ [webkit-library] › tests/library/trace-viewer.spec.ts:773:1 › should handle src=blob @webkit-ubuntu-22.04-node18
⚠️ [webkit-page] › tests/page/page-screenshot.spec.ts:345:5 › page screenshot › should work while navigating @webkit-ubuntu-22.04-node18

38025 passed, 650 skipped
✔️✔️✔️

Merge workflow run.

[BMayhew]

This would make things more clear

---

When in this state I wonder if there are some stats you could show when different levels are selected. For Passed this would be less important but having a 3 of 6 tests passed (50%) with some of the details to the right that could be clicked into may be useful? Seems like a lot of wasted space where something could be displayed when at the higher levels with describe blocks.

---

I love seeing the PATH booking/999999 for example, I wonder if there is an easy way to indicate the response code in the "Actions" window. Though this test I expect 404, it would be nice to have a quick visual of what was the status of the call from this view.

This is the repo I used (I just dropped it in the examples folder, did an npm install and I removed the playwright directories from the node_modules folder

https://github.com/playwrightsolutions/playwright-api-test-demo

Loving these updates! also this looks exciting!

[Skn0tt]

Thanks, that's great feedback!