first impl

packages/html-reporter/src/links.tsx

@@ -76,7 +76,8 @@ export const AttachmentLink: React.FunctionComponent<{
   href?: string,
   linkName?: string,
   openInNewTab?: boolean,
-}> = ({ attachment, href, linkName, openInNewTab }) => {
+  depth?: number,
+}> = ({ attachment, href, linkName, openInNewTab, depth }) => {
   return <TreeItem title={<span>
     {attachment.contentType === kMissingContentType ? icons.warning() : icons.attachment()}
     {attachment.path && <a href={href || attachment.path} download={downloadFileNameForAttachment(attachment)}>{linkName || attachment.name}</a>}
@@ -87,7 +88,7 @@ export const AttachmentLink: React.FunctionComponent<{
     )}
   </span>} loadChildren={attachment.body ? () => {
     return [<div key={1} className='attachment-body'><CopyToClipboard value={attachment.body!}/>{linkifyText(attachment.body!)}</div>];
-  } : undefined} depth={0} style={{ lineHeight: '32px' }}></TreeItem>;
+  } : undefined} depth={depth ?? 0} style={{ lineHeight: '32px' }}></TreeItem>;
 };
 
 function downloadFileNameForAttachment(attachment: TestAttachment): string {

packages/html-reporter/src/testResultView.tsx

@@ -98,7 +98,7 @@ export const TestResultView: React.FC<{
       {result.errors.map((error, index) => <TestErrorView key={'test-result-error-message-' + index} error={error}></TestErrorView>)}
     </AutoChip>}
     {!!result.steps.length && <AutoChip header='Test Steps'>
-      {result.steps.map((step, i) => <StepTreeItem key={`step-${i}`} step={step} depth={0}></StepTreeItem>)}
+      {result.steps.map((step, i) => <StepTreeItem key={`step-${i}`} step={step} attachments={result.attachments} depth={0}></StepTreeItem>)}
     </AutoChip>}
 
     {diffs.map((diff, index) =>
@@ -148,7 +148,15 @@ export const TestResultView: React.FC<{
 const StepTreeItem: React.FC<{
   step: TestStep;
   depth: number,
-}> = ({ step, depth }) => {
+  attachments: TestAttachment[],
+}> = ({ step, depth, attachments }) => {
+  if (step.category === 'attach') {
+    const attachmentName = step.title.match(/^attach "(.*)"$/)?.[1];
+    const attachment = attachments.find(a => a.name === attachmentName);
+    if (attachment)
+      return <AttachmentLink attachment={attachment} depth={depth} />;
+  }
+
   return <TreeItem title={<span>
     <span style={{ float: 'right' }}>{msToString(step.duration)}</span>
     {statusIcon(step.error || step.duration === -1 ? 'failed' : 'passed')}
@@ -156,7 +164,7 @@ const StepTreeItem: React.FC<{
     {step.count > 1 && <> ✕ <span className='test-result-counter'>{step.count}</span></>}
     {step.location && <span className='test-result-path'>— {step.location.file}:{step.location.line}</span>}
   </span>} loadChildren={step.steps.length + (step.snippet ? 1 : 0) ? () => {
-    const children = step.steps.map((s, i) => <StepTreeItem key={i} step={s} depth={depth + 1}></StepTreeItem>);
+    const children = step.steps.map((s, i) => <StepTreeItem key={i} step={s} depth={depth + 1} attachments={attachments}></StepTreeItem>);
     if (step.snippet)
       children.unshift(<TestErrorView key='line' error={step.snippet}></TestErrorView>);
     return children;

packages/html-reporter/src/types.ts

@@ -102,6 +102,7 @@ export type TestResult = {
 
 export type TestStep = {
   title: string;
+  category: 'hook' | 'fixture' | 'test.step' | 'expect' | 'attach' | string;
   startTime: string;
   duration: number;
   location?: Location;

packages/playwright/src/reporters/html.ts

@@ -498,7 +498,9 @@ class HtmlBuilder {
     const { step, duration, count } = dedupedStep;
     const result: TestStep = {
       title: step.title,
+      category: step.category,
       startTime: step.startTime.toISOString(),
+      params: step.params,
       duration,
       steps: dedupeSteps(step.steps).map(s => this._createTestStep(s)),
       location: this._relativeLocation(step.location),

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

@@ -876,6 +876,33 @@ for (const useIntermediateMergeReport of [false] as const) {
       ]));
     });
 
+    test('should show stwep ID', { annotation: { type: 'issue', description: 'https://github.com/microsoft/playwright/issues/32748' } }, async ({ runInlineTest, page, showReport }) => {
+      const result = await runInlineTest({
+        'a.test.js': `
+          import { test, expect } from '@playwright/test';
+          test('passing', async ({ page }, testInfo) => {
+            testInfo.attachments.push({
+                name: 'top-level.txt',
+                contentType: 'text/plain',
+                body: Buffer.from('foo'),
+            });
+            await test.step('step', async () => {
+              testInfo.attachments.push({
+                name: 'step-attachment.txt',
+                contentType: 'text/plain',
+                body: Buffer.from('foo'),
+              });
+            });
+          });
+        `,
+      }, { reporter: 'dot,html' }, { PLAYWRIGHT_HTML_OPEN: 'never' });
+      expect(result.exitCode).toBe(0);
+
+      await showReport();
+
+      await page.pause();
+    });
+
     test('should strikethrough textual diff', async ({ runInlineTest, showReport, page }) => {
       const result = await runInlineTest({
         'helper.ts': `