fix(html report): generate test snippets when test dir is non-root (#33162)

packages/html-reporter/src/testErrorView.tsx

@@ -22,9 +22,10 @@ import { ImageDiffView } from '@web/shared/imageDiffView';
 
 export const TestErrorView: React.FC<{
   error: string;
-}> = ({ error }) => {
+  testId?: string;
+}> = ({ error, testId }) => {
   const html = React.useMemo(() => ansiErrorToHtml(error), [error]);
-  return <div className='test-error-view test-error-text' dangerouslySetInnerHTML={{ __html: html || '' }}></div>;
+  return <div className='test-error-view test-error-text' data-testId={testId} dangerouslySetInnerHTML={{ __html: html || '' }}></div>;
 };
 
 export const TestScreenshotErrorView: React.FC<{

packages/html-reporter/src/testResultView.tsx

@@ -186,7 +186,7 @@ const StepTreeItem: React.FC<{
   </span>} loadChildren={step.steps.length + (step.snippet ? 1 : 0) ? () => {
     const children = step.steps.map((s, i) => <StepTreeItem key={i} step={s} depth={depth + 1}></StepTreeItem>);
     if (step.snippet)
-      children.unshift(<TestErrorView key='line' error={step.snippet}></TestErrorView>);
+      children.unshift(<TestErrorView testId='test-snippet' key='line' error={step.snippet}></TestErrorView>);
     return children;
   } : undefined} depth={depth}></TreeItem>;
 };

packages/playwright/src/reporters/html.ts

@@ -505,8 +505,8 @@ class HtmlBuilder {
       error: step.error?.message,
       count
     };
-    if (result.location)
-      this._stepsInFile.set(result.location.file, result);
+    if (step.location)
+      this._stepsInFile.set(step.location.file, result);
     return result;
   }
 

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

@@ -43,7 +43,7 @@ const expect = baseExpect.configure({ timeout: process.env.CI ? 75000 : 25000 })
 
 test.describe.configure({ mode: 'parallel' });
 
-for (const useIntermediateMergeReport of [false] as const) {
+for (const useIntermediateMergeReport of [true, false] as const) {
   test.describe(`${useIntermediateMergeReport ? 'merged' : 'created'}`, () => {
     test.use({ useIntermediateMergeReport });
 
@@ -612,7 +612,7 @@ for (const useIntermediateMergeReport of [false] as const) {
             ]);
           });
         `,
-      }, { reporter: 'html' }, { PLAYWRIGHT_HTML_OPEN: 'never' });
+      }, { reporter: 'html,dot' }, { PLAYWRIGHT_HTML_OPEN: 'never' });
       expect(result.exitCode).toBe(0);
       expect(result.passed).toBe(1);
 
@@ -727,6 +727,34 @@ for (const useIntermediateMergeReport of [false] as const) {
       ]);
     });
 
+    test('should show step snippets from non-root', async ({ runInlineTest, page, showReport }) => {
+      const result = await runInlineTest({
+        'playwright.config.js': `
+          export default { testDir: './tests' };
+        `,
+        'tests/a.test.ts': `
+          import { test, expect } from '@playwright/test';
+
+          test('example', async ({}) => {
+            await test.step('step title', async () => {
+              expect(1).toBe(1);
+            });
+          });
+        `,
+      }, { reporter: 'dot,html' }, { PLAYWRIGHT_HTML_OPEN: 'never' });
+      expect(result.exitCode).toBe(0);
+      expect(result.passed).toBe(1);
+
+      await showReport();
+      await page.click('text=example');
+      await page.click('text=step title');
+      await page.click('text=expect.toBe');
+      await expect(page.getByTestId('test-snippet')).toContainText([
+        `await test.step('step title', async () => {`,
+        'expect(1).toBe(1);',
+      ]);
+    });
+
     test('should render annotations', async ({ runInlineTest, page, showReport }) => {
       const result = await runInlineTest({
         'playwright.config.js': `