From 099dd80806589ae163854533812d3bb28343732e Mon Sep 17 00:00:00 2001
From: Dmitry Gozman <dgozman@gmail.com>
Date: Wed, 13 Nov 2024 11:06:34 +0000
Subject: [PATCH] fix(recorder): align apiName with the real one (#33567)

---
 .../playwright-core/src/server/recorder.ts    | 14 ++++++----
 .../src/server/recorder/recorderUtils.ts      |  4 +--
 .../src/utils/isomorphic/recorderUtils.ts     | 28 +++++++++----------
 .../src/ui/recorder/actionListView.tsx        |  3 +-
 4 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/packages/playwright-core/src/server/recorder.ts b/packages/playwright-core/src/server/recorder.ts
index 028939d2a4..ae795ade33 100644
--- a/packages/playwright-core/src/server/recorder.ts
+++ b/packages/playwright-core/src/server/recorder.ts
@@ -225,8 +225,8 @@ export class Recorder implements InstrumentationListener, IRecorder {
     this._highlightedElement = {};
     this._mode = mode;
     this._recorderApp?.setMode(this._mode);
-    this._contextRecorder.setEnabled(this._mode === 'recording' || this._mode === 'assertingText' || this._mode === 'assertingVisibility' || this._mode === 'assertingValue' || this._mode === 'assertingSnapshot');
-    this._debugger.setMuted(this._mode === 'recording' || this._mode === 'assertingText' || this._mode === 'assertingVisibility' || this._mode === 'assertingValue');
+    this._contextRecorder.setEnabled(this._isRecording());
+    this._debugger.setMuted(this._isRecording());
     if (this._mode !== 'none' && this._mode !== 'standby' && this._context.pages().length === 1)
       this._context.pages()[0].bringToFront().catch(() => {});
     this._refreshOverlay();
@@ -292,7 +292,7 @@ export class Recorder implements InstrumentationListener, IRecorder {
   }
 
   async onBeforeCall(sdkObject: SdkObject, metadata: CallMetadata) {
-    if (this._omitCallTracking || this._mode === 'recording' || this._mode === 'assertingText' || this._mode === 'assertingVisibility' || this._mode === 'assertingValue')
+    if (this._omitCallTracking || this._isRecording())
       return;
     this._currentCallsMetadata.set(metadata, sdkObject);
     this._updateUserSources();
@@ -304,7 +304,7 @@ export class Recorder implements InstrumentationListener, IRecorder {
   }
 
   async onAfterCall(sdkObject: SdkObject, metadata: CallMetadata) {
-    if (this._omitCallTracking || this._mode === 'recording' || this._mode === 'assertingText' || this._mode === 'assertingVisibility' || this._mode === 'assertingValue')
+    if (this._omitCallTracking || this._isRecording())
       return;
     if (!metadata.error)
       this._currentCallsMetadata.delete(metadata);
@@ -354,7 +354,7 @@ export class Recorder implements InstrumentationListener, IRecorder {
   }
 
   updateCallLog(metadatas: CallMetadata[]) {
-    if (this._mode === 'recording' || this._mode === 'assertingText' || this._mode === 'assertingVisibility' || this._mode === 'assertingValue')
+    if (this._isRecording())
       return;
     const logs: CallLog[] = [];
     for (const metadata of metadatas) {
@@ -370,6 +370,10 @@ export class Recorder implements InstrumentationListener, IRecorder {
     this._recorderApp?.updateCallLogs(logs);
   }
 
+  private _isRecording() {
+    return ['recording', 'assertingText', 'assertingVisibility', 'assertingValue', 'assertingSnapshot'].includes(this._mode);
+  }
+
   private _readSource(fileName: string): string {
     try {
       return fs.readFileSync(fileName, 'utf-8');
diff --git a/packages/playwright-core/src/server/recorder/recorderUtils.ts b/packages/playwright-core/src/server/recorder/recorderUtils.ts
index c40a6ac201..990ba959d6 100644
--- a/packages/playwright-core/src/server/recorder/recorderUtils.ts
+++ b/packages/playwright-core/src/server/recorder/recorderUtils.ts
@@ -72,11 +72,11 @@ export async function frameForAction(pageAliases: Map<Page, string>, actionInCon
 
 export function callMetadataForAction(pageAliases: Map<Page, string>, actionInContext: actions.ActionInContext): { callMetadata: CallMetadata, mainFrame: Frame } {
   const mainFrame = mainFrameForAction(pageAliases, actionInContext);
-  const { method, params } = traceParamsForAction(actionInContext);
+  const { method, apiName, params } = traceParamsForAction(actionInContext);
 
   const callMetadata: CallMetadata = {
     id: `call@${createGuid()}`,
-    apiName: 'page.' + method,
+    apiName,
     objectId: mainFrame.guid,
     pageId: mainFrame._page.guid,
     frameId: mainFrame.guid,
diff --git a/packages/playwright-core/src/utils/isomorphic/recorderUtils.ts b/packages/playwright-core/src/utils/isomorphic/recorderUtils.ts
index b859edf11d..7ef45e5ece 100644
--- a/packages/playwright-core/src/utils/isomorphic/recorderUtils.ts
+++ b/packages/playwright-core/src/utils/isomorphic/recorderUtils.ts
@@ -24,7 +24,7 @@ export function buildFullSelector(framePath: string[], selector: string) {
 
 const kDefaultTimeout = 5_000;
 
-export function traceParamsForAction(actionInContext: recorderActions.ActionInContext): { method: string, params: any } {
+export function traceParamsForAction(actionInContext: recorderActions.ActionInContext): { method: string, apiName: string, params: any } {
   const { action } = actionInContext;
 
   switch (action.name) {
@@ -32,7 +32,7 @@ export function traceParamsForAction(actionInContext: recorderActions.ActionInCo
       const params: channels.FrameGotoParams = {
         url: action.url,
       };
-      return { method: 'goto', params };
+      return { method: 'goto', apiName: 'page.goto', params };
     }
     case 'openPage':
     case 'closePage':
@@ -50,7 +50,7 @@ export function traceParamsForAction(actionInContext: recorderActions.ActionInCo
         clickCount: action.clickCount,
         position: action.position,
       };
-      return { method: 'click', params };
+      return { method: 'click', apiName: 'locator.click', params };
     }
     case 'press': {
       const params: channels.FramePressParams = {
@@ -58,7 +58,7 @@ export function traceParamsForAction(actionInContext: recorderActions.ActionInCo
         strict: true,
         key: [...toKeyboardModifiers(action.modifiers), action.key].join('+'),
       };
-      return { method: 'press', params };
+      return { method: 'press', apiName: 'locator.press', params };
     }
     case 'fill': {
       const params: channels.FrameFillParams = {
@@ -66,7 +66,7 @@ export function traceParamsForAction(actionInContext: recorderActions.ActionInCo
         strict: true,
         value: action.text,
       };
-      return { method: 'fill', params };
+      return { method: 'fill', apiName: 'locator.fill', params };
     }
     case 'setInputFiles': {
       const params: channels.FrameSetInputFilesParams = {
@@ -74,21 +74,21 @@ export function traceParamsForAction(actionInContext: recorderActions.ActionInCo
         strict: true,
         localPaths: action.files,
       };
-      return { method: 'setInputFiles', params };
+      return { method: 'setInputFiles', apiName: 'locator.setInputFiles', params };
     }
     case 'check': {
       const params: channels.FrameCheckParams = {
         selector,
         strict: true,
       };
-      return { method: 'check', params };
+      return { method: 'check', apiName: 'locator.check', params };
     }
     case 'uncheck': {
       const params: channels.FrameUncheckParams = {
         selector,
         strict: true,
       };
-      return { method: 'uncheck', params };
+      return { method: 'uncheck', apiName: 'locator.uncheck', params };
     }
     case 'select': {
       const params: channels.FrameSelectOptionParams = {
@@ -96,7 +96,7 @@ export function traceParamsForAction(actionInContext: recorderActions.ActionInCo
         strict: true,
         options: action.options.map(option => ({ value: option })),
       };
-      return { method: 'selectOption', params };
+      return { method: 'selectOption', apiName: 'locator.selectOption', params };
     }
     case 'assertChecked': {
       const params: channels.FrameExpectParams = {
@@ -105,7 +105,7 @@ export function traceParamsForAction(actionInContext: recorderActions.ActionInCo
         isNot: !action.checked,
         timeout: kDefaultTimeout,
       };
-      return { method: 'expect', params };
+      return { method: 'expect', apiName: 'expect.toBeChecked', params };
     }
     case 'assertText': {
       const params: channels.FrameExpectParams = {
@@ -115,7 +115,7 @@ export function traceParamsForAction(actionInContext: recorderActions.ActionInCo
         isNot: false,
         timeout: kDefaultTimeout,
       };
-      return { method: 'expect', params };
+      return { method: 'expect', apiName: 'expect.toContainText', params };
     }
     case 'assertValue': {
       const params: channels.FrameExpectParams = {
@@ -125,7 +125,7 @@ export function traceParamsForAction(actionInContext: recorderActions.ActionInCo
         isNot: false,
         timeout: kDefaultTimeout,
       };
-      return { method: 'expect', params };
+      return { method: 'expect', apiName: 'expect.toHaveValue', params };
     }
     case 'assertVisible': {
       const params: channels.FrameExpectParams = {
@@ -134,7 +134,7 @@ export function traceParamsForAction(actionInContext: recorderActions.ActionInCo
         isNot: false,
         timeout: kDefaultTimeout,
       };
-      return { method: 'expect', params };
+      return { method: 'expect', apiName: 'expect.toBeVisible', params };
     }
     case 'assertSnapshot': {
       const params: channels.FrameExpectParams = {
@@ -144,7 +144,7 @@ export function traceParamsForAction(actionInContext: recorderActions.ActionInCo
         isNot: false,
         timeout: kDefaultTimeout,
       };
-      return { method: 'expect', params };
+      return { method: 'expect', apiName: 'expect.toMatchAriaSnapshot', params };
     }
   }
 }
diff --git a/packages/trace-viewer/src/ui/recorder/actionListView.tsx b/packages/trace-viewer/src/ui/recorder/actionListView.tsx
index a68df255ea..8e9fa0df45 100644
--- a/packages/trace-viewer/src/ui/recorder/actionListView.tsx
+++ b/packages/trace-viewer/src/ui/recorder/actionListView.tsx
@@ -49,10 +49,9 @@ export const ActionListView: React.FC<{
 };
 
 export const renderAction = (sdkLanguage: Language, action: actionTypes.ActionInContext) => {
-  const { method, params } = traceParamsForAction(action);
+  const { method, apiName, params } = traceParamsForAction(action);
   const locator = params.selector ? asLocator(sdkLanguage || 'javascript', params.selector) : undefined;
 
-  const apiName = `page.${method}`;
   return <>
     <div className='action-title' title={apiName}>
       <span>{apiName}</span>