src/content/docs/linter/rules/no-playwright-element-handle.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components';
<Tabs> <TabItem label="JavaScript (and super languages)" icon="seti:javascript"> :::caution This rule is part of the [nursery](/linter/#nursery) group. This means that it is experimental and the behavior can change at any time. ::: ## Summary - Rule available since: `v2.4.2` - Diagnostic Category: [`lint/nursery/noPlaywrightElementHandle`](/reference/diagnostics#diagnostic-category) - This rule has an [**unsafe**](/linter/#unsafe-fixes) fix. - The default severity of this rule is [**information**](/reference/diagnostics#information). - This rule belongs to the following domains: - [`playwright`](/linter/domains#playwright) - Sources: - Same as [`playwright/no-element-handle`](https://github.com/playwright-community/eslint-plugin-playwright/blob/main/docs/rules/no-element-handle.md){
"linter": {
"rules": {
"nursery": {
"noPlaywrightElementHandle": "error"
}
}
}
}
Disallow usage of element handles (page.$() and page.$$()).
Element handles are discouraged in Playwright. Use locators instead, which auto-wait and are more reliable. Locators represent a way to find elements at any moment, while element handles are references to specific elements that may become stale.
const button = await page.$('button');
const buttons = await page.$$('.btn');
const element = await frame.$('#element');
const button = page.locator('button');
await button.click();
const buttons = page.locator('.btn');
await expect(buttons).toHaveCount(3);
await page.getByRole('button', { name: 'Submit' }).click();