diff --git a/packages/html-reporter/src/testCaseView.spec.tsx b/packages/html-reporter/src/testCaseView.spec.tsx
index 7cc9f8991c..183d44c019 100644
--- a/packages/html-reporter/src/testCaseView.spec.tsx
+++ b/packages/html-reporter/src/testCaseView.spec.tsx
@@ -59,7 +59,7 @@ const testCase: TestCase = {
   ],
   tags: [],
   outcome: 'expected',
-  duration: 10,
+  duration: 200,
   ok: true,
   results: [result]
 };
@@ -212,6 +212,35 @@ test('should correctly render prev and next', async ({ mount }) => {
     - text: group
     - link "« previous"
     - link "next »"
-    - text: "My test test.spec.ts:42 10ms"
+    - text: "My test test.spec.ts:42 100ms"
+  `);
+});
+
+
+const testCaseWithTwoAttempts: TestCase = {
+  ...testCase,
+  results: [
+    {
+      ...result,
+      errors: ['Error message'],
+      status: 'failed',
+      duration: 50,
+    },
+    {
+      ...result,
+      duration: 150,
+      status: 'passed',
+    },
+  ],
+};
+
+test('total duration is selected run duration', async ({ mount, page }) => {
+  const component = await mount(<TestCaseView projectNames={['chromium', 'webkit']} test={testCaseWithTwoAttempts} prev={undefined} next={undefined} run={0}></TestCaseView>);
+  await expect(component).toMatchAriaSnapshot(`
+    - text: "My test test.spec.ts:42 50ms"
+  `);
+  await page.getByText('Retry #1').click();
+  await expect(component).toMatchAriaSnapshot(`
+    - text: "My test test.spec.ts:42 150ms"
   `);
 });
diff --git a/packages/html-reporter/src/testCaseView.tsx b/packages/html-reporter/src/testCaseView.tsx
index e4ffa9c15b..bbd0d7ad13 100644
--- a/packages/html-reporter/src/testCaseView.tsx
+++ b/packages/html-reporter/src/testCaseView.tsx
@@ -65,7 +65,7 @@ export const TestCaseView: React.FC<{
         </CopyToClipboardContainer>
       </div>
       <div style={{ flex: 'auto' }}></div>
-      <div className='test-case-duration'>{msToString(test.duration)}</div>
+      <div className='test-case-duration'>{msToString(test.results[selectedResultIndex]?.duration ?? test.duration)}</div>
     </div>}
     {test && (!!test.projectName || labels) && <div className='test-case-project-labels-row'>
       {test && !!test.projectName && <ProjectLink projectNames={projectNames} projectName={test.projectName}></ProjectLink>}