From 59f828d54ffa6e8a06620bdb894009d35b500279 Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Wed, 4 Oct 2023 15:14:01 -0700
Subject: [PATCH] chore: highlight legacy page.click on hover (#382)

---
 src/babelHighlightUtil.ts |  2 +-
 src/debugHighlight.ts     |  4 +++-
 src/methodNames.ts        | 12 ++++++++++--
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/babelHighlightUtil.ts b/src/babelHighlightUtil.ts
index e0cf4f082..97266695c 100644
--- a/src/babelHighlightUtil.ts
+++ b/src/babelHighlightUtil.ts
@@ -83,7 +83,7 @@ export function locatorForSourcePosition(text: string, vars: { pages: string[],
         expressionNode = path.node.object.arguments[0];
 
 
-      // *.locator(), *.getBy*(), call
+      // *.locator(), *.getBy*(), *.click(), *.fill(), *.type() call
       if (t.isCallExpression(path.node) &&
           t.isMemberExpression(path.node.callee) &&
           t.isIdentifier(path.node.callee.property) &&
diff --git a/src/debugHighlight.ts b/src/debugHighlight.ts
index 5552b47c2..52ec94f5c 100644
--- a/src/debugHighlight.ts
+++ b/src/debugHighlight.ts
@@ -16,7 +16,7 @@
 
 import { locatorForSourcePosition, pruneAstCaches } from './babelHighlightUtil';
 import { debugSessionName } from './debugSessionName';
-import { locatorMethodRegex } from './methodNames';
+import { replaceActionWithLocator, locatorMethodRegex } from './methodNames';
 import type { Location } from './reporter';
 import { ReusedBrowser } from './reusedBrowser';
 import * as vscodeTypes from './vscodeTypes';
@@ -148,6 +148,8 @@ async function locatorToHighlight(debugSessions: Map<string, vscodeTypes.DebugSe
     locatorExpression = locatorExpression?.replace(/^component\s*\./, `page.locator('#root').locator('internal:control=component').`);
     // Translate 'this.page', or 'this._page' to 'page' to have best-effort support for POMs.
     locatorExpression = locatorExpression?.replace(/this\._?page\s*\./, 'page.');
+    // Translate page.click() to page.locator()
+    locatorExpression = locatorExpression ? replaceActionWithLocator(locatorExpression) : undefined;
     // Only consider locator expressions starting with "page." because we know the base for them (root).
     // Other locators can be relative.
     const match = locatorExpression?.match(/^page\s*\.([\s\S]*)/m);
diff --git a/src/methodNames.ts b/src/methodNames.ts
index cbf4c232e..b5b80b6ea 100644
--- a/src/methodNames.ts
+++ b/src/methodNames.ts
@@ -74,7 +74,15 @@ export const locatorMethods = [
   'first',
   'last',
   'nth',
-  'filter'
+  'filter',
+  'check',
+  'click',
+  'fill',
+  'type',
 ];
 
-export const locatorMethodRegex = /\.\s*(locator|getBy[\w]+|first|last|nth|filter)\(/;
+export const locatorMethodRegex = /\.\s*(check|click|fill|type|locator|getBy[\w]+|first|last|nth|filter)\(/;
+
+export function replaceActionWithLocator(expression: string) {
+  return expression.replace(/\.\s*(?:check|click|fill|type)\(([^,]+)(?:,\s*{.*})\)/, '.locator($1)');
+}