no-element-handle

Try in Playground
playwright

oscar143

Best PracticeInformational

0

playwright

No CWE or CVE

Disallow usage of element handles (no-element-handle)

Disallow the creation of element handles with page.$ or page.$$.

Ast Rule: function call


no-element-handle

How to write a rule
// See https://doc.codiga.io/docs/rosie/ast/javascript/rosie-ast-javascript-functioncall/
function getFunctionName(node) {
  if (node?.astType === "member") {
    return node.name.value;
  }

  if (node?.astType === "string") {
    return node.value;
  }

  return "";
}

function visit(node, filename, code) {
  // only run inside spec files
  if (!filename.includes(".spec.") && !filename.includes(".test.")) return;

  // Check this is a function call and the function name is a simple string
  const functionName = getFunctionName(node.functionName);

  if (
    node.functionName &&
    node.functionName.astType === "member" &&
    (functionName === "$" || functionName === "$$") &&
    getFunctionName(node.functionName.parent) === "page"
  ) {
    const error = buildError(
      node.functionName.start.line,
      node.functionName.start.col,
      node.functionName.end.line,
      node.functionName.end.col,
      "Unexpected use of element handles.",
      "INFORMATIONAL",
      "BEST_PRACTICE"
    );

    const editUpdate = buildEditUpdate(
      node.functionName.name.start.line,
      node.functionName.name.start.col,
      node.functionName.name.end.line,
      node.functionName.name.end.col,
      "locator"
    );

    const fix = buildFix(
      `Replace page.${functionName} with page.locator`,
      [editUpdate]
    );

    addError(error.addFix(fix));
  }
}

test.spec.js

Expected test result: has error

Examples of incorrect code for this rule

// Element Handle
const buttonHandle = await page.$('button');
await buttonHandle.click();

// Element Handles
const linkHandles = await page.$$('a');

test.spec.js

Expected test result: no error

Example of correct code for this rule


const buttonLocator = page.locator('button');
await buttonLocator.click();
Add comment

Log in to add a comment


    Be the first one to leave a comment!

Codiga Logo
Codiga Hub
  • Rulesets
  • Playground
  • Snippets
  • Cookbooks
soc-2 icon

We are SOC-2 Compliance Certified

G2 high performer medal

Codiga – All rights reserved 2022.