fix(pwt): custom fixture titles in UI Mode / HTML Reporter (#34009)

packages/playwright/src/worker/fixtureRunner.ts

@@ -66,7 +66,7 @@ class Fixture {
     }
 
     await testInfo._runAsStage({
-      title: `fixture: ${this.registration.name}`,
+      title: `fixture: ${this.registration.customTitle ?? this.registration.name}`,
       runnable: { ...runnable, fixture: this._setupDescription },
       stepInfo: this._stepInfo,
     }, async () => {
@@ -131,7 +131,7 @@ class Fixture {
       // time remaining in the time slot. This avoids cascading timeouts.
       if (!testInfo._timeoutManager.isTimeExhaustedFor(fixtureRunnable)) {
         await testInfo._runAsStage({
-          title: `fixture: ${this.registration.name}`,
+          title: `fixture: ${this.registration.customTitle ?? this.registration.name}`,
           runnable: fixtureRunnable,
           stepInfo: this._stepInfo,
         }, async () => {

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

@@ -1013,6 +1013,38 @@ for (const useIntermediateMergeReport of [true, false] as const) {
       ]);
     });
 
+    test('show custom fixture titles', async ({ runInlineTest, showReport, page }) => {
+      const result = await runInlineTest({
+        'a.spec.js': `
+          import { test as base, expect } from '@playwright/test';
+          
+          const test = base.extend({
+            fixture1: [async ({}, use) => {
+              await use();
+            }, { title: 'custom fixture name' }],
+            fixture2: async ({}, use) => {
+              await use();
+            },
+          });
+
+          test('sample', ({ fixture1, fixture2 }) => {
+            // Empty test using both fixtures
+          });
+        `
+      }, { 'reporter': 'dot,html' }, { PLAYWRIGHT_HTML_OPEN: 'never' });
+      expect(result.exitCode).toBe(0);
+      await showReport();
+      await page.getByRole('link', { name: 'sample' }).click();
+      await page.getByText('Before Hooks').click();
+      await expect(page.getByText('fixture: custom fixture name')).toBeVisible();
+      await expect(page.locator('.tree-item-title')).toHaveText([
+        /Before Hooks/,
+        /fixture: custom fixture/,
+        /fixture: fixture2/,
+        /After Hooks/,
+      ]);
+    });
+
     test('open tests from required file', async ({ runInlineTest, showReport, page }) => {
       test.info().annotations.push({ type: 'issue', description: 'https://github.com/microsoft/playwright/issues/11742' });
       const result = await runInlineTest({

tests/playwright-test/ui-mode-trace.spec.ts

@@ -363,3 +363,33 @@ test('should filter actions tab on double-click', async ({ runUITest, server })
     /page.goto/,
   ]);
 });
+
+test('should show custom fixture titles in actions tree', async ({ runUITest }) => {
+  const { page } = await runUITest({
+    'a.test.ts': `
+      import { test as base, expect } from '@playwright/test';
+      
+      const test = base.extend({
+        fixture1: [async ({}, use) => {
+          await use();
+        }, { title: 'My Custom Fixture' }],
+        fixture2: async ({}, use) => {
+          await use();
+        },
+      });
+
+      test('fixture test', async ({ fixture1, fixture2 }) => {
+        // Empty test using both fixtures
+      });
+    `,
+  });
+
+  await page.getByText('fixture test').dblclick();
+  const listItem = page.getByTestId('actions-tree').getByRole('treeitem');
+  await expect(listItem, 'action list').toHaveText([
+    /Before Hooks[\d.]+m?s/,
+    /My Custom Fixture[\d.]+m?s/,
+    /fixture2[\d.]+m?s/,
+    /After Hooks[\d.]+m?s/,
+  ]);
+});