modify and export recorder

.gitignore

@@ -12,6 +12,7 @@ yarn.lock
 /packages/playwright-core/src/generated
 /packages/playwright-ct-core/src/generated
 packages/*/lib/
+# !packages/playwright-core/lib/
 drivers/
 .android-sdk/
 .gradle/

packages/playwright-core/package.json

@@ -32,6 +32,7 @@
     "./lib/remote/playwrightServer": "./lib/remote/playwrightServer.js",
     "./lib/server": "./lib/server/index.js",
     "./lib/utils": "./lib/utils/index.js",
+    "./lib/server/recorder/javascript": "./lib/server/recorder/javascript.js",
     "./lib/utilsBundle": "./lib/utilsBundle.js",
     "./lib/zipBundle": "./lib/zipBundle.js",
     "./types/protocol": "./types/protocol.d.ts",

packages/playwright-core/src/cli/program.ts

@@ -571,6 +571,7 @@ async function codegen(options: Options & { target: string, output?: string, tes
     testIdAttributeName,
     outputFile: outputFile ? path.resolve(outputFile) : undefined,
     handleSIGINT: false,
+    showRecorder: true,
   });
   await openPage(context, url);
 }

packages/playwright-core/src/client/browserContext.ts

@@ -459,17 +459,7 @@ export class BrowserContext extends ChannelOwner<channels.BrowserContextChannel>
     await this._closedPromise;
   }
 
-  async _enableRecorder(params: {
-      language: string,
-      launchOptions?: LaunchOptions,
-      contextOptions?: BrowserContextOptions,
-      device?: string,
-      saveStorage?: string,
-      mode?: 'recording' | 'inspecting',
-      testIdAttributeName?: string,
-      outputFile?: string,
-      handleSIGINT?: boolean,
-  }) {
+  async _enableRecorder(params: channels.BrowserContextRecorderSupplementEnableParams) {
     await this._channel.recorderSupplementEnable(params);
   }
 }

packages/playwright-core/src/protocol/validator.ts

@@ -921,6 +921,8 @@ scheme.BrowserContextRecorderSupplementEnableParams = tObject({
   outputFile: tOptional(tString),
   handleSIGINT: tOptional(tBoolean),
   omitCallTracking: tOptional(tBoolean),
+  showRecorder: tOptional(tBoolean),
+  actionListener: tOptional(tAny),
 });
 scheme.BrowserContextRecorderSupplementEnableResult = tOptional(tObject({}));
 scheme.BrowserContextNewCDPSessionParams = tObject({

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

@@ -83,7 +83,7 @@ export class Recorder implements InstrumentationListener {
     let recorderPromise = (context as any)[recorderSymbol] as Promise<Recorder>;
     if (!recorderPromise) {
       const recorder = new Recorder(context, params);
-      recorderPromise = recorder.install().then(() => recorder);
+      recorderPromise = recorder.install(Boolean(params.showRecorder)).then(() => recorder);
       (context as any)[recorderSymbol] = recorderPromise;
     }
     return recorderPromise;
@@ -105,13 +105,14 @@ export class Recorder implements InstrumentationListener {
     }
   }
 
+
   private static async defaultRecorderAppFactory(recorder: Recorder) {
     if (process.env.PW_CODEGEN_NO_INSPECTOR)
       return new EmptyRecorderApp();
     return await RecorderApp.open(recorder, recorder._context, recorder._handleSIGINT);
   }
 
-  async install() {
+  async installRecorder() {
     const recorderApp = await (Recorder.recorderAppFactory || Recorder.defaultRecorderAppFactory)(this);
     this._recorderApp = recorderApp;
     recorderApp.once('close', () => {
@@ -156,10 +157,16 @@ export class Recorder implements InstrumentationListener {
       this._pushAllSources()
     ]);
 
+    (this._context as any).recorderAppForTest = this._recorderApp;
+  }
+
+  async install(showRecorder: Boolean) {
+  if (showRecorder)
+    await this.installRecorder();
     this._context.once(BrowserContext.Events.Close, () => {
       this._contextRecorder.dispose();
       this._context.instrumentation.removeListener(this);
-      recorderApp.close().catch(() => {});
+      this._recorderApp?.close().catch(() => {});
     });
     this._contextRecorder.on(ContextRecorder.Events.Change, (data: { sources: Source[], primaryFileName: string }) => {
       this._recorderSources = data.sources;
@@ -200,6 +207,7 @@ export class Recorder implements InstrumentationListener {
       }
       const fullSelector = (await Promise.all(selectorPromises)).filter(Boolean);
       fullSelector.push(selector);
+      this._contextRecorder.emitSelector(selector);
       await this._recorderApp?.setSelector(fullSelector.join(' >> internal:control=enter-frame >> '), true);
     });
 
@@ -215,6 +223,11 @@ export class Recorder implements InstrumentationListener {
       this._overlayState = state;
     });
 
+    // added for synthetics
+    await this._context.exposeBinding('__pw_setMode', false, async  (_, mode: Mode) => {
+      this.setMode(mode);
+    });
+
     await this._context.exposeBinding('__pw_resume', false, () => {
       this._debugger.resume(false);
     });
@@ -225,8 +238,6 @@ export class Recorder implements InstrumentationListener {
     if (this._debugger.isPaused())
       this._pausedStateChanged();
     this._debugger.on(Debugger.Events.PausedStateChanged, () => this._pausedStateChanged());
-
-    (this._context as any).recorderAppForTest = recorderApp;
   }
 
   _pausedStateChanged() {
@@ -395,7 +406,7 @@ class ContextRecorder extends EventEmitter {
     this._recorderSources = [];
     const language = params.language || context.attribution.playwright.options.sdkLanguage;
     this.setOutput(language, params.outputFile);
-    const generator = new CodeGenerator(context._browser.options.name, params.mode === 'recording', params.launchOptions || {}, params.contextOptions || {}, params.device, params.saveStorage);
+    const generator = new CodeGenerator(context._browser.options.name, params.mode === 'recording', params.launchOptions || {}, params.contextOptions || {}, params.device, params.saveStorage, params.actionListener);
     generator.on('change', () => {
       this._recorderSources = [];
       for (const languageGenerator of this._orderedLanguages) {
@@ -491,6 +502,10 @@ class ContextRecorder extends EventEmitter {
     eventsHelper.removeEventListeners(this._listeners);
   }
 
+  emitSelector(selector: string) {
+    this._params.actionListener?.emit('selector', selector);
+  }
+
   private async _onPage(page: Page) {
     // First page is called page, others are called popup1, popup2, etc.
     const frame = page.mainFrame();

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

@@ -33,14 +33,14 @@ export class CodeGenerator extends EventEmitter {
   private _enabled: boolean;
   private _options: LanguageGeneratorOptions;
 
-  constructor(browserName: string, enabled: boolean, launchOptions: LaunchOptions, contextOptions: BrowserContextOptions, deviceName: string | undefined, saveStorage: string | undefined) {
+  constructor(browserName: string, enabled: boolean, launchOptions: LaunchOptions, contextOptions: BrowserContextOptions, deviceName: string | undefined, saveStorage: string | undefined, actionListener: EventEmitter | undefined) {
     super();
 
     // Make a copy of options to modify them later.
     launchOptions = { headless: false, ...launchOptions };
     contextOptions = { ...contextOptions };
     this._enabled = enabled;
-    this._options = { browserName, launchOptions, contextOptions, deviceName, saveStorage };
+    this._options = { browserName, launchOptions, contextOptions, deviceName, saveStorage, actionListener };
     this.restart();
   }
 
@@ -111,6 +111,7 @@ export class CodeGenerator extends EventEmitter {
       this._actions.pop();
     this._actions.push(actionInContext);
     this.emit('change');
+    this._options.actionListener?.emit('actions', this._actions);
   }
 
   commitLastAction() {
@@ -138,6 +139,7 @@ export class CodeGenerator extends EventEmitter {
         signals.length = signals.length - 1;
       this._lastAction.action.signals.push(signal);
       this.emit('change');
+      this._options.actionListener?.emit('actions', this._actions);
       return;
     }
 

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

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { EventEmitter } from 'stream';
 import type { BrowserContextOptions, LaunchOptions } from '../../..';
 import type { Language } from '../../utils/isomorphic/locatorGenerators';
 import type { ActionInContext } from './codeGenerator';
@@ -26,6 +27,7 @@ export type LanguageGeneratorOptions = {
   contextOptions: BrowserContextOptions;
   deviceName?: string;
   saveStorage?: string;
+  actionListener?: EventEmitter;
 };
 
 export type LocatorType = 'default' | 'role' | 'text' | 'label' | 'placeholder' | 'alt' | 'title' | 'test-id' | 'nth' | 'first' | 'last' | 'has-text';

packages/protocol/src/channels.ts

@@ -1665,6 +1665,8 @@ export type BrowserContextRecorderSupplementEnableParams = {
   outputFile?: string,
   handleSIGINT?: boolean,
   omitCallTracking?: boolean,
+  showRecorder?: boolean,
+  actionListener?: any,
 };
 export type BrowserContextRecorderSupplementEnableOptions = {
   language?: string,
@@ -1678,6 +1680,8 @@ export type BrowserContextRecorderSupplementEnableOptions = {
   outputFile?: string,
   handleSIGINT?: boolean,
   omitCallTracking?: boolean,
+  showRecorder?: boolean,
+  actionListener?: any,
 };
 export type BrowserContextRecorderSupplementEnableResult = void;
 export type BrowserContextNewCDPSessionParams = {

packages/protocol/src/protocol.yml

@@ -1150,6 +1150,8 @@ BrowserContext:
         outputFile: string?
         handleSIGINT: boolean?
         omitCallTracking: boolean?
+        showRecorder: boolean?
+        actionListener: json?
 
     newCDPSession:
       parameters: