Rewrote to use lower fidelity but easier URL updating mechanism

Author: agg23

packages/playwright-core/src/server/recorder.ts

@@ -32,7 +32,7 @@ import type * as actions from '@recorder/actions';
 import { stringifySelector } from '../utils/isomorphic/selectorParser';
 import type { Frame } from './frames';
 import type { AriaTemplateNode } from '@isomorphic/ariaSnapshot';
-import { Page } from './page';
+import type { Page } from './page';
 
 const recorderSymbol = Symbol('recorderSymbol');
 
@@ -150,30 +150,6 @@ export class Recorder implements InstrumentationListener, IRecorder {
       this._recorderApp?.close().catch(() => {});
     });
 
-    // Report the URL of the first page in the context
-    let primaryPage: Page | undefined;
-    const registerNavigationListener = (page: Page) => {
-      if (primaryPage === undefined) {
-        primaryPage = page;
-        recorderApp.setBasePageURL(page.mainFrame().url());
-      }
-
-      page.on(Page.Events.InternalFrameNavigatedToNewDocument, (frame: Frame) => {
-        if (page === primaryPage && page.mainFrame() === frame)
-          recorderApp.setBasePageURL(frame.url());
-      });
-      page.on(Page.Events.Close, () => {
-        if (page === primaryPage) {
-          primaryPage = this._context.pages()[0];
-          if (primaryPage)
-            recorderApp.setBasePageURL(primaryPage.mainFrame().url());
-        }
-      });
-    };
-    for (const page of this._context.pages())
-      registerNavigationListener(page);
-    this._context.on(BrowserContext.Events.Page, registerNavigationListener);
-
     this._contextRecorder.on(ContextRecorder.Events.Change, (data: { sources: Source[], actions: actions.ActionInContext[] }) => {
       this._recorderSources = data.sources;
       recorderApp.setActions(data.actions, data.sources);
@@ -372,7 +348,8 @@ export class Recorder implements InstrumentationListener, IRecorder {
   }
 
   private _pushAllSources() {
-    this._recorderApp?.setSources([...this._recorderSources, ...this._userSources.values()]);
+    const primaryPage: Page | undefined = this._context.pages()[0];
+    this._recorderApp?.setSources([...this._recorderSources, ...this._userSources.values()], primaryPage?.mainFrame().url());
   }
 
   async onBeforeInputAction(sdkObject: SdkObject, metadata: CallMetadata) {

packages/playwright-core/src/server/recorder/recorderApp.ts

@@ -37,9 +37,8 @@ export class EmptyRecorderApp extends EventEmitter implements IRecorderApp {
   async setRunningFile(file: string | undefined): Promise<void> {}
   async elementPicked(elementInfo: ElementInfo, userGesture?: boolean): Promise<void> {}
   async updateCallLogs(callLogs: CallLog[]): Promise<void> {}
-  async setSources(sources: Source[]): Promise<void> {}
+  async setSources(sources: Source[], primaryPageURL: string | undefined): Promise<void> {}
   async setActions(actions: actions.ActionInContext[], sources: Source[]): Promise<void> {}
-  async setBasePageURL(url: string): Promise<void> {}
 }
 
 export class RecorderApp extends EventEmitter implements IRecorderApp {
@@ -144,10 +143,10 @@ export class RecorderApp extends EventEmitter implements IRecorderApp {
     }).toString(), { isFunction: true }, paused).catch(() => {});
   }
 
-  async setSources(sources: Source[]): Promise<void> {
-    await this._page.mainFrame().evaluateExpression(((sources: Source[]) => {
-      window.playwrightSetSources(sources);
-    }).toString(), { isFunction: true }, sources).catch(() => {});
+  async setSources(sources: Source[], primaryPageURL: string | undefined): Promise<void> {
+    await this._page.mainFrame().evaluateExpression((({ sources, primaryPageURL }: { sources: Source[], primaryPageURL: string | undefined }) => {
+      window.playwrightSetSources(sources, primaryPageURL);
+    }).toString(), { isFunction: true }, { sources, primaryPageURL }).catch(() => {});
 
     // Testing harness for runCLI mode.
     if (process.env.PWTEST_CLI_IS_UNDER_TEST && sources.length) {
@@ -159,12 +158,6 @@ export class RecorderApp extends EventEmitter implements IRecorderApp {
   async setActions(actions: actions.ActionInContext[], sources: Source[]): Promise<void> {
   }
 
-  async setBasePageURL(url: string): Promise<void> {
-    await this._page.mainFrame().evaluateExpression(((url: string) => {
-      window.playwrightSetBasePageURL(url);
-    }).toString(), { isFunction: true }, url).catch(() => {});
-  }
-
   async elementPicked(elementInfo: ElementInfo, userGesture?: boolean): Promise<void> {
     if (userGesture)
       this._page.bringToFront();

packages/playwright-core/src/server/recorder/recorderFrontend.ts

@@ -32,9 +32,8 @@ export interface IRecorderApp extends EventEmitter {
   setRunningFile(file: string | undefined): Promise<void>;
   elementPicked(elementInfo: ElementInfo, userGesture?: boolean): Promise<void>;
   updateCallLogs(callLogs: CallLog[]): Promise<void>;
-  setSources(sources: Source[]): Promise<void>;
+  setSources(sources: Source[], primaryPageURL: string | undefined): Promise<void>;
   setActions(actions: actions.ActionInContext[], sources: Source[]): Promise<void>;
-  setBasePageURL(url: string): Promise<void>;
 }
 
 export type IRecorderAppFactory = (recorder: IRecorder) => Promise<IRecorderApp>;

packages/recorder/src/main.tsx

@@ -19,18 +19,20 @@ import * as React from 'react';
 import { Recorder } from './recorder';
 import './recorder.css';
 
-export const Main: React.FC = ({
-}) => {
+export const Main: React.FC = ({}) => {
   const [sources, setSources] = React.useState<Source[]>([]);
   const [paused, setPaused] = React.useState(false);
   const [log, setLog] = React.useState(new Map<string, CallLog>());
   const [mode, setMode] = React.useState<Mode>('none');
 
   React.useLayoutEffect(() => {
     window.playwrightSetMode = setMode;
-    window.playwrightSetSources = (sources: Source[]) => {
+    window.playwrightSetSources = (sources, primaryPageURL) => {
       setSources(sources);
       window.playwrightSourcesEchoForTest = sources;
+      document.title = primaryPageURL
+        ? `Playwright Inspector - ${primaryPageURL}`
+        : `Playwright Inspector`;
     };
     window.playwrightSetPaused = setPaused;
     window.playwrightUpdateLogs = callLogs => {
@@ -43,14 +45,7 @@ export const Main: React.FC = ({
         return newLog;
       });
     };
-    window.playwrightSetBasePageURL = (url: string) => {
-      if (url)
-        document.title = `Playwright Inspector - ${url}`;
-      else
-        document.title = `Playwright Inspector`;
-    };
   }, []);
 
-
   return <Recorder sources={sources} paused={paused} log={log} mode={mode} />;
 };

packages/recorder/src/recorderTypes.d.ts

@@ -101,9 +101,8 @@ declare global {
   interface Window {
     playwrightSetMode: (mode: Mode) => void;
     playwrightSetPaused: (paused: boolean) => void;
-    playwrightSetSources: (sources: Source[]) => void;
+    playwrightSetSources: (sources: Source[], primaryPageURL: string | undefined) => void;
     playwrightSetOverlayVisible: (visible: boolean) => void;
-    playwrightSetBasePageURL: (url: string) => void;
     playwrightUpdateLogs: (callLogs: CallLog[]) => void;
     playwrightSetRunningFile: (file: string | undefined) => void;
     playwrightElementPicked: (elementInfo: ElementInfo, userGesture?: boolean) => void;

tests/library/inspector/title.spec.ts

@@ -16,38 +16,68 @@
 
 import { test, expect } from './inspectorTest';
 
-test('should reflect formatted URL of the page', async ({ openRecorder, server }) => {
+test('should reflect formatted URL of the page', async ({
+  openRecorder,
+  server,
+}) => {
   const { recorder } = await openRecorder();
   await recorder.setContentAndWait('');
-  await expect(await recorder.recorderPage.title()).toBe('Playwright Inspector - about:blank');
+  await expect(recorder.recorderPage).toHaveTitle(
+      'Playwright Inspector - about:blank',
+  );
 
   await recorder.setContentAndWait('', server.EMPTY_PAGE);
-  await expect(await recorder.recorderPage.title()).toBe(`Playwright Inspector - ${server.EMPTY_PAGE}`);
+  await expect(recorder.recorderPage).toHaveTitle(
+      `Playwright Inspector - ${server.EMPTY_PAGE}`,
+  );
 });
 
-test('should update primary page URL when original primary closes', async ({ context, openRecorder, server }) => {
+test('should update primary page URL when original primary closes', async ({
+  context,
+  openRecorder,
+  server,
+}) => {
   const { recorder } = await openRecorder();
-  await recorder.setContentAndWait('', `${server.PREFIX}/background-color.html`);
-  await expect(await recorder.recorderPage.title()).toBe(`Playwright Inspector - ${server.PREFIX}/background-color.html`);
+  await recorder.setContentAndWait(
+      '',
+      `${server.PREFIX}/background-color.html`,
+  );
+  await expect(recorder.recorderPage).toHaveTitle(
+      `Playwright Inspector - ${server.PREFIX}/background-color.html`,
+  );
 
   const page2 = await context.newPage();
   await page2.goto(`${server.PREFIX}/empty.html`);
-  await expect(await recorder.recorderPage.title()).toBe(`Playwright Inspector - ${server.PREFIX}/background-color.html`);
+  await expect(recorder.recorderPage).toHaveTitle(
+      `Playwright Inspector - ${server.PREFIX}/background-color.html`,
+  );
 
   const page3 = await context.newPage();
   await page3.goto(`${server.PREFIX}/dom.html`);
-  await expect(await recorder.recorderPage.title()).toBe(`Playwright Inspector - ${server.PREFIX}/background-color.html`);
+  await expect(recorder.recorderPage).toHaveTitle(
+      `Playwright Inspector - ${server.PREFIX}/background-color.html`,
+  );
 
   const page4 = await context.newPage();
   await page4.goto(`${server.PREFIX}/grid.html`);
-  await expect(await recorder.recorderPage.title()).toBe(`Playwright Inspector - ${server.PREFIX}/background-color.html`);
+  await expect(recorder.recorderPage).toHaveTitle(
+      `Playwright Inspector - ${server.PREFIX}/background-color.html`,
+  );
 
   await page2.close();
-  await expect(await recorder.recorderPage.title()).toBe(`Playwright Inspector - ${server.PREFIX}/background-color.html`);
+  await expect(recorder.recorderPage).toHaveTitle(
+      `Playwright Inspector - ${server.PREFIX}/background-color.html`,
+  );
 
   await recorder.page.close();
-  await expect(await recorder.recorderPage.title()).toBe(`Playwright Inspector - ${server.PREFIX}/dom.html`);
+  // URL will not update without performing some action
+  await page3.getByRole('checkbox').click();
+  await expect(recorder.recorderPage).toHaveTitle(
+      `Playwright Inspector - ${server.PREFIX}/dom.html`,
+  );
 
   await page3.close();
-  await expect(await recorder.recorderPage.title()).toBe(`Playwright Inspector - ${server.PREFIX}/grid.html`);
+  await expect(recorder.recorderPage).toHaveTitle(
+      `Playwright Inspector - ${server.PREFIX}/grid.html`,
+  );
 });