ContextQMD
Back to Biomejs

noPlaywrightWaitForTimeout

src/content/docs/linter/rules/no-playwright-wait-for-timeout.mdx

latest9.1 KB
Original Source

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/noPlaywrightWaitForTimeout`](/reference/diagnostics#diagnostic-category) - This rule doesn't have a 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-wait-for-timeout`](https://github.com/playwright-community/eslint-plugin-playwright/blob/main/docs/rules/no-wait-for-timeout.md)

How to configure

json
{
	"linter": {
		"rules": {
			"nursery": {
				"noPlaywrightWaitForTimeout": "error"
			}
		}
	}
}

Description

Disallow using page.waitForTimeout().

Playwright provides methods like page.waitForLoadState(), page.waitForURL(), and page.waitForFunction() which are better alternatives to using hardcoded timeouts. These methods wait for specific conditions and are more reliable than arbitrary timeouts.

Examples

Invalid

js
await page.waitForTimeout(5000);
<pre class="language-text"><code class="language-text">code-block.js:1:7 <a href="https://biomejs.dev/linter/rules/no-playwright-wait-for-timeout">lint/nursery/noPlaywrightWaitForTimeout</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Unexpected use of </span><span style="color: lightgreen;"><strong>page.waitForTimeout()</strong></span><span style="color: lightgreen;">.</span> <strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>await page.waitForTimeout(5000); <strong> │ </strong> <strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong> <strong>2 │ </strong> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Hardcoded timeouts are flaky and make tests slower. Use conditions that wait for specific events.</span> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Prefer using built-in wait methods like </span><span style="color: lightgreen;"><strong>page.waitForLoadState()</strong></span><span style="color: lightgreen;">, </span><span style="color: lightgreen;"><strong>page.waitForURL()</strong></span><span style="color: lightgreen;">, or </span><span style="color: lightgreen;"><strong>page.waitForFunction()</strong></span><span style="color: lightgreen;"> instead.</span> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Consider using web-first assertions like </span><span style="color: lightgreen;"><strong>expect(locator).toBeVisible()</strong></span><span style="color: lightgreen;"> which auto-wait for conditions.</span> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit </span><span style="color: lightgreen;"><a href="https://biomejs.dev/linter/#nursery">https://biomejs.dev/linter/#nursery</a></span><span style="color: lightgreen;"> for more information.</span> </code></pre>
js
await page.waitForTimeout(1000);
<pre class="language-text"><code class="language-text">code-block.js:1:7 <a href="https://biomejs.dev/linter/rules/no-playwright-wait-for-timeout">lint/nursery/noPlaywrightWaitForTimeout</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Unexpected use of </span><span style="color: lightgreen;"><strong>page.waitForTimeout()</strong></span><span style="color: lightgreen;">.</span> <strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>await page.waitForTimeout(1000); <strong> │ </strong> <strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong> <strong>2 │ </strong> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Hardcoded timeouts are flaky and make tests slower. Use conditions that wait for specific events.</span> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Prefer using built-in wait methods like </span><span style="color: lightgreen;"><strong>page.waitForLoadState()</strong></span><span style="color: lightgreen;">, </span><span style="color: lightgreen;"><strong>page.waitForURL()</strong></span><span style="color: lightgreen;">, or </span><span style="color: lightgreen;"><strong>page.waitForFunction()</strong></span><span style="color: lightgreen;"> instead.</span> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Consider using web-first assertions like </span><span style="color: lightgreen;"><strong>expect(locator).toBeVisible()</strong></span><span style="color: lightgreen;"> which auto-wait for conditions.</span> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit </span><span style="color: lightgreen;"><a href="https://biomejs.dev/linter/#nursery">https://biomejs.dev/linter/#nursery</a></span><span style="color: lightgreen;"> for more information.</span> </code></pre>

Valid

js
await page.waitForLoadState();
js
await page.waitForURL('/home');
js
await page.waitForFunction(() => window.innerWidth < 100);
</TabItem> </Tabs>