diff --git a/packages/html-reporter/src/testResultView.tsx b/packages/html-reporter/src/testResultView.tsx
index baba8820b0..6ca597e99d 100644
--- a/packages/html-reporter/src/testResultView.tsx
+++ b/packages/html-reporter/src/testResultView.tsx
@@ -108,7 +108,7 @@ export const TestResultView: React.FC<{
     {!!result.errors.length && <AutoChip header='Errors'>
       {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.length && <AutoChip header='Test Steps' dataTestId='test-steps-chip'>
       {result.steps.map((step, i) => <StepTreeItem key={`step-${i}`} step={step} attachments={result.attachments} depth={0}></StepTreeItem>)}
     </AutoChip>}
 
diff --git a/tests/playwright-test/reporter-html.spec.ts b/tests/playwright-test/reporter-html.spec.ts
index f21f146415..40a2a6ebc0 100644
--- a/tests/playwright-test/reporter-html.spec.ts
+++ b/tests/playwright-test/reporter-html.spec.ts
@@ -876,7 +876,7 @@ 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 }) => {
+    test('should show attachments in step lsit', { 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';
@@ -884,11 +884,11 @@ for (const useIntermediateMergeReport of [false] as const) {
             testInfo.attachments.push({
                 name: 'top-level.txt',
                 contentType: 'text/plain',
-                body: Buffer.from('foo'),
+                body: Buffer.from('body of top-level'),
             });
-            await test.step('step', async () => {
+            await test.step('step with attachment', async () => {
               testInfo.attachments.push({
-                name: 'step-attachment.txt',
+                name: 'step-attachment.html',
                 contentType: 'text/html',
                 body: Buffer.from('<h1>step attachment</h1>'),
               });
@@ -900,7 +900,21 @@ for (const useIntermediateMergeReport of [false] as const) {
 
       await showReport();
 
-      await page.pause();
+      await page.getByText('passing').click();
+
+      const testSteps = page.getByTestId('test-steps-chip');
+      await testSteps.getByText('top-level.txt').click();
+      await expect(testSteps).toContainText('body of top-level');
+
+      await testSteps.getByText('step with attachment').click();
+
+      const [newTab] = await Promise.all([
+        page.waitForEvent('popup'),
+        testSteps.getByText('step-attachment.html').click(),
+      ]);
+
+      await expect(newTab).toHaveURL(/^blob:/);
+      await expect(newTab.getByText('step attachment')).toBeVisible();
     });
 
     test('should strikethrough textual diff', async ({ runInlineTest, showReport, page }) => {