Support this.page in rules

src/rules/no-element-handle.ts

@@ -1,36 +1,46 @@
-import { isCalleeObject, isCalleeProperty } from '../utils/ast';
+import { isPageMethod } from '../utils/ast';
 import * as ESTree from 'estree';
 import { Rule, AST } from 'eslint';
 
-function getRange(
-  node: ESTree.CallExpression & Rule.NodeParentExtension
-): AST.Range {
-  const callee = node.callee as ESTree.MemberExpression;
-  const start =
-    node.parent.type === 'AwaitExpression'
-      ? node.parent.range![0]
-      : callee.object.range![0];
-
-  return [start, callee.range![1]];
+function getPropertyRange(node: ESTree.Node): AST.Range {
+  return node.type === 'Identifier'
+    ? node.range!
+    : [node.range![0] + 1, node.range![1] - 1];
 }
 
 export default {
   create(context) {
     return {
       CallExpression(node) {
-        if (
-          isCalleeObject(node, 'page') &&
-          (isCalleeProperty(node, '$') || isCalleeProperty(node, '$$'))
-        ) {
+        if (isPageMethod(node, '$') || isPageMethod(node, '$$')) {
           context.report({
             messageId: 'noElementHandle',
             suggest: [
               {
-                messageId: isCalleeProperty(node, '$')
+                messageId: isPageMethod(node, '$')
                   ? 'replaceElementHandleWithLocator'
                   : 'replaceElementHandlesWithLocator',
-                fix: (fixer) =>
-                  fixer.replaceTextRange(getRange(node), 'page.locator'),
+                fix: (fixer) => {
+                  const { property } = node.callee as ESTree.MemberExpression;
+
+                  // Replace $/$$ with locator
+                  const fixes = [
+                    fixer.replaceTextRange(
+                      getPropertyRange(property),
+                      'locator'
+                    ),
+                  ];
+
+                  // Remove the await expression if it exists as locators do
+                  // not need to be awaited.
+                  if (node.parent.type === 'AwaitExpression') {
+                    fixes.push(
+                      fixer.removeRange([node.parent.range![0], node.range![0]])
+                    );
+                  }
+
+                  return fixes;
+                },
               },
             ],
             node,

src/rules/no-eval.ts

@@ -1,16 +1,15 @@
 import { Rule } from 'eslint';
-import { isCalleeObject, isCalleeProperty } from '../utils/ast';
+import { isPageMethod } from '../utils/ast';
 
 export default {
   create(context) {
     return {
       CallExpression(node) {
-        if (
-          isCalleeObject(node, 'page') &&
-          (isCalleeProperty(node, '$eval') || isCalleeProperty(node, '$$eval'))
-        ) {
+        const isEval = isPageMethod(node, '$eval');
+
+        if (isEval || isPageMethod(node, '$$eval')) {
           context.report({
-            messageId: isCalleeProperty(node, '$eval') ? 'noEval' : 'noEvalAll',
+            messageId: isEval ? 'noEval' : 'noEvalAll',
             node,
           });
         }

src/rules/no-page-pause.ts

@@ -1,11 +1,11 @@
 import { Rule } from 'eslint';
-import { isCalleeObject, isCalleeProperty } from '../utils/ast';
+import { isPageMethod } from '../utils/ast';
 
 export default {
   create(context) {
     return {
       CallExpression(node) {
-        if (isCalleeObject(node, 'page') && isCalleeProperty(node, 'pause')) {
+        if (isPageMethod(node, 'pause')) {
           context.report({ messageId: 'noPagePause', node });
         }
       },

src/rules/no-wait-for-timeout.ts

@@ -1,14 +1,11 @@
 import { Rule } from 'eslint';
-import { isCalleeObject, isCalleeProperty } from '../utils/ast';
+import { isPageMethod } from '../utils/ast';
 
 export default {
   create(context) {
     return {
       CallExpression(node) {
-        if (
-          isCalleeObject(node, 'page') &&
-          isCalleeProperty(node, 'waitForTimeout')
-        ) {
+        if (isPageMethod(node, 'waitForTimeout')) {
           context.report({
             messageId: 'noWaitForTimeout',
             suggest: [

src/utils/ast.ts

@@ -42,20 +42,6 @@ export function isPropertyAccessor(
   return getStringValue(node.property) === name;
 }
 
-export function isCalleeObject(node: ESTree.CallExpression, name: string) {
-  return (
-    node.callee.type === 'MemberExpression' &&
-    isIdentifier(node.callee.object, name)
-  );
-}
-
-export function isCalleeProperty(node: ESTree.CallExpression, name: string) {
-  return (
-    node.callee.type === 'MemberExpression' &&
-    isPropertyAccessor(node.callee, name)
-  );
-}
-
 export function isTestIdentifier(node: ESTree.Node) {
   return (
     isIdentifier(node, 'test') ||
@@ -157,3 +143,13 @@ export function getMatchers(
 
   return chain;
 }
+
+export function isPageMethod(node: ESTree.CallExpression, name: string) {
+  return (
+    node.callee.type === 'MemberExpression' &&
+    (node.callee.object.type === 'MemberExpression'
+      ? isIdentifier(node.callee.object.property, 'page')
+      : isIdentifier(node.callee.object, 'page')) &&
+    isPropertyAccessor(node.callee, name)
+  );
+}

test/spec/no-element-handle.spec.ts

@@ -27,13 +27,21 @@ runRuleTester('no-element-handle', rule, {
       'const handle = await page.$("text=Submit");',
       'const handle = page.locator("text=Submit");'
     ),
+    invalid(
+      'const handle = await this.page.$("text=Submit");',
+      'const handle = this.page.locator("text=Submit");'
+    ),
     invalid(
       'const handle = await page["$$"]("text=Submit");',
-      'const handle = page.locator("text=Submit");'
+      'const handle = page["locator"]("text=Submit");'
     ),
     invalid(
       'const handle = await page[`$$`]("text=Submit");',
-      'const handle = page.locator("text=Submit");'
+      'const handle = page[`locator`]("text=Submit");'
+    ),
+    invalid(
+      'const handle = await this.page.$$("text=Submit");',
+      'const handle = this.page.locator("text=Submit");'
     ),
 
     // element handle as let
@@ -64,11 +72,11 @@ runRuleTester('no-element-handle', rule, {
     ),
     invalid(
       'const handle = await page["$$"]("a");',
-      'const handle = page.locator("a");'
+      'const handle = page["locator"]("a");'
     ),
     invalid(
       'const handle = await page[`$$`]("a");',
-      'const handle = page.locator("a");'
+      'const handle = page[`locator`]("a");'
     ),
 
     // element handles as let
@@ -112,6 +120,7 @@ runRuleTester('no-element-handle', rule, {
   ],
   valid: [
     valid('page.locator("a")'),
+    valid('this.page.locator("a")'),
     valid('await page.locator("a").click();'),
     valid('const $ = "text";'),
     valid('$("a");'),

test/spec/no-eval.spec.ts

@@ -11,6 +11,7 @@ const valid = wrapInTest;
 runRuleTester('no-eval', rule, {
   valid: [
     valid('await page.locator(".tweet").evaluate(node => node.innerText)'),
+    valid('await this.page.locator(".tweet").evaluate(node => node.innerText)'),
     valid('await page.locator(".tweet")["evaluate"](node => node.innerText)'),
     valid('await page.locator(".tweet")[`evaluate`](node => node.innerText)'),
     valid(
@@ -28,17 +29,25 @@ runRuleTester('no-eval', rule, {
     valid(
       'await page.locator("div").evaluateAll((divs, min) => divs.length >= min, 10);'
     ),
+    valid(
+      'await this.page.locator("div").evaluateAll((divs, min) => divs.length >= min, 10);'
+    ),
   ],
   invalid: [
     invalid('const searchValue = await page.$eval("#search", el => el.value);'),
+    invalid(
+      'const searchValue = await this.page.$eval("#search", el => el.value);'
+    ),
     invalid(
       'const searchValue = await page["$eval"]("#search", el => el.value);'
     ),
     invalid(
       'const searchValue = await page[`$eval`]("#search", el => el.value);'
     ),
     invalid('await page.$eval("#search", el => el.value);'),
+    invalid('await this.page.$eval("#search", el => el.value);'),
     invalid('await page.$$eval("#search", el => el.value);'),
+    invalid('await this.page.$$eval("#search", el => el.value);'),
     invalid('await page["$$eval"]("#search", el => el.value);'),
     invalid('await page[`$$eval`]("#search", el => el.value);'),
     invalid(

test/spec/no-page-pause.spec.ts

@@ -11,11 +11,13 @@ const valid = wrapInTest;
 runRuleTester('no-page-pause', rule, {
   invalid: [
     invalid('await page.pause()'),
+    invalid('await this.page.pause()'),
     invalid('await page["pause"]()'),
     invalid('await page[`pause`]()'),
   ],
   valid: [
     valid('await page.click()'),
+    valid('await this.page.click()'),
     valid('await page["hover"]()'),
     valid('await page[`check`]()'),
     valid('await expect(page).toBePaused()'),

test/spec/no-wait-for-timeout.spec.ts

@@ -17,6 +17,10 @@ runRuleTester('no-wait-for-timeout', rule, {
       'async function fn() { await page.waitForTimeout(1000) }',
       'async function fn() {  }'
     ),
+    invalid(
+      'async function fn() { await this.page.waitForTimeout(1000) }',
+      'async function fn() {  }'
+    ),
     invalid(
       'async function fn() { await page["waitForTimeout"](1000) }',
       'async function fn() {  }'
@@ -44,6 +48,7 @@ runRuleTester('no-wait-for-timeout', rule, {
   valid: [
     'function waitForTimeout() {}',
     'async function fn() { await waitForTimeout(4343); }',
+    'async function fn() { await this.foo.waitForTimeout(4343); }',
     '(async function() { await page.waitForSelector("#foo"); })();',
     'page.waitForSelector("#foo");',
     'page["waitForSelector"]("#foo");',