Async and Await in Playwright

While writing our first test, we used the async and await keywords in our test. Let's understand the main reason behind using it.

const {test, expect} = require('@playwright/test');

test('Google Title Assertion', async ({page})=> 
{
    await page.goto("http://google.com");
    await expect(page).toHaveTitle("Google");
});

Table of Contents

1. Why we use Async and Await
2. What is Asynchronous Nature
3. Examples
4. Video Tutorial

Why do we use async and await in Playwright?

Almost all playwright scripts use the async keyword before any function and await before the statement. Even if you open example.spec.js, which comes bundled with Playwright installation, you will observe async is used before the function and await before the statement. We need these two keywords in PlayWright to write our test because any tool based on node js is asynchronous. 

What is asynchronous nature?

If your code is synchronous, your program will execute the second line once the first line is executed successfully. While in the case of asynchronous programming, your second line can execute even before the first line. Now, if our automation script runs in an asynchronous way, most of the script will fail. For example, to test successful login, you want to click on the login button only once you have filled in your username and password. With asynchronous nature, there is the possibility that the script will click on the login button and then fill in the username or password.

Examples

1. Remove await before visiting the page

const {test, expect} = require('@playwright/test');

test('Google Title Assertion', async ({page})=> 
{
    page.goto("http://google.com");
    await expect(page).toHaveTitle("Google");
});

Your script will fail, and you will get the error Navigation failed because the page was closed!

This is because we are trying to visit the page even before the browser is launched.

2. Remove await before the assertion

const {test, expect} = require('@playwright/test');

test('Google Title Assertion', async ({page})=> 
{
    await page.goto("http://google.com");
    expect(page).toHaveTitle("Google");
});

Now this time, expect is executing even before the title value is loaded, and we are getting null because expect is not waiting for the page to load completely. Check Expected and Receiving String in below screenshot.

3. Remove the async keyword

const {test, expect} = require('@playwright/test');

test('Google Title Assertion', ({page})=> 
{
    await page.goto("http://google.com");
    await expect(page).toHaveTitle("Google");
});

Now this time, you will get a syntax error that "await is only valid in async functions and the top-level bodies of modules." 

To avoid the above error, we have used the async function. The asynchronous function can be written in Node. js using 'async' preceding the function. The async function helps to write promise-based code asynchronously via the event loop. A promise is an object returned by an asynchronous function, which represents the current state of the operation. 

The await expression causes async function execution to pause until a Promise is settled (that is, fulfilled or rejected), and to resume execution of the async function after fulfillment, which means the second line of code waits till the first line of code executes completely.