feat(tracing): tag trace attachments with content type parameter

packages/playwright/src/reporters/base.ts

@@ -312,7 +312,7 @@ export function formatFailure(config: FullConfig, test: TestCase, options: {inde
           const relativePath = path.relative(process.cwd(), attachment.path);
           resultLines.push(colors.cyan(`    ${relativePath}`));
           // Make this extensible
-          if (attachment.name === 'trace') {
+          if (attachment.name === 'trace' || attachment.contentType === 'application/zip;content=playwright-trace') {
             const packageManagerCommand = getPackageManagerExecCommand();
             resultLines.push(colors.cyan(`    Usage:`));
             resultLines.push('');

packages/playwright/src/worker/testTracing.ts

@@ -216,7 +216,7 @@ export class TestTracing {
 
     const tracePath = this._testInfo.outputPath('trace.zip');
     await mergeTraceFiles(tracePath, this._temporaryTraceFiles);
-    this._testInfo.attachments.push({ name: 'trace', path: tracePath, contentType: 'application/zip' });
+    this._testInfo.attachments.push({ name: 'trace', path: tracePath, contentType: 'application/zip;content=playwright-trace' });
   }
 
   appendForError(error: TestInfoError) {

packages/trace-viewer/src/ui/workbenchLoader.tsx

@@ -63,7 +63,7 @@ export const WorkbenchLoader: React.FunctionComponent<{
       if (!e.clipboardData?.files.length)
         return;
       for (const file of e.clipboardData.files) {
-        if (file.type !== 'application/zip')
+        if (file.type !== 'application/zip' && file.type !== 'application/zip;content=playwright-trace')
           return;
       }
       e.preventDefault();

tests/playwright-test/reporter-attachment.spec.ts

@@ -59,7 +59,7 @@ test('render screenshot attachment', async ({ runInlineTest }) => {
   expect(result.exitCode).toBe(1);
 });
 
-test('render trace attachment', async ({ runInlineTest }) => {
+test('render trace attachment by name', async ({ runInlineTest }) => {
   const result = await runInlineTest({
     'a.test.ts': `
       import { test, expect } from '@playwright/test';
@@ -81,6 +81,28 @@ test('render trace attachment', async ({ runInlineTest }) => {
   expect(result.exitCode).toBe(1);
 });
 
+test('render trace attachment by content type', async ({ runInlineTest }) => {
+  const result = await runInlineTest({
+    'a.test.ts': `
+      import { test, expect } from '@playwright/test';
+      test('one', async ({}, testInfo) => {
+        testInfo.attachments.push({
+          name: 'foo-trace',
+          path: testInfo.outputPath('my dir with space', 'foo.zip'),
+          contentType: 'application/zip;content=playwright-trace'
+        });
+        expect(1).toBe(0);
+      });
+    `,
+  }, { reporter: 'line' });
+  const text = result.output.replace(/\\/g, '/');
+  expect(text).toContain('    attachment #1: foo-trace (application/zip;content=playwright-trace) ────────────────────────────');
+  expect(text).toContain('    test-results/a-one/my dir with space/foo.zip');
+  expect(text).toContain('npx playwright show-trace "test-results/a-one/my dir with space/foo.zip"');
+  expect(text).toContain('    ────────────────────────────────────────────────────────────────────────────────────────────────');
+  expect(result.exitCode).toBe(1);
+});
+
 test(`testInfo.attach errors`, async ({ runInlineTest }) => {
   const result = await runInlineTest({
     'a.test.ts': `