How to find a missing AWAIT in Playwright test code

TL;DR : my AI prompt to find missing ‘await’ clauses

I am writing asynchronous test automation code using Playwright and Typescript.
Check the test code below for missing “await” clauses:
test(‘your Playwright test’, async ({ page }) => {
// etc…
});

The problem – missing an await

One of the most frustrating issues test automation engineers can have with Playwright is when they forget to put in an await clause. A test you’re executing will fail or be flaky, the error message displayed will be confusing, the IDE won’t point to anything being wrong and the code will look fine.

I have learnt through experience that when this happens the best approach is to assume you have a missing await in your Playwright test code, and check for that first. This technique has saved me time, my sanity and quite a few grey hairs!

In the past I used to locate the missing await by carefully analyzing each line of code in the failing test. Although I got experienced at finding the problem, it was time consuming and intensive work. Now, thanks to AI and LLMs, I have a useful prompt that hunts them down.

An example – using the Playwright example tests

When installing Playwright in your first project you will get two example tests in the example.spec.ts file, located in the tests folder. We are going to modify the 'get started link' test to simulate a missing await scenario, and then use Claude to demonstrate how to find any missing await.

This the test to modify:

test('get started link', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // Click the get started link.
  await page.getByRole('link', { name: 'Get started' }).click();

  // Expects page to have a heading with the name of Installation.
  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});

Now let’s remove the await from all three lines of code:

test('get started link', async ({ page }) => {
  page.goto('https://playwright.dev/');

  // Click the get started link.
  page.getByRole('link', { name: 'Get started' }).click();

  // Expects page to have a heading with the name of Installation.
  expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});

Notice below that Visual Studio Code does not indicate that there is any missing await clauses, because it doesn’t really understand whether we intended to run this code synchronously or asynchronously.

When this test is run then we will get an error:

Using Claude to find the missing “await” clauses

So we’ve seen there’s an error, we don’t understand what it means, and the code looks ok. Now we assume there’s a missing await, and plug in our prompt and code into a LLM like Claude (or ChatGPT, Gemini etc):

This is what Claude responds:

Which is a perfect – it even provides you with the corrected code!

Using GitHub Copilot to find missing “await” clauses

If you have GitHub Copilot enabled in Visual Studio Code, then it’s even easier to find those pesky missing “await” clauses.

If you want to just search within a single test method for missing await clauses, then highlight the test code or click the cursor inside the test, then press Ctrl-I to open a Copilot dialog, and ask it to find missing "await" clauses

Copilot will successfully find the missing await clause in the assert statement and suggest a fix, which you can then Accept:

Also note that by using Ctrl-I to open the inline chat session Copilot will only search the current context which is the highlighted test method or where the cursor is located. If you followed the instructions above you will see that it will not have fixed a similar missing await clause in the previous ‘has title’ test.

To search all code in a file highlight all the code in the file or click the cursor location at the top outside the test methods, then try again. Or use Ctrl-Shift-I to open a non-inline chat session where by default it will restrict changes to the file open in the current edit window (example.spec.ts)

To find all missing await clauses in all test files, open a non-inline Copilot chat session and choose not to limit the query to the currently open file by clicking on the X next to it. In the screenshot below I asked it not to limit the fix to example.spec.ts which is the currently open edit window.

Check for a missing “await” even if your test passes

I would recommend checking for missing await clauses in your Playwright test automation code even if your test passes.

This is because although your test might pass on your local machine, it might not when running in the CI/CD pipeline, or alongside executing other tests. Ultimately the code is flawed but just happens to work, so needs fixing.

In the example above the test passes on my computer locally if I remove the await from the second line of code only:

test('get started link', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // Click the get started link.
  page.getByRole('link', { name: 'Get started' }).click();

  // Expects page to have a heading with the name of Installation.
  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});

However I would feel very uncomfortable committing this code to the team repository knowing it could fail.

Conclusion

Missing await clauses in your test automation code have been really difficult to triage and fix in the past, especially for QAs learning test automation. Using an AI prompt to examine your code for a missing await is an efficient way of fixing your Playwright code when an error occurs. Or at least eliminating a missing await as a possible cause of the error.