chore: render live trace for the serial mode (#22715)

Fixes https://github.com/microsoft/playwright/issues/22655

packages/playwright-test/src/index.ts

@@ -325,15 +325,15 @@ const playwrightFixtures: Fixtures<TestFixtures, WorkerFixtures> = ({
     const startTraceChunkOnContextCreation = async (tracing: Tracing) => {
       if (captureTrace) {
         const title = [path.relative(testInfo.project.testDir, testInfo.file) + ':' + testInfo.line, ...testInfo.titlePath.slice(1)].join(' › ');
+        const ordinalSuffix = traceOrdinal ? `-${traceOrdinal}` : '';
+        ++traceOrdinal;
+        const retrySuffix = testInfo.retry ? `-${testInfo.retry}` : '';
+        const name = `${testInfo.testId}${retrySuffix}${ordinalSuffix}`;
         if (!(tracing as any)[kTracingStarted]) {
-          const ordinalSuffix = traceOrdinal ? `-${traceOrdinal}` : '';
-          ++traceOrdinal;
-          const retrySuffix = testInfo.retry ? `-${testInfo.retry}` : '';
-          const name = `${testInfo.testId}${retrySuffix}${ordinalSuffix}`;
           await tracing.start({ ...traceOptions, title, name });
           (tracing as any)[kTracingStarted] = true;
         } else {
-          await tracing.startChunk({ title });
+          await tracing.startChunk({ title, name });
         }
       } else {
         if ((tracing as any)[kTracingStarted]) {

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

@@ -15,7 +15,7 @@
  */
 
 import { ManualPromise } from '../../packages/playwright-core/lib/utils/manualPromise';
-import { test, expect } from './ui-mode-fixtures';
+import { test, expect, dumpTestTree } from './ui-mode-fixtures';
 
 test('should update trace live', async ({ runUITest, server }) => {
   const onePromise = new ManualPromise();
@@ -242,3 +242,47 @@ test('should show trace w/ multiple contexts', async ({ runUITest, server, creat
 
   latch.open();
 });
+
+
+test('should show live trace for serial', async ({ runUITest, server, createLatch }) => {
+  const latch = createLatch();
+
+  const { page } = await runUITest({
+    'a.test.ts': `
+      import { test, expect } from '@playwright/test';
+      let page;
+      test.describe.configure({ mode: 'serial' });
+      test.beforeAll(async ({ browser }) => {
+        page = await browser.newPage();
+      });
+      test('one', async ({ }) => {
+        await page.setContent('<input id=checkbox type=checkbox></input>');
+        await page.locator('input').check();
+        await expect(page.locator('input')).toBeChecked();
+      });
+
+      test('two', async ({ }) => {
+        await page.locator('input').uncheck();
+        await expect(page.locator('input')).not.toBeChecked();
+        ${latch.blockingCode}
+      });
+    `,
+  });
+
+  await expect.poll(dumpTestTree(page)).toBe(`
+    ▼ ◯ a.test.ts
+        ◯ one
+        ◯ two
+  `);
+  await page.getByText('two', { exact: true }).click();
+  await page.getByTitle('Run all').click();
+
+  const listItem = page.getByTestId('action-list').getByRole('listitem');
+  await expect(
+      listItem,
+      'action list'
+  ).toHaveText([
+    /locator.unchecklocator\('input'\)[\d.]+m?s/,
+    /expect.not.toBeCheckedlocator\('input'\)[\d.]/,
+  ]);
+});