chore: highlight legacy page.click on hover (#382)

microsoft · Oct 4, 2023 · 59f828d · 59f828d
1 parent 49373a7
commit 59f828d
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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)');
+}