Add no eval rule

README.md

@@ -119,3 +119,27 @@ Example of **correct** code for this rule:
 const buttonLocator = page.locator('button');
 await buttonLocator.click();
 ```
+
+### `no-eval`
+
+Disallow usage of `page.$eval` and `page.$$eval`.
+
+Examples of **incorrect** code for this rule:
+
+```js
+const searchValue = await page.$eval('#search', el => el.value);
+
+const divCounts = await page.$$eval('div', (divs, min) => divs.length >= min, 10);
+
+await page.$eval('#search', el => el.value);
+
+await page.$$eval('#search', el => el.value);
+```
+
+Example of **correct** code for this rule:
+
+```js
+await page.locator('button').evaluate(node => node.innerText);
+
+await page.locator('div').evaluateAll((divs, min) => divs.length >= min, 10);
+```

lib/index.js

@@ -1,6 +1,7 @@
 const missingPlaywrightAwait = require("./rules/missing-playwright-await");
 const noPagePause = require("./rules/no-page-pause");
 const noElementHandle = require("./rules/no-element-handle");
+const noEval = require("./rules/no-eval");
 
 module.exports = {
   configs: {
@@ -14,6 +15,7 @@ module.exports = {
         "playwright/missing-playwright-await": "error",
         "playwright/no-page-pause": "warn",
         "playwright/no-element-handle": "warn",
+        "playwright/no-eval": "warn",
       },
     },
     "jest-playwright": {
@@ -52,6 +54,7 @@ module.exports = {
   rules: {
     "missing-playwright-await": missingPlaywrightAwait,
     "no-page-pause": noPagePause,
-    "no-element-handle": noElementHandle
+    "no-element-handle": noElementHandle,
+    "no-eval": noEval,
   },
 };

lib/rules/no-element-handle.js

@@ -1,29 +1,4 @@
-function isPageIdentifier({ callee }) {
-  return (
-    callee &&
-    callee.type === 'MemberExpression' &&
-    callee.object.type === 'Identifier' &&
-    callee.object.name === 'page'
-  );
-}
-
-function isElementHandleIdentifier({ callee }) {
-  return (
-    callee &&
-    callee.property &&
-    callee.property.type === 'Identifier' &&
-    callee.property.name === '$'
-  );
-}
-
-function isElementHandlesIdentifier({ callee }) {
-  return (
-    callee &&
-    callee.property &&
-    callee.property.type === 'Identifier' &&
-    callee.property.name === '$$'
-  );
-}
+const { isPageIdentifier, isElementHandleIdentifier, isElementHandlesIdentifier } = require('../utils/ast');
 
 function getRange(node) {
   const start = node.parent && node.parent.type === 'AwaitExpression' 

lib/rules/no-eval.js

@@ -0,0 +1,27 @@
+const { isPageIdentifier, isEvalIdentifier, isEvalAllIdentifier } = require('../utils/ast');
+
+module.exports = {
+  create(context) {
+    return {
+      CallExpression(node) {
+        if (isPageIdentifier(node) && (isEvalIdentifier(node) || isEvalAllIdentifier(node))) {
+          context.report({ messageId: isEvalIdentifier(node) ? 'noEval' : 'noEvalAll', node });
+        }
+      },
+    };
+  },
+  meta: {
+    docs: {
+      category: 'Possible Errors',
+      description:
+        'The use of `page.$eval` and `page.$$eval` are discouraged, use `locator.evaluate` or `locator.evaluateAll` instead',
+      recommended: true,
+      url: 'https://github.com/playwright-community/eslint-plugin-playwright#no-eval',
+    },
+    messages: {
+      noEval: 'Unexpected use of page.$eval().',
+      noEvalAll: 'Unexpected use of page.$$eval().',
+    },
+    type: 'problem',
+  },
+};

lib/rules/no-page-pause.js

@@ -1,8 +1,10 @@
+const { isPageIdentifier, isPauseIdentifier } = require("../utils/ast");
+
 module.exports = {
   create(context) {
     return {
-      MemberExpression(node) {
-        if (node.object.name === "page" && node.property.name === "pause") {
+      CallExpression(node) {
+        if (isPageIdentifier(node) && isPauseIdentifier(node)) {
           context.report({ messageId: "noPagePause", node });
         }
       },

lib/utils/ast.js

@@ -0,0 +1,62 @@
+function isPageIdentifier({ callee }) {
+  return (
+    callee &&
+    callee.type === 'MemberExpression' &&
+    callee.object.type === 'Identifier' &&
+    callee.object.name === 'page'
+  );
+}
+
+function isEvalIdentifier({ callee }) {
+  return (
+    callee &&
+    callee.property &&
+    callee.property.type === 'Identifier' &&
+    callee.property.name === '$eval'
+  );
+}
+
+function isEvalAllIdentifier({ callee }) {
+  return (
+    callee &&
+    callee.property &&
+    callee.property.type === 'Identifier' &&
+    callee.property.name === '$$eval'
+  );
+}
+
+function isElementHandleIdentifier({ callee }) {
+  return (
+    callee &&
+    callee.property &&
+    callee.property.type === 'Identifier' &&
+    callee.property.name === '$'
+  );
+}
+
+function isElementHandlesIdentifier({ callee }) {
+  return (
+    callee &&
+    callee.property &&
+    callee.property.type === 'Identifier' &&
+    callee.property.name === '$$'
+  );
+}
+
+function isPauseIdentifier({ callee }) {
+  return (
+    callee &&
+    callee.property &&
+    callee.property.type === 'Identifier' &&
+    callee.property.name === 'pause'
+  );
+}
+
+module.exports = {
+  isPageIdentifier,
+  isElementHandleIdentifier,
+  isElementHandlesIdentifier,
+  isEvalIdentifier,
+  isEvalAllIdentifier,
+  isPauseIdentifier,
+};

test/no-eval.spec.js

@@ -0,0 +1,51 @@
+const { RuleTester } = require('eslint');
+const rule = require('../lib/rules/no-eval');
+
+RuleTester.setDefaultConfig({
+  parserOptions: {
+    ecmaVersion: 2018,
+  },
+});
+
+const wrapInTest = (input) => `test('verify noEval rule', async () => { ${input} })`;
+
+const invalid = (code) => ({
+  code: wrapInTest(code),
+  errors: [{ messageId: code.includes('page.$eval') ? 'noEval' : 'noEvalAll' }],
+});
+
+const valid = (code) => ({
+  code: wrapInTest(code),
+});
+
+new RuleTester().run('no-eval', rule, {
+  invalid: [
+    // $eval with no arguments as const
+    invalid('const searchValue = await page.$eval("#search", el => el.value);'),
+
+    // $eval
+    invalid('await page.$eval("#search", el => el.value);'),
+
+    // $$eval
+    invalid('await page.$$eval("#search", el => el.value);'),
+
+    // $eval with arguments as function
+    invalid('const html = await page.$eval(".main-container", (e, suffix) => e.outerHTML + suffix, "hello");'),
+
+    // $$eval with no arguments as const
+    invalid('const divCounts = await page.$$eval("div", (divs, min) => divs.length >= min, 10);'),
+  ],
+  valid: [
+    // locator evaluate
+    valid('await page.locator(".tweet").evaluate(node => node.innerText)'),
+
+    // element handle evaluate
+    valid('await (await page.$(".tweet")).$eval(".like", node => node.innerText)'),
+
+    // element handle evaluate all
+    valid('await (await page.$(".tweet")).$$eval(".like", node => node.innerText)'),
+
+    // locator evaluateAll
+    valid('await page.locator("div").evaluateAll((divs, min) => divs.length >= min, 10);'),
+  ],
+});