Auto-Timeouts in Playwright

Tutorial 19​​ –​​ Auto Timeouts​​ in​​ Playwright​​ 

What you will Learn​​ in this​​ blog:

• Auto Timeouts​​ in PW

• Code snippets

Auto Timeouts​​ in PW

The​​ below​​ url​​ page mentions about the descriptions of various Timeouts in Playwright

https://playwright.dev/docs/test-timeouts​​ 

Notice below that there is no limit set for ‘Global Timeout’

There is also a mention of the usage of ‘timeout’ for a single action. Make a special note about the syntax​​ of timeout

Let us see a pratical example to demonstrate the usage of ‘timeout’.

Launch​​ http://uitestingplayground.com/ajax​​ 

Notice the scenario description that says “after we press the button, the​​ ajax​​ data will appear​​ after​​ 15 seconds”. Thus the wait time here is 15 seconds​​ 

Let us click the button

After 15 seconds, the data appears

Inspect the button

Inspect the ajax data​​ (notice that it is represented by class bg-success)​​ 

So we can write

Once the PW clicks the button, it will wait for the ajax data.​​ 

We can use the ‘waitFor()’ method. This method uses the default timeout.​​ Let us​​ locate​​ the ajax data using it’s text

Let us now fetch the innertext of the ajax data and store it in a variable.​​ This time, let us​​ locate​​ the ajax data using it’s class​​ css selector (we could have also located it using text like we did above)

We are also printing the text of the fetched ajax data using console.

Our code looks like below

Save and execute the test.​​ 

Notice that the test passes and the ajxmsg gets printed in console

So, PW did wait automatically for 15 seconds,​​ it did not throw any error.

Now, let us comment line#7 and add a new line#8 with timeout of 40 seconds

Save and execute. As expected,​​ the test will pass since 39​​ sec​​ (40 minus 1)​​ timeout > 15 sec timeout to display ajax data​​ 

Let us now comment the 40 sec timeout and add 20 sec timeout

Save and execute. As expected, the test will pass since​​ 19​​ sec​​ (20 minus 1)​​ timeout > 15 sec timeout to display ajax data

Now, let us make a borderline timeout of 16 secs

Save and execute. As expected, the test will pass since​​ 15​​ sec​​ (16 minus 1)​​ timeout =​​ 15 sec timeout to display ajax data

Next, let us make an exact 15​​ sec timeout

Save and execute. As expected, the test will fail this time since 14 sec timeout (15 minus 1) < 15 sec timeout to display ajax data

So this is how timeouts work.

For further reading,

https://playwright.dev/docs/test-timeouts#global-timeout​​ 

Code snippet

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

test("ajax",​​ async​​ ({​​ page​​ })​​ =>​​ {

   await​​ page.goto('http://uitestingplayground.com/ajax')

   await​​ page.locator('text=Button Triggering AJAX Request').click()

   //passes for all the below scenarios

   //await page.locator('text=Data loaded with AJAX get request.').waitFor()

   //await page.locator('text=Data loaded with AJAX get request.').waitFor({timeout: 40000})

   //await page.locator('text=Data loaded with AJAX get request.').waitFor({timeout: 20000})

   //await page.locator('text=Data loaded with AJAX get request.').waitFor({timeout: 16000})

   //Fails for below scenario

   await​​ page.locator('text=Data loaded with AJAX get request.').waitFor({timeout:​​ 15000})

   const​​ ajxmsg​​ =​​ await​​ page.locator('.bg-success').innerText();

   console.log(ajxmsg)​​ 

})

Thanks for reading!