feat(prefer-locator): Add rule to suggest not using page methods

README.md

@@ -195,6 +195,7 @@ CLI option\
 | [prefer-hooks-on-top](https://github.com/playwright-community/eslint-plugin-playwright/tree/main/docs/rules/prefer-hooks-on-top.md)                 | Suggest having hooks before any test cases                         |     |     |     |
 | [prefer-lowercase-title](https://github.com/playwright-community/eslint-plugin-playwright/tree/main/docs/rules/prefer-lowercase-title.md)           | Enforce lowercase test names                                       |     | 🔧  |     |
 | [prefer-native-locators](https://github.com/playwright-community/eslint-plugin-playwright/tree/main/docs/rules/prefer-native-locators.md)           | Suggest built-in locators over `page.locator()`                    |     | 🔧  |     |
+| [prefer-locator](https://github.com/playwright-community/eslint-plugin-playwright/tree/main/docs/rules/prefer-locator.md)                           | Suggest built-in locators over page methods                        |     |     |     |
 | [prefer-strict-equal](https://github.com/playwright-community/eslint-plugin-playwright/tree/main/docs/rules/prefer-strict-equal.md)                 | Suggest using `toStrictEqual()`                                    |     |     | 💡  |
 | [prefer-to-be](https://github.com/playwright-community/eslint-plugin-playwright/tree/main/docs/rules/prefer-to-be.md)                               | Suggest using `toBe()`                                             |     | 🔧  |     |
 | [prefer-to-contain](https://github.com/playwright-community/eslint-plugin-playwright/tree/main/docs/rules/prefer-to-contain.md)                     | Suggest using `toContain()`                                        |     | 🔧  |     |

docs/rules/prefer-locator.md

@@ -0,0 +1,21 @@
+# Suggest using `page.locator()` (`prefer-locator`)
+
+Instead of using page methods use locator-based e.g. page.fill() use
+[locator.fill(value[, options])](https://playwright.dev/docs/api/class-locator#locator-fill)
+
+## Rule details
+
+This rule triggers a warning if page methods are used, instead of locators.
+
+The following patterns are considered warnings:
+
+```javascript
+await page.fill('input[type="password"]', 'password')
+```
+
+The following pattern is **not** a warning:
+
+```javascript
+await page.getByRole('password').fill('password')
+await page.locator('input[type="password"]').fill('password')
+```

src/index.ts

@@ -30,6 +30,7 @@ import preferComparisonMatcher from './rules/prefer-comparison-matcher'
 import preferEqualityMatcher from './rules/prefer-equality-matcher'
 import preferHooksInOrder from './rules/prefer-hooks-in-order'
 import preferHooksOnTop from './rules/prefer-hooks-on-top'
+import preferPageLocator from './rules/prefer-locator'
 import preferLowercaseTitle from './rules/prefer-lowercase-title'
 import preferNativeLocators from './rules/prefer-native-locators'
 import preferStrictEqual from './rules/prefer-strict-equal'
@@ -81,6 +82,7 @@ const index = {
     'prefer-equality-matcher': preferEqualityMatcher,
     'prefer-hooks-in-order': preferHooksInOrder,
     'prefer-hooks-on-top': preferHooksOnTop,
+    'prefer-locator': preferPageLocator,
     'prefer-lowercase-title': preferLowercaseTitle,
     'prefer-native-locators': preferNativeLocators,
     'prefer-strict-equal': preferStrictEqual,

src/rules/prefer-locator.test.ts

@@ -0,0 +1,33 @@
+import { runRuleTester } from '../utils/rule-tester'
+import rule from './prefer-locator'
+
+runRuleTester('prefer-locator', rule, {
+  invalid: [
+    {
+      code: `
+          async function test() {
+              await page.fill();
+          }
+      `,
+      errors: [
+        {
+          column: 15,
+          endColumn: 32,
+          endLine: 3,
+          line: 3,
+          messageId: 'avoidAwaitPageMethods',
+        },
+      ],
+      output: null,
+    },
+  ],
+  valid: [
+    {
+      code: `
+          async function test() {
+              await page.locator();
+          }
+      `,
+    },
+  ],
+})

src/rules/prefer-locator.ts

@@ -0,0 +1,69 @@
+import ESTree from 'estree'
+import { getStringValue, isPageMethod } from '../utils/ast'
+import { createRule } from '../utils/createRule'
+
+const pageMethods = new Set([
+  'click',
+  'dblclick',
+  'dispatchEvent',
+  'fill',
+  'focus',
+  'getAttribute',
+  'hover',
+  'innerHTML',
+  'innerText',
+  'inputValue',
+  'isChecked',
+  'isDisabled',
+  'isEditable',
+  'isEnabled',
+  'isHidden',
+  'isVisible',
+  'press',
+  'selectOption',
+  'setChecked',
+  'setInputFiles',
+  'tap',
+  'textContent',
+  'uncheck',
+])
+
+function isSupportedMethod(node: ESTree.CallExpression) {
+  if (node.callee.type !== 'MemberExpression') return false
+
+  const name = getStringValue(node.callee.property)
+  return pageMethods.has(name) && isPageMethod(node, name)
+}
+
+export default createRule({
+  create(context) {
+    return {
+      AwaitExpression(node) {
+        // Must be a call expression
+        if (node.argument.type !== 'CallExpression') return
+
+        // Must be a method we care about
+        if (!isSupportedMethod(node.argument)) return
+
+        context.report({
+          messageId: 'avoidAwaitPageMethods',
+          node,
+        })
+      },
+    }
+  },
+  meta: {
+    docs: {
+      category: 'Best Practices',
+      description: 'Discourage using await page methods',
+      recommended: false,
+      url: 'https://github.com/playwright-community/eslint-plugin-playwright/tree/main/docs/rules/prefer-locator.md',
+    },
+    messages: {
+      avoidAwaitPageMethods:
+        "Avoid using page methods e.g. 'await page.fill()', Use locator-based [locator.fill(value[, options])](https://playwright.dev/docs/api/class-locator#locator-fill)",
+    },
+    schema: [],
+    type: 'suggestion',
+  },
+})