What does async/await do in a Playwright test?

async/await pauses test function execution until a Promise settles, allowing asynchronous browser actions like clicks and navigations to run in predictable sequential order without nested callbacks.

This answer is one piece of Chapter 6: Async and Await.

Error Handling & Debugging
Callbacks & Promises
Async/Await Mastery
Practice and interview questions: Asynchronous JavaScript & Modern ES6+

Browser automation is inherently asynchronous: actions like clicking, typing, or navigating take real time across network and process boundaries. In JavaScript, these operations return Promises.

Marking a test function async allows you to prefix Promise-returning calls with await. The await keyword pauses execution of the test function until the browser action finishes before advancing to the following line.

Without await, JavaScript continues immediately to the next statement while the asynchronous action is still in flight. For example, reading an input's value right after an unawaited fill() usually returns an empty string, because the browser has not typed the text yet. That is a race: on another run, or another machine, the read can land after the fill, and the bug hides. With await, the action finishes first, so the next line always sees the updated page.

async-order.spec.js(https://practice.learnplayforge.com)

import { test, expect } from '@playwright/test';

test('order difference with and without await', async ({ page }) => {
  await page.goto('/catalog.html?mock=static&seed=42&autologin=1');
  const input = page.getByTestId('catalog-query');

  console.log('--- Without await ---');
  console.log('[1] calling fill() without await');
  const fillPromise = input.fill('grinder');
  console.log('[2] next line runs immediately; value in DOM is:', JSON.stringify(await input.inputValue()));
  await fillPromise;
  console.log('[3] fill promise settled; value in DOM is:', JSON.stringify(await input.inputValue()));

  await input.clear();

  console.log('--- With await ---');
  console.log('[1] calling fill() with await');
  await input.fill('grinder');
  console.log('[2] next line runs after fill finishes; value in DOM is:', JSON.stringify(await input.inputValue()));
});

Output

--- Without await ---
[1] calling fill() without await
[2] next line runs immediately; value in DOM is: ""
[3] fill promise settled; value in DOM is: "grinder"
--- With await ---
[1] calling fill() with await
[2] next line runs after fill finishes; value in DOM is: "grinder"
1 passed (2.7s)

Test yourself

You write input.fill('grinder') without await, and on the next line const value = await input.inputValue(). What can value be?

AI can write the test now. The job is knowing whether it checks anything. That's what the course teaches, one chapter at a time.

163 lessons · 226 drills · start free

What does async/await do in a Playwright test?

Related questions