noPlaywrightNthMethods (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.3
Diagnostic Category: lint/nursery/noPlaywrightNthMethods
This rule doesn’t have a fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- playwright
Sources:
- Same as playwright/no-nth-methods

How to configure

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

Description

Disallow selecting Playwright elements by position with first(), last(), and nth().

In Playwright, a locator describes how to find elements on the page. When a locator matches several elements, first(), last(), and nth() pick one of them by its position. The position of an element can change when matching elements are added, removed, or reordered, so the test can end up acting on a different element without any error. A locator that matches only the element you want keeps working when the rest of the page changes.

This rule reports every call to a method named first, last, or nth, whatever object the method is called on.

Examples

Invalid

1
await page.locator("button").first().click();

code-block.js:1:30 lint/nursery/noPlaywrightNthMethods ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ first() selects an element by its position.
  
  > 1 │ await page.locator("button").first().click();
      │                              ^^^^^^^
    2 │ 
  
  ℹ When elements are added, removed, or reordered on the page, the test can act on a different element.
  
  ℹ Use a locator that matches only the element you want, such as getByRole() with a name or getByTestId(), or narrow the matches with filter().
  
  ℹ 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.

1
await page.locator("button").last().click();

code-block.js:1:30 lint/nursery/noPlaywrightNthMethods ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ last() selects an element by its position.
  
  > 1 │ await page.locator("button").last().click();
      │                              ^^^^^^
    2 │ 
  
  ℹ When elements are added, removed, or reordered on the page, the test can act on a different element.
  
  ℹ Use a locator that matches only the element you want, such as getByRole() with a name or getByTestId(), or narrow the matches with filter().
  
  ℹ 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.

1
await page.locator("button").nth(3).click();

code-block.js:1:30 lint/nursery/noPlaywrightNthMethods ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ nth() selects an element by its position.
  
  > 1 │ await page.locator("button").nth(3).click();
      │                              ^^^^^^
    2 │ 
  
  ℹ When elements are added, removed, or reordered on the page, the test can act on a different element.
  
  ℹ Use a locator that matches only the element you want, such as getByRole() with a name or getByTestId(), or narrow the matches with filter().
  
  ℹ 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.

Valid

1
await page.getByRole("button", { name: "Submit" }).click();
2
await page.getByTestId("submit-button").click();
3
await page.getByRole("listitem").filter({ hasText: "Product 2" }).click();