chore: improve view trace button (#35528)

packages/html-reporter/src/testFileView.css

@@ -53,6 +53,16 @@
 
 .test-file-badge {
   flex: none;
+  background-color: transparent;
+  border-color: transparent;
+}
+
+.test-file-badge span {
+  color: var(--color-fg-subtle);
+}
+
+.test-file-badge:hover {
+  cursor: pointer;
 }
 
 .test-file-badge svg {
@@ -63,10 +73,6 @@
   fill: var(--color-fg-muted);
 }
 
-.test-file-badge.button {
-  background-color: transparent;
-}
-
 .test-file-test-outcome-skipped {
   color: var(--color-fg-muted);
 }

packages/html-reporter/src/testFileView.tsx

@@ -90,14 +90,12 @@ function traceBadge(test: TestCaseSummary): JSX.Element | undefined {
   if (!firstTraces)
     return undefined;
 
-  const isFailed = test.outcome === 'unexpected' || test.outcome === 'flaky';
-
   return <Link
     href={generateTraceUrl(firstTraces)}
-    title={isFailed ? 'View Failing Trace' : 'View Trace'}
-    className={clsx('test-file-badge', isFailed && 'button')}>
+    title='View Trace'
+    className='button test-file-badge'>
     {trace()}
-    {isFailed && <span style={{ color: 'var(--color-fg-subtle)' }}>View Failing Trace</span>}
+    <span>View Trace</span>
   </Link>;
 }
 

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

@@ -706,7 +706,7 @@ test('generate html with attachment urls', async ({ runInlineTest, mergeReports,
   await page.goBack();
 
   // Check that trace loads.
-  await page.getByRole('link', { name: 'View Failing Trace' }).click();
+  await page.locator('.test-file-test').filter({ hasText: /failing 1/ }).getByRole('link', { name: 'View Trace' }).click();
   await expect(page).toHaveTitle('Playwright Trace Viewer');
   await expect(page.getByTestId('actions-tree').locator('div').filter({ hasText: /^expect\.toBe$/ })).toBeVisible();
 });