chore: include action ref in generated actions

Author: pavelfeldman

packages/injected/src/recorder/recorder.ts

@@ -650,12 +650,13 @@ class JsonRecordActionTool implements RecorderTool {
       return;
 
     const checkbox = asCheckbox(element);
-    const { ariaSnapshot, selector } = this._ariaSnapshot(element);
+    const { ariaSnapshot, selector, ref } = this._ariaSnapshot(element);
     if (checkbox && event.detail === 1) {
       // Interestingly, inputElement.checked is reversed inside this event handler.
       this._recorder.recordAction({
         name: checkbox.checked ? 'check' : 'uncheck',
         selector,
+        ref,
         signals: [],
         ariaSnapshot,
       });
@@ -665,6 +666,7 @@ class JsonRecordActionTool implements RecorderTool {
     this._recorder.recordAction({
       name: 'click',
       selector,
+      ref,
       ariaSnapshot,
       position: positionForEvent(event),
       signals: [],
@@ -681,27 +683,29 @@ class JsonRecordActionTool implements RecorderTool {
     if (this._shouldIgnoreMouseEvent(event))
       return;
 
-    const { ariaSnapshot, selector } = this._ariaSnapshot(element);
+    const { ariaSnapshot, selector, ref } = this._ariaSnapshot(element);
     this._recorder.recordAction({
       name: 'click',
       selector,
+      ref,
       ariaSnapshot,
       position: positionForEvent(event),
       signals: [],
       button: buttonForEvent(event),
       modifiers: modifiersForEvent(event),
-      clickCount: event.detail
+      clickCount: event.detail,
     });
   }
 
   onInput(event: Event) {
     const element = this._recorder.deepEventTarget(event);
 
-    const { ariaSnapshot, selector } = this._ariaSnapshot(element);
+    const { ariaSnapshot, selector, ref } = this._ariaSnapshot(element);
     if (isRangeInput(element)) {
       this._recorder.recordAction({
         name: 'fill',
         selector,
+        ref,
         ariaSnapshot,
         signals: [],
         text: element.value,
@@ -717,6 +721,7 @@ class JsonRecordActionTool implements RecorderTool {
 
       this._recorder.recordAction({
         name: 'fill',
+        ref,
         selector,
         ariaSnapshot,
         signals: [],
@@ -730,6 +735,7 @@ class JsonRecordActionTool implements RecorderTool {
       this._recorder.recordAction({
         name: 'select',
         selector,
+        ref,
         ariaSnapshot,
         options: [...selectElement.selectedOptions].map(option => option.value),
         signals: []
@@ -743,7 +749,7 @@ class JsonRecordActionTool implements RecorderTool {
       return;
 
     const element = this._recorder.deepEventTarget(event);
-    const { ariaSnapshot, selector } = this._ariaSnapshot(element);
+    const { ariaSnapshot, selector, ref } = this._ariaSnapshot(element);
 
     // Similarly to click, trigger checkbox on key event, not input.
     if (event.key === ' ') {
@@ -752,6 +758,7 @@ class JsonRecordActionTool implements RecorderTool {
         this._recorder.recordAction({
           name: checkbox.checked ? 'uncheck' : 'check',
           selector,
+          ref,
           ariaSnapshot,
           signals: [],
         });
@@ -762,6 +769,7 @@ class JsonRecordActionTool implements RecorderTool {
     this._recorder.recordAction({
       name: 'press',
       selector,
+      ref,
       ariaSnapshot,
       signals: [],
       key: event.key,
@@ -819,12 +827,12 @@ class JsonRecordActionTool implements RecorderTool {
     return false;
   }
 
-  private _ariaSnapshot(element: HTMLElement): { ariaSnapshot: string, selector: string };
-  private _ariaSnapshot(element: HTMLElement | undefined): { ariaSnapshot: string, selector?: string } {
+  private _ariaSnapshot(element: HTMLElement): { ariaSnapshot: string, selector: string, ref?: string };
+  private _ariaSnapshot(element: HTMLElement | undefined): { ariaSnapshot: string, selector?: string, ref?: string } {
     const { ariaSnapshot, refs } = this._recorder.injectedScript.ariaSnapshotForRecorder();
     const ref = element ? refs.get(element) : undefined;
-    const selector = ref ? `aria-ref=${ref}` : undefined;
-    return { ariaSnapshot, selector };
+    const elementInfo = element ? this._recorder.injectedScript.generateSelector(element, { testIdAttributeName: this._recorder.state.testIdAttributeName }) : undefined;
+    return { ariaSnapshot, selector: elementInfo?.selector, ref };
   }
 }
 

packages/recorder/src/actions.d.ts

@@ -41,6 +41,7 @@ export type ActionBase = {
 
 export type ActionWithSelector = ActionBase & {
   selector: string,
+  ref?: string,
 };
 
 export type ClickAction = ActionWithSelector & {
@@ -78,9 +79,8 @@ export type ClosesPageAction = ActionBase & {
   name: 'closePage',
 };
 
-export type PressAction = ActionBase & {
+export type PressAction = ActionWithSelector & {
   name: 'press',
-  selector: string,
   key: string,
   modifiers: number,
 };

tests/library/inspector/recorder-api.spec.ts

@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { Page } from '@playwright/test';
+import type * as actions from '@recorder/actions';
+import { test, expect } from './inspectorTest';
+import { BrowserContext } from 'playwright-core/src/client/browserContext';
+
+class RecorderLog {
+  actions: actions.ActionInContext[] = [];
+  signals: actions.SignalInContext[] = [];
+
+  actionAdded(page: Page, actionInContext: actions.ActionInContext): void {
+    this.actions.push(actionInContext);
+  }
+
+  actionUpdated(page: Page, actionInContext: actions.ActionInContext): void {
+    this.actions.push(actionInContext);
+  }
+
+  signalAdded(page: Page, signal: actions.SignalInContext): void {
+    this.signals.push(signal);
+  }
+}
+
+test('should click', async ({ context }) => {
+  const browserContext = context as BrowserContext;
+  const log = new RecorderLog();
+  await browserContext._enableRecorder({
+    mode: 'recording',
+    recorderMode: 'api',
+  }, log);
+
+  const page = await browserContext.newPage();
+  await page.setContent(`<button onclick="console.log('click')">Submit</button>`);
+  await page.getByRole('button', { name: 'Submit' }).click();
+
+  expect(log.actions).toEqual([
+    expect.objectContaining({
+      action: { name: 'openPage', url: 'about:blank', signals: [] },
+      startTime: expect.any(Number)
+    }),
+    expect.objectContaining({
+      action: expect.objectContaining({
+        name: 'click',
+        selector: 'internal:role=button[name="Submit"i]',
+        ref: 'e2',
+        ariaSnapshot: '- button "Submit" [active] [ref=e2] [cursor=pointer]',
+      }),
+      startTime: expect.any(Number),
+    }),
+  ]);
+});
+
+test('should type', async ({ context }) => {
+  const browserContext = context as BrowserContext;
+  const log = new RecorderLog();
+  await browserContext._enableRecorder({
+    mode: 'recording',
+    recorderMode: 'api',
+  }, log);
+
+  const page = await browserContext.newPage();
+  await page.setContent(`<input type="text" />`);
+  await page.getByRole('textbox').pressSequentially('Hello');
+
+  expect(log.actions[log.actions.length - 1]).toEqual(
+      expect.objectContaining({
+        action: expect.objectContaining({
+          name: 'fill',
+          selector: 'internal:role=textbox',
+          ref: 'e2',
+          ariaSnapshot: '- textbox [active] [ref=e2] [cursor=pointer]: Hello',
+        }),
+        startTime: expect.any(Number),
+      }));
+});