feat(trace): instantiate consoleAPI in popout with correct testIdAttr…

…ibute (#23238)
microsoft · May 23, 2023 · 848f1df · 848f1df
1 parent b1db4a8
commit 848f1df
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/packages/playwright-core/src/server/trace/viewer/traceViewer.ts b/packages/playwright-core/src/server/trace/viewer/traceViewer.ts
@@ -16,7 +16,6 @@
 
 import path from 'path';
 import fs from 'fs';
-import * as consoleApiSource from '../../../generated/consoleApiSource';
 import { HttpServer } from '../../../utils/httpServer';
 import { findChromiumChannel } from '../../registry';
 import { isUnderTest } from '../../../utils';
@@ -96,7 +95,6 @@ export async function showTraceViewer(traceUrls: string[], browserName: string,
   await controller.run(async progress => {
     await context._browser._defaultContext!._loadDefaultContextAsIs(progress);
   });
-  await context.extendInjectedScript(consoleApiSource.source);
   const [page] = context.pages();
 
   if (process.env.PWTEST_PRINT_WS_ENDPOINT)

diff --git a/packages/trace-viewer/src/ui/snapshotTab.tsx b/packages/trace-viewer/src/ui/snapshotTab.tsx
@@ -24,6 +24,7 @@ import { ToolbarButton } from '@web/components/toolbarButton';
 import { copy, useMeasure } from '@web/uiUtils';
 import { InjectedScript } from '@injected/injectedScript';
 import { Recorder  } from '@injected/recorder';
+import ConsoleAPI from '@injected/consoleApi';
 import { asLocator } from '@isomorphic/locatorGenerators';
 import type { Language } from '@isomorphic/locatorGenerators';
 import { locatorOrSelectorAsSelector } from '@isomorphic/locatorParser';
@@ -183,7 +184,11 @@ export const SnapshotTab: React.FunctionComponent<{
       })}
       <div style={{ flex: 'auto' }}></div>
       <ToolbarButton icon='link-external' title='Open snapshot in a new tab' disabled={!popoutUrl} onClick={() => {
-        window.open(popoutUrl || '', '_blank');
+        const win = window.open(popoutUrl || '', '_blank');
+        win?.addEventListener('DOMContentLoaded', () => {
+          const injectedScript = new InjectedScript(win as any, false, sdkLanguage, testIdAttributeName, 1, 'chromium', []);
+          new ConsoleAPI(injectedScript);
+        });
       }}></ToolbarButton>
     </Toolbar>
     {pickerVisible && <Toolbar noMinHeight={true}>