diff --git a/packages/html-reporter/src/testResultView.tsx b/packages/html-reporter/src/testResultView.tsx
index 6ca597e99d..955453b48d 100644
--- a/packages/html-reporter/src/testResultView.tsx
+++ b/packages/html-reporter/src/testResultView.tsx
@@ -163,9 +163,11 @@ const StepTreeItem: React.FC<{
 }> = ({ step, depth, attachments }) => {
   if (step.category === 'attach') {
     const attachmentName = step.title.match(/^attach "(.*)"$/)?.[1];
-    const attachment = attachments.find(a => a.name === attachmentName);
-    if (attachment)
+    const matchingAttachments = attachments.filter(a => a.name === attachmentName);
+    if (matchingAttachments.length === 1) {
+      const [attachment] = matchingAttachments;
       return <AttachmentLink attachment={attachment} depth={depth} openInNewTab={getAttachmentCategory(attachment) === 'html'} />;
+    }
   }
 
   return <TreeItem title={<span>
diff --git a/tests/playwright-test/reporter-html.spec.ts b/tests/playwright-test/reporter-html.spec.ts
index 40a2a6ebc0..d89d9321c4 100644
--- a/tests/playwright-test/reporter-html.spec.ts
+++ b/tests/playwright-test/reporter-html.spec.ts
@@ -892,6 +892,9 @@ for (const useIntermediateMergeReport of [false] as const) {
                 contentType: 'text/html',
                 body: Buffer.from('<h1>step attachment</h1>'),
               });
+
+              await testInfo.attach('foo', { body: 'a' });
+              await testInfo.attach('foo', { body: 'b' });
             });
           });
         `,
@@ -908,6 +911,8 @@ for (const useIntermediateMergeReport of [false] as const) {
 
       await testSteps.getByText('step with attachment').click();
 
+      await expect(testSteps.getByText('attach "foo"'), 'uses normal rendering when it cannot correlate by name').toHaveCount(2);
+
       const [newTab] = await Promise.all([
         page.waitForEvent('popup'),
         testSteps.getByText('step-attachment.html').click(),