chore(html-reporter): render a thumbnail for every trace attachment

[Pavel Feldman (pavelfeldman)]

Summary

• When a result has multiple trace attachments, each one now gets its own thumbnail link instead of a single thumbnail followed by plain download links.
• Each thumbnail opens just that trace; the combined multi-trace view is still available via the View Trace button in the test header.

[github-actions]

Test results for "MCP"

1 failed
❌ [chrome] › mcp/config.spec.ts:203 › chromiumSandbox › --sandbox enables the sandbox @mcp-ubuntu-latest-chrome

8109 passed, 1341 skipped

---

Merge workflow run.

[github-actions]

Hi, I'm the Playwright bot and I took a first look at the failing CI.

🟢 The one failure is pre-existing — this PR is clear

[chrome] › mcp/config.spec.ts:203 › chromiumSandbox › --sandbox enables the sandbox fails on mcp-ubuntu-latest-chrome, and it fails there identically on this PR's own base commit (main, 51023b42) and on the unrelated PR #42288. This PR only re-renders trace thumbnails in the HTML reporter, so it can't be responsible.

Details

Overall: 1 failed, 8109 passed. The single failure is a pre-existing, environment-specific breakage of the Chrome-for-Testing sandbox launch on the ubuntu-latest MCP bot — unrelated to the diff.

Pre-existing flake / infra

• [chrome] › mcp/config.spec.ts:203 › --sandbox enables the sandbox — the test only fails on the mcp-ubuntu-latest-chrome bot, and it's been red there on every recent run, not just this PR:

  • main @ 51023b42 (this PR's base, a push run) — failed
  • PR fix(mcp): do not clobber chromiumSandbox from the config file #42288 @ eec441ed — failed
  • push @ be6e7cc9 — failed
  • this PR @ d9c17f29 — failed

  Run history on that bot (oldest → newest): 🟥🟥🟥🟥
  🟥🟥🟥🟥

  Across the DB it's green on every other bot (8 passes) and only ever fails on mcp-ubuntu-latest-chrome. The error is SyntaxError: "undefined" is not valid JSON — browser_get_config came back empty because Chrome failed to launch with --sandbox under chrome-for-testing on that runner. This PR touches only packages/html-reporter/src/testResultView.tsx and a reporter-html test, neither of which the MCP sandbox flow exercises.

_{Triaged by the Playwright bot - agent run}

[github-actions]

Test results for "tests 1"

Warning

The triggering workflow run ended with status cancelled. Results below may be incomplete — blob reports from cancelled or timed-out shards are missing, so passing/failing counts do not reflect the full test suite.

21 flaky

⚠️ [chromium-library] › library/global-fetch.spec.ts:293 › should return security details from response `@frozen-time-library-chromium-linux`
⚠️ [chromium-library] › library/har.spec.ts:639 › should have security details `@frozen-time-library-chromium-linux`
⚠️ [chromium-library] › library/video.spec.ts:736 › screencast › should work with video+trace `@frozen-time-library-chromium-linux`
⚠️ [chromium-library] › library/global-fetch.spec.ts:293 › should return security details from response `@chromium-ubuntu-22.04-arm-node20`
⚠️ [chromium-library] › library/har.spec.ts:639 › should have security details `@chromium-ubuntu-22.04-arm-node20`
⚠️ [chromium-library] › library/global-fetch.spec.ts:293 › should return security details from response `@realtime-time-library-chromium-linux`
⚠️ [chromium-library] › library/har.spec.ts:639 › should have security details `@realtime-time-library-chromium-linux`
⚠️ [chromium-library] › library/video.spec.ts:699 › screencast › should capture full viewport on hidpi `@realtime-time-library-chromium-linux`
⚠️ [chromium-library] › library/chromium/chromium.spec.ts:436 › should produce network events, routing, and annotations for Service Worker (advanced) `@chromium-ubuntu-22.04-node24`
⚠️ [chromium-library] › library/global-fetch.spec.ts:293 › should return security details from response `@chromium-ubuntu-22.04-node24`
⚠️ [chromium-library] › library/har.spec.ts:639 › should have security details `@chromium-ubuntu-22.04-node24`
⚠️ [chromium-library] › library/beforeunload.spec.ts:130 › should support dismissing the dialog multiple times `@chromium-ubuntu-22.04-node20`
⚠️ [chromium-library] › library/global-fetch.spec.ts:293 › should return security details from response `@chromium-ubuntu-22.04-node20`
⚠️ [chromium-library] › library/har.spec.ts:639 › should have security details `@chromium-ubuntu-22.04-node20`
⚠️ [chromium-library] › library/video.spec.ts:495 › screencast › should capture static page in persistent context Radoslav Kirilov (@smoke) `@chromium-ubuntu-22.04-node20`
⚠️ [firefox-library] › library/global-fetch.spec.ts:293 › should return security details from response `@firefox-ubuntu-22.04-node20`
⚠️ [firefox-library] › library/har.spec.ts:639 › should have security details `@firefox-ubuntu-22.04-node20`
⚠️ [firefox-page] › page/page-emulate-media.spec.ts:144 › should keep reduced motion and color emulation after reload `@firefox-ubuntu-22.04-node20`
⚠️ [firefox-page] › page/page-event-request.spec.ts:181 › should return response body when Cross-Origin-Opener-Policy is set `@firefox-ubuntu-22.04-node20`
⚠️ [webkit-library] › library/global-fetch.spec.ts:293 › should return security details from response `@webkit-ubuntu-22.04-node20`
⚠️ [webkit-library] › library/har.spec.ts:639 › should have security details `@webkit-ubuntu-22.04-node20`

45067 passed, 1126 skipped

---

Merge workflow run.