Back to Biomejs

noPlaywrightMissingAwait

src/content/docs/linter/rules/no-playwright-missing-await.mdx

latest12.7 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/noPlaywrightMissingAwait`](/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/missing-playwright-await`](https://github.com/playwright-community/eslint-plugin-playwright/blob/main/docs/rules/missing-playwright-await.md)

How to configure

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

Description

Enforce Playwright async APIs to be awaited or returned.

Playwright has asynchronous matchers and methods that must be properly awaited. This rule identifies common mistakes where async Playwright APIs are not properly handled, which can lead to false positives in tests.

Examples

Invalid

js
test('example', async ({ page }) => {
    expect(page.getByRole('button')).toBeVisible();
});
<pre class="language-text"><code class="language-text">code-block.js:2:5 <a href="https://biomejs.dev/linter/rules/no-playwright-missing-await">lint/nursery/noPlaywrightMissingAwait</a> <span style="color: #000; background-color: #ddd;"> FIXABLE </span> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Async matcher </span><span style="color: lightgreen;"><strong>toBeVisible</strong></span><span style="color: lightgreen;"> must be awaited or returned.</span> <strong>1 │ </strong>test('example', async (&#123; page &#125;) =&gt; &#123; <strong><span style="color: Tomato;">&gt;</span></strong> <strong>2 │ </strong> expect(page.getByRole('button')).toBeVisible(); <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><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>3 │ </strong>&#125;); <strong>4 │ </strong> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Async matchers return a Promise that must be handled.</span> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Add </span><span style="color: lightgreen;"><strong>await</strong></span><span style="color: lightgreen;"> before the expression or </span><span style="color: lightgreen;"><strong>return</strong></span><span style="color: lightgreen;"> it from the function.</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> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Unsafe fix</span><span style="color: lightgreen;">: </span><span style="color: lightgreen;">Add </span><span style="color: lightgreen;"><strong>await</strong></span><span style="color: lightgreen;"> before the call.</span> <strong> 2 │ </strong><span style="opacity: 0.8;">·</span><span style="opacity: 0.8;">·</span><span style="opacity: 0.8;">·</span><span style="opacity: 0.8;">·</span><span style="color: MediumSeaGreen;">a</span><span style="color: MediumSeaGreen;">w</span><span style="color: MediumSeaGreen;">a</span><span style="color: MediumSeaGreen;">i</span><span style="color: MediumSeaGreen;">t</span><span style="opacity: 0.8;"><span style="color: MediumSeaGreen;">·</span></span>expect(page.getByRole('button')).toBeVisible(); <strong> │ </strong> <span style="color: MediumSeaGreen;">+</span><span style="color: MediumSeaGreen;">+</span><span style="color: MediumSeaGreen;">+</span><span style="color: MediumSeaGreen;">+</span><span style="color: MediumSeaGreen;">+</span><span style="color: MediumSeaGreen;">+</span> </code></pre>
js
test('example', async ({ page }) => {
    test.step('step', async () => {});
});
<pre class="language-text"><code class="language-text">code-block.js:2:5 <a href="https://biomejs.dev/linter/rules/no-playwright-missing-await">lint/nursery/noPlaywrightMissingAwait</a> <span style="color: #000; background-color: #ddd;"> FIXABLE </span> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;"><strong>test.step</strong></span><span style="color: lightgreen;"> must be awaited or returned.</span> <strong>1 │ </strong>test('example', async (&#123; page &#125;) =&gt; &#123; <strong><span style="color: Tomato;">&gt;</span></strong> <strong>2 │ </strong> test.step('step', async () =&gt; &#123;&#125;); <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><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>3 │ </strong>&#125;); <strong>4 │ </strong> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Test steps are asynchronous.</span> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Add </span><span style="color: lightgreen;"><strong>await</strong></span><span style="color: lightgreen;"> before the expression or </span><span style="color: lightgreen;"><strong>return</strong></span><span style="color: lightgreen;"> it from the function.</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> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Unsafe fix</span><span style="color: lightgreen;">: </span><span style="color: lightgreen;">Add </span><span style="color: lightgreen;"><strong>await</strong></span><span style="color: lightgreen;"> before the call.</span> <strong> 2 │ </strong><span style="opacity: 0.8;">·</span><span style="opacity: 0.8;">·</span><span style="opacity: 0.8;">·</span><span style="opacity: 0.8;">·</span><span style="color: MediumSeaGreen;">a</span><span style="color: MediumSeaGreen;">w</span><span style="color: MediumSeaGreen;">a</span><span style="color: MediumSeaGreen;">i</span><span style="color: MediumSeaGreen;">t</span><span style="opacity: 0.8;"><span style="color: MediumSeaGreen;">·</span></span>test.step('step',<span style="opacity: 0.8;">·</span>async<span style="opacity: 0.8;">·</span>()<span style="opacity: 0.8;">·</span>=&gt;<span style="opacity: 0.8;">·</span>&#123;&#125;); <strong> │ </strong> <span style="color: MediumSeaGreen;">+</span><span style="color: MediumSeaGreen;">+</span><span style="color: MediumSeaGreen;">+</span><span style="color: MediumSeaGreen;">+</span><span style="color: MediumSeaGreen;">+</span><span style="color: MediumSeaGreen;">+</span> </code></pre>

Valid

js
test('example', async ({ page }) => {
    await expect(page.getByRole('button')).toBeVisible();
});
js
test('example', async ({ page }) => {
    await test.step('step', async () => {});
});
js
test('example', async ({ page }) => {
    return expect(page.getByRole('button')).toBeVisible();
});
</TabItem> </Tabs>