fix(html-report): open all test traces in one viewer (#12142)

packages/html-reporter/src/links.tsx

@@ -68,10 +68,11 @@ export const ProjectLink: React.FunctionComponent<{
 export const AttachmentLink: React.FunctionComponent<{
   attachment: TestAttachment,
   href?: string,
-}> = ({ attachment, href }) => {
+  linkName?: string,
+}> = ({ attachment, href, linkName }) => {
   return <TreeItem title={<span>
     {attachment.contentType === kMissingContentType ? icons.warning() : icons.attachment()}
-    {attachment.path && <a href={href || attachment.path} target='_blank'>{attachment.name}</a>}
+    {attachment.path && <a href={href || attachment.path} target='_blank'>{linkName || attachment.name}</a>}
     {attachment.body && <span>{attachment.name}</span>}
   </span>} loadChildren={attachment.body ? () => {
     return [<div className='attachment-body'>{attachment.body}</div>];

packages/html-reporter/src/testResultView.tsx

@@ -75,12 +75,12 @@ export const TestResultView: React.FC<{
     </AutoChip>}
 
     {!!traces.length && <AutoChip header='Traces'>
-      {traces.map((a, i) => <div key={`trace-${i}`}>
+      {<div>
-        <a href={`trace/index.html?trace=${new URL(a.path!, window.location.href)}`}>
+        <a href={`trace/index.html?${traces.map((a, i) => `trace=${new URL(a.path!, window.location.href)}`).join('&')}`}>
           <img src={traceImage} style={{ width: 192, height: 117, marginLeft: 20 }} />
         </a>
-        <AttachmentLink attachment={a}></AttachmentLink>
+        {traces.map((a, i) => <AttachmentLink key={`trace-${i}`} attachment={a} linkName={traces.length === 1 ? 'trace' : `trace-${i + 1}`}></AttachmentLink>)}
-      </div>)}
+      </div>}
     </AutoChip>}
 
     {!!videos.length && <AutoChip header='Videos'>

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

@@ -279,6 +279,40 @@ test('should show trace title', async ({ runInlineTest, page, showReport }) => {
   await expect(page.locator('.workbench .title')).toHaveText('a.test.js:6 › passes');
 });
 
+test('should show multi trace source', async ({ runInlineTest, page, server, showReport }) => {
+  const result = await runInlineTest({
+    'playwright.config.js': `
+      module.exports = { use: { trace: 'on' } };
+    `,
+    'a.test.js': `
+      const { test } = pwt;
+      test('passes', async ({ playwright, page }) => {
+        await page.evaluate('2 + 2');
+        const request = await playwright.request.newContext();
+        await request.get('${server.EMPTY_PAGE}');
+        await request.dispose();
+      });
+    `,
+  }, { reporter: 'dot,html' });
+  expect(result.exitCode).toBe(0);
+  expect(result.passed).toBe(1);
+
+  await showReport();
+  await page.click('text=passes');
+  // Expect one image-link to trace viewer and 2 separate download links
+  await expect(page.locator('img')).toHaveCount(1);
+  await expect(page.locator('a', { hasText: 'trace' })).toHaveText(['trace-1', 'trace-2']);
+
+  await page.click('img');
+  await page.click('.action-title >> text=page.evaluate');
+  await page.click('text=Source');
+  await expect(page.locator('.source-line-running')).toContainText('page.evaluate');
+
+  await page.click('.action-title >> text=apiRequestContext.get');
+  await page.click('text=Source');
+  await expect(page.locator('.source-line-running')).toContainText('request.get');
+});
+
 test('should show timed out steps', async ({ runInlineTest, page, showReport }) => {
   const result = await runInlineTest({
     'playwright.config.js': `