chore: implement lightweight recording mode (microsoft#36463)

pavelfeldman · web-flow · commit 3a02f89ff75e · 2025-06-27T13:40:43.000-07:00
diff --git a/packages/injected/src/recorder/recorder.ts b/packages/injected/src/recorder/recorder.ts
@@ -245,7 +245,7 @@ class RecordActionTool implements RecorderTool {
       return;
 
     const checkbox = asCheckbox(this._recorder.deepEventTarget(event));
-    if (checkbox) {
+    if (checkbox && event.detail === 1) {
       // Interestingly, inputElement.checked is reversed inside this event handler.
       this._performAction({
         name: checkbox.checked ? 'check' : 'uncheck',
@@ -335,30 +335,26 @@ class RecordActionTool implements RecorderTool {
   onPointerDown(event: PointerEvent) {
     if (this._shouldIgnoreMouseEvent(event))
       return;
-    if (!this._performingActions.size)
-      consumeEvent(event);
+    this._consumeWhenAboutToPerform(event);
   }
 
   onPointerUp(event: PointerEvent) {
     if (this._shouldIgnoreMouseEvent(event))
       return;
-    if (!this._performingActions.size)
-      consumeEvent(event);
+    this._consumeWhenAboutToPerform(event);
   }
 
   onMouseDown(event: MouseEvent) {
     if (this._shouldIgnoreMouseEvent(event))
       return;
-    if (!this._performingActions.size)
-      consumeEvent(event);
+    this._consumeWhenAboutToPerform(event);
     this._activeModel = this._hoveredModel;
   }
 
   onMouseUp(event: MouseEvent) {
     if (this._shouldIgnoreMouseEvent(event))
       return;
-    if (!this._performingActions.size)
-      consumeEvent(event);
+    this._consumeWhenAboutToPerform(event);
   }
 
   onMouseMove(event: MouseEvent) {
@@ -448,7 +444,7 @@ class RecordActionTool implements RecorderTool {
     // Similarly to click, trigger checkbox on key event, not input.
     if (event.key === ' ') {
       const checkbox = asCheckbox(this._recorder.deepEventTarget(event));
-      if (checkbox) {
+      if (checkbox && event.detail === 0) {
         this._performAction({
           name: checkbox.checked ? 'uncheck' : 'check',
           selector: this._activeModel!.selector,
@@ -472,7 +468,7 @@ class RecordActionTool implements RecorderTool {
       return;
 
     // Only allow programmatic keyups, ignore user input.
-    if (!this._expectProgrammaticKeyUp) {
+    if (this._recorder.state.recorderMode === 'perform' && !this._expectProgrammaticKeyUp) {
       consumeEvent(event);
       return;
     }
@@ -486,7 +482,7 @@ class RecordActionTool implements RecorderTool {
   private _resetHoveredModel() {
     this._hoveredModel = null;
     this._hoveredElement = null;
-    this._recorder.updateHighlight(null, false);
+    this._updateHighlight(false);
   }
 
   private _onFocus(userGesture: boolean) {
@@ -525,7 +521,8 @@ class RecordActionTool implements RecorderTool {
     }
 
     // Consume event if action is not being executed.
-    consumeEvent(event);
+    if (this._recorder.state.recorderMode === 'perform')
+      consumeEvent(event);
     return false;
   }
 
@@ -543,23 +540,40 @@ class RecordActionTool implements RecorderTool {
     return true;
   }
 
+  private _consumeWhenAboutToPerform(event: Event) {
+    if (!this._performingActions.size && this._recorder.state.recorderMode === 'perform')
+      consumeEvent(event);
+  }
+
   private _performAction(action: actions.PerformOnRecordAction) {
     this._recorder.updateHighlight(null, false);
+
+    let promise = Promise.resolve();
+    if (this._recorder.state.recorderMode === 'perform')
+      promise = this._innerPerformAction(action);
+    else
+      this._recorder.recordAction(action);
+
+    if (!this._recorder.injectedScript.isUnderTest)
+      return;
+
+    void promise.then(() => {
+      // Serialize all to string as we cannot attribute console message to isolated world
+      // in Firefox.
+      console.error('Action performed for test: ' + JSON.stringify({ // eslint-disable-line no-console
+        hovered: this._hoveredModel ? (this._hoveredModel as any).selector : null,
+        active: this._activeModel ? (this._activeModel as any).selector : null,
+      }));
+    });
+  }
+
+  private async _innerPerformAction(action: actions.PerformOnRecordAction) {
     this._performingActions.add(action);
-    void this._recorder.performAction(action).then(() => {
-      this._performingActions.delete(action);
 
+    return this._recorder.performAction(action).then(() => {
+      this._performingActions.delete(action);
       // If that was a keyboard action, it similarly requires new selectors for active model.
       this._onFocus(false);
-
-      if (this._recorder.injectedScript.isUnderTest) {
-        // Serialize all to string as we cannot attribute console message to isolated world
-        // in Firefox.
-        console.error('Action performed for test: ' + JSON.stringify({ // eslint-disable-line no-console
-          hovered: this._hoveredModel ? (this._hoveredModel as any).selector : null,
-          active: this._activeModel ? (this._activeModel as any).selector : null,
-        }));
-      }
     });
   }
 
@@ -601,14 +615,19 @@ class RecordActionTool implements RecorderTool {
     if (!this._hoveredElement || !this._hoveredElement.isConnected) {
       this._hoveredModel = null;
       this._hoveredElement = null;
-      this._recorder.updateHighlight(null, true);
+      this._updateHighlight(true);
       return;
     }
     const { selector, elements } = this._recorder.injectedScript.generateSelector(this._hoveredElement, { testIdAttributeName: this._recorder.state.testIdAttributeName });
     if (this._hoveredModel && this._hoveredModel.selector === selector)
       return;
     this._hoveredModel = selector ? { selector, elements, color: HighlightColors.action } : null;
-    this._recorder.updateHighlight(this._hoveredModel, true);
+    this._updateHighlight(true);
+  }
+
+  private _updateHighlight(userGesture: boolean) {
+    if (this._recorder.state.recorderMode === 'perform' || this._recorder.injectedScript.isUnderTest)
+      this._recorder.updateHighlight(this._hoveredModel, userGesture);
   }
 }
 
@@ -1041,6 +1060,7 @@ export class Recorder {
   private _stylesheet: CSSStyleSheet;
   state: UIState = {
     mode: 'none',
+    recorderMode: 'perform',
     testIdAttributeName: 'data-testid',
     language: 'javascript',
     overlay: { offsetX: 0 },
diff --git a/packages/playwright-core/src/protocol/validator.ts b/packages/playwright-core/src/protocol/validator.ts
@@ -1085,6 +1085,7 @@ scheme.BrowserContextPauseResult = tOptional(tObject({}));
 scheme.BrowserContextEnableRecorderParams = tObject({
   language: tOptional(tString),
   mode: tOptional(tEnum(['inspecting', 'recording'])),
+  recorderMode: tOptional(tEnum(['record', 'perform'])),
   pauseOnNextStatement: tOptional(tBoolean),
   testIdAttributeName: tOptional(tString),
   launchOptions: tOptional(tAny),
diff --git a/packages/playwright-core/src/server/recorder.ts b/packages/playwright-core/src/server/recorder.ts
@@ -53,6 +53,7 @@ export class Recorder implements InstrumentationListener, IRecorder {
   private _contextRecorder: ContextRecorder;
   private _omitCallTracking = false;
   private _currentLanguage: Language;
+  private _recorderMode: 'record' | 'perform';
 
   static async showInspector(context: BrowserContext, params: channels.BrowserContextEnableRecorderParams, recorderAppFactory: IRecorderAppFactory) {
     if (isUnderTest())
@@ -82,6 +83,7 @@ export class Recorder implements InstrumentationListener, IRecorder {
 
   constructor(context: BrowserContext, params: channels.BrowserContextEnableRecorderParams) {
     this._mode = params.mode || 'none';
+    this._recorderMode = params.recorderMode ?? 'perform';
     this.handleSIGINT = params.handleSIGINT;
     this._contextRecorder = new ContextRecorder(context, params, {});
     this._context = context;
@@ -177,6 +179,7 @@ export class Recorder implements InstrumentationListener, IRecorder {
         }
         const uiState: UIState = {
           mode: this._mode,
+          recorderMode: this._recorderMode,
           actionPoint,
           actionSelector,
           ariaTemplate: this._highlightedElement.ariaTemplate,
diff --git a/packages/protocol/src/channels.d.ts b/packages/protocol/src/channels.d.ts
@@ -1887,6 +1887,7 @@ export type BrowserContextPauseResult = void;
 export type BrowserContextEnableRecorderParams = {
   language?: string,
   mode?: 'inspecting' | 'recording',
+  recorderMode?: 'record' | 'perform',
   pauseOnNextStatement?: boolean,
   testIdAttributeName?: string,
   launchOptions?: any,
@@ -1900,6 +1901,7 @@ export type BrowserContextEnableRecorderParams = {
 export type BrowserContextEnableRecorderOptions = {
   language?: string,
   mode?: 'inspecting' | 'recording',
+  recorderMode?: 'record' | 'perform',
   pauseOnNextStatement?: boolean,
   testIdAttributeName?: string,
   launchOptions?: any,
diff --git a/packages/protocol/src/protocol.yml b/packages/protocol/src/protocol.yml
@@ -1366,6 +1366,11 @@ BrowserContext:
           literals:
           - inspecting
           - recording
+        recorderMode:
+          type: enum?
+          literals:
+          - record
+          - perform
         pauseOnNextStatement: boolean?
         testIdAttributeName: string?
         launchOptions: json?
diff --git a/packages/recorder/src/recorderTypes.d.ts b/packages/recorder/src/recorderTypes.d.ts
@@ -53,6 +53,7 @@ export type OverlayState = {
 
 export type UIState = {
   mode: Mode;
+  recorderMode: 'record' | 'perform';
   actionPoint?: Point;
   actionSelector?: string;
   ariaTemplate?: AriaTemplateNode;
diff --git a/packages/trace-viewer/src/ui/snapshotTab.tsx b/packages/trace-viewer/src/ui/snapshotTab.tsx
@@ -254,6 +254,7 @@ export const InspectModeController: React.FunctionComponent<{
       const ariaTemplate = parsedSnapshot?.errors.length === 0 ? parsedSnapshot.fragment : undefined;
       recorder.setUIState({
         mode: isInspecting ? 'inspecting' : 'none',
+        recorderMode: 'perform',
         actionSelector,
         ariaTemplate,
         language: sdkLanguage,
diff --git a/tests/library/inspector/cli-codegen-1.spec.ts b/tests/library/inspector/cli-codegen-1.spec.ts
@@ -14,11 +14,12 @@
  * limitations under the License.
  */
 
-import { test, expect } from './inspectorTest';
+import { test, expect, matrixDescribe } from './inspectorTest';
 import type { ConsoleMessage } from 'playwright';
 
-test.describe('cli codegen', () => {
+matrixDescribe<('record' | 'perform')>('cli codegen', ['record', 'perform'], recorderMode => {
   test.skip(({ mode }) => mode !== 'default');
+  test.use({ recorderMode });
 
   test('should click', async ({ openRecorder }) => {
     const { page, recorder } = await openRecorder();
@@ -94,7 +95,7 @@ await page.GetByRole(AriaRole.Button, new() { Name = "Submit" }).DblClickAsync()
   });
 
   test('should click twice', async ({ openRecorder }) => {
-    const { recorder } = await openRecorder();
+    const { page, recorder } = await openRecorder();
 
     await recorder.setContentAndWait(`<button onclick="console.log('click')">Submit</button>`);
 
@@ -106,6 +107,9 @@ await page.GetByRole(AriaRole.Button, new() { Name = "Submit" }).DblClickAsync()
       recorder.trustedClick(),
     ]);
 
+    // Do not trigger double click.
+    await page.waitForTimeout(200);
+
     const [sources] = await Promise.all([
       recorder.waitForOutput('JavaScript', `click();\n  await`),
       recorder.trustedClick(),
@@ -128,6 +132,9 @@ await page.GetByRole(AriaRole.Button, new() { Name = "Submit" }).DblClickAsync()
       recorder.trustedClick(),
     ]);
 
+    // Do not trigger double click.
+    await page.waitForTimeout(200);
+
     await Promise.all([
       recorder.waitForOutput('JavaScript', `click();\n  await`),
       recorder.trustedClick(),
@@ -458,7 +465,7 @@ await page.Locator("#input").FillAsync(\"てすと\");`);
     expect(sources.get('C#')!.text).toContain(`
 await page.GetByRole(AriaRole.Textbox).PressAsync("Shift+Enter");`);
 
-    expect(messages[0].text()).toBe('press');
+    expect(messages.map(m => m.text())).toContain('press');
   });
 
   test('should update selected element after pressing Tab', async ({ openRecorder }) => {
@@ -526,7 +533,7 @@ await page.GetByRole(AriaRole.Textbox).PressAsync("Shift+Enter");`);
     ]);
     expect(sources.get('JavaScript')!.text).toContain(`
   await page.getByRole('textbox').press('ArrowDown');`);
-    expect(messages[0].text()).toBe('press:ArrowDown');
+    expect(messages.map(m => m.text())).toContain('press:ArrowDown');
   });
 
   test('should emit single keyup on ArrowDown', async ({ openRecorder }) => {
@@ -624,6 +631,28 @@ await page.Locator("#checkbox").CheckAsync();`);
     expect(message.text()).toBe('true');
   });
 
+  test('should check with keyboard after hover', async ({ openRecorder }) => {
+    const { page, recorder } = await openRecorder();
+
+    await recorder.setContentAndWait(`<input id="checkbox" type="checkbox" name="accept" onchange="console.log(checkbox.checked)"></input>`);
+
+    await recorder.hoverOverElement('input');
+    await page.focus('input');
+
+    const [sources] = await Promise.all([
+      recorder.waitForOutput('JavaScript', 'check'),
+      page.keyboard.press('Space')
+    ]);
+
+    expect(sources.get('JavaScript')!.text).toContain(`
+  await page.locator('#checkbox').check();`);
+
+    const sources2 = await recorder.waitForOutput('JavaScript', 'check');
+    expect(sources2.get('JavaScript')!.text).not.toContain(`
+  await page.locator('#checkbox').check();
+  await page.locator('#checkbox').check();`);
+  });
+
   test('should uncheck', async ({ openRecorder }) => {
     const { page, recorder } = await openRecorder();
 
@@ -731,6 +760,8 @@ await page.Locator(\"#age\").SelectOptionAsync(new[] { \"2\" });`);
   });
 
   test('should await popup', async ({ openRecorder }) => {
+    test.skip(recorderMode === 'record', 'Navigation is dispatched concurrently (before click is recorded)');
+
     const { page, recorder } = await openRecorder();
     await recorder.setContentAndWait('<a target=_blank rel=noopener href="about:blank">link</a>');
 
@@ -773,6 +804,8 @@ var page1 = await page.RunAndWaitForPopupAsync(async () =>
   });
 
   test('should attribute navigation to click', async ({ openRecorder }) => {
+    test.skip(recorderMode === 'record', 'Navigation is dispatched concurrently (before click is recorded)');
+
     const { page, recorder } = await openRecorder();
 
     await recorder.setContentAndWait(`<a onclick="window.location.href='about:blank#foo'">link</a>`);
@@ -828,6 +861,8 @@ await page.GetByText("link").ClickAsync();`);
   });
 
   test('should attribute navigation to press/fill', async ({ openRecorder }) => {
+    test.skip(recorderMode === 'record', 'Navigation is dispatched concurrently (before press/fill is recorded)');
+
     const { page, recorder } = await openRecorder();
 
     await recorder.setContentAndWait(`<input /><script>document.querySelector('input').addEventListener('input', () => window.location.href = 'about:blank#foo');</script>`);
diff --git a/tests/library/inspector/cli-codegen-2.spec.ts b/tests/library/inspector/cli-codegen-2.spec.ts
diff --git a/tests/library/inspector/cli-codegen-3.spec.ts b/tests/library/inspector/cli-codegen-3.spec.ts
diff --git a/tests/library/inspector/inspectorTest.ts b/tests/library/inspector/inspectorTest.ts
