cherry-pick(#31970): fix(trace): do not place expect into unfinished … (#31974)

…api calls based on time

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

packages/playwright/src/index.ts

@@ -261,6 +261,7 @@ const playwrightFixtures: Fixtures<TestFixtures, WorkerFixtures> = ({
           title: renderApiCall(apiName, params),
           apiName,
           params,
+          canNestByTime: true,
         });
         userData.userObject = step;
         out.stepId = step.stepId;

packages/playwright/src/worker/testInfo.ts

@@ -33,7 +33,7 @@ export interface TestStepInternal {
   complete(result: { error?: Error, attachments?: Attachment[] }): void;
   stepId: string;
   title: string;
-  category: 'hook' | 'fixture' | 'test.step' | 'expect' | string;
+  category: 'hook' | 'fixture' | 'test.step' | 'expect' | 'attach' | string;
   location?: Location;
   boxedStack?: StackFrame[];
   steps: TestStepInternal[];
@@ -44,6 +44,9 @@ export interface TestStepInternal {
   infectParentStepsWithError?: boolean;
   box?: boolean;
   isStage?: boolean;
+  // TODO: this сould be decided based on the category, but pw:api
+  // is from a different abstraction layer.
+  canNestByTime?: boolean;
 }
 
 export type TestStage = {
@@ -252,7 +255,7 @@ export class TestInfoImpl implements TestInfo {
       parentStep = this._findLastStageStep();
     } else {
       parentStep = zones.zoneData<TestStepInternal>('stepZone');
-      if (!parentStep && data.category !== 'test.step') {
+      if (!parentStep && data.canNestByTime) {
         // API steps (but not test.step calls) can be nested by time, instead of by stack.
         // However, do not nest chains of route.continue by checking the title.
         parentStep = this._findLastNonFinishedStep(step => step.title !== data.title);

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

@@ -1178,3 +1178,51 @@ test('should record trace for manually created context in a failed test', async
   // Check console events to make sure that library trace is recorded.
   expect(trace.events).toContainEqual(expect.objectContaining({ type: 'console', text: 'from the page' }));
 });
+
+test('should not nest top level expect into unfinished api calls ', {
+  annotation: { type: 'issue', description: 'https://github.com/microsoft/playwright/issues/31959' }
+}, async ({ runInlineTest, server }) => {
+  server.setRoute('/index', (req, res) => {
+    res.writeHead(200, { 'Content-Type': 'text/html' });
+    res.end(`<script>fetch('/api')</script><div>Hello!</div>`);
+  });
+  server.setRoute('/hang', () => {});
+  const result = await runInlineTest({
+    'a.spec.ts': `
+      import { test, expect } from '@playwright/test';
+      test('pass', async ({ page }) => {
+        await page.route('**/api', async route => {
+          const response = await route.fetch({ url: '${server.PREFIX}/hang' });
+          await route.fulfill({ response });
+        });
+        await page.goto('${server.PREFIX}/index');
+        await expect(page.getByText('Hello!')).toBeVisible();
+        await page.unrouteAll({ behavior: 'ignoreErrors' });
+      });
+    `,
+  }, { trace: 'on' });
+  expect(result.exitCode).toBe(0);
+  expect(result.failed).toBe(0);
+
+  const tracePath = test.info().outputPath('test-results', 'a-pass', 'trace.zip');
+  const trace = await parseTrace(tracePath);
+  expect(trace.actionTree).toEqual([
+    'Before Hooks',
+    '  fixture: browser',
+    '    browserType.launch',
+    '  fixture: context',
+    '    browser.newContext',
+    '  fixture: page',
+    '    browserContext.newPage',
+    'page.route',
+    'page.goto',
+    '  route.fetch',
+    '    page.unrouteAll',
+    'expect.toBeVisible',
+    'After Hooks',
+    '  fixture: page',
+    '  fixture: context',
+  ]);
+});
+
+