noPlaywrightUnsafeReferences (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.5
Diagnostic Category: lint/nursery/noPlaywrightUnsafeReferences
This rule has an unsafe fix.
The default severity of this rule is error.
This rule belongs to the following domains:
- playwright
Sources:
- Same as playwright/no-unsafe-references

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noPlaywrightUnsafeReferences": "error"
6
      }
7
    }
8
  }
9
}

Description

Disallow using variables from outside the function passed to page.evaluate() and page.addInitScript().

Playwright doesn’t run the function passed to page.evaluate() or page.addInitScript() in your test. It converts the function to text, sends it to the browser page, and runs it there. Variables declared in your test file don’t exist in the browser page, so using them inside the function throws an error when the test runs.

To use a value from your test inside the function, pass it as the second argument of page.evaluate() or page.addInitScript(), and read it from the function’s parameter. Playwright copies the value to the browser page for you.

The rule only checks variables declared in the same file. It ignores global variables, such as document or Promise, and variables declared with TypeScript’s declare keyword.

Examples

Invalid

1
const x = 7;
2
const y = 8;
3
await page.evaluate(() => x * y);

code-block.js:3:27 lint/nursery/noPlaywrightUnsafeReferences  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The variable x is declared outside the function passed to evaluate().
  
    1 │ const x = 7;
    2 │ const y = 8;
  > 3 │ await page.evaluate(() => x * y);
      │                           ^
    4 │ 
  
  ℹ The variable y is also declared outside the function.
  
    1 │ const x = 7;
    2 │ const y = 8;
  > 3 │ await page.evaluate(() => x * y);
      │                               ^
    4 │ 
  
  ℹ Playwright runs this function inside the browser page, where variables from your test don't exist. Using them throws an error when the test runs.
  
  ℹ Pass the values as the second argument of evaluate(), and read them from the function's parameter.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Unsafe fix: Pass the variables as an argument.
  
    3 │ await·page.evaluate(([x,·y])·=>·x·*·y,·[x,·y]);
      │                      ++++++          ++++++++

1
const theme = "dark";
2
await page.addInitScript(() => {
3
    localStorage.setItem("theme", theme);
4
});

code-block.js:3:35 lint/nursery/noPlaywrightUnsafeReferences  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The variable theme is declared outside the function passed to addInitScript().
  
    1 │ const theme = "dark";
    2 │ await page.addInitScript(() => {
  > 3 │     localStorage.setItem("theme", theme);
      │                                   ^^^^^
    4 │ });
    5 │ 
  
  ℹ Playwright runs this function inside the browser page, where variables from your test don't exist. Using them throws an error when the test runs.
  
  ℹ Pass the values as the second argument of addInitScript(), and read them from the function's parameter.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Unsafe fix: Pass the variables as an argument.
  
    1 1 │   const theme = "dark";
    2   │ - await·page.addInitScript(()·=>·{
      2 │ + await·page.addInitScript(([theme])·=>·{
    3 3 │       localStorage.setItem("theme", theme);
    4   │ - });
      4 │ + },·[theme]);
    5 5 │

Valid

1
const x = 7;
2
const y = 8;
3
await page.evaluate(([x, y]) => x * y, [x, y]);
4

5
const theme = "dark";
6
await page.addInitScript((theme) => {
7
    localStorage.setItem("theme", theme);
8
}, theme);
9

10
await page.evaluate(() => document.title);