How to pause the test script for 3 seconds before continue running it? Playwright

Question

I'm running a test called create admin. The test will first create admin, then check if the admin was created successfully.

In the script, I have a part of code where I want to wait for 3 seconds before continuing because whenever the submit button was clicked, the website will need to take 3s to refresh the admin table (list of user info) after navigation was done. For more information, this refresh is not a navigation and therefore, my 'waitForNavigation()' is not working.

Therefore, the process will be like: 'fill out the form' > 'click submit button' > 'wait for navigation' > 'reload user table (3s).

If I don't wait 3s for the table to refresh, the test will throw an error because the registered user will not be found in the table (I have other scripts to find the user).

This is how the navigation looks like when 'Save button' was clicked:

After that, the table takes 3s to refresh and it looks like:

This is how the 'create' function looks like:

Qualified

See this - stackoverflow.com/a/74933906 – Connotative

Answer 1

Playwright has this capability natively:

await page.waitForTimeout(3000);

Documentation for this is here: https://playwright.dev/docs/api/class-page#page-wait-for-timeout

---

EDIT: As per the comment on this answer, I feel it is essential to reiterate that adding pauses in this manner is usually a bad idea.

If at all possible, your test should be waiting, instead, for an expected change of state on the page; there are very few situations when you would not want to do this.

Adding a waitForTimeout can be very tempting as it is so easy. But you are inviting trouble and flaky tests downstream, not to mention you are artificially increasing the duration of your test suite.

This explains these issues further: https://mcmap.net/q/535824/-how-to-give-fixed-wait-in-playwright-without-any-condition-like-we-had-in-cypress-cy-wait-600.

Viborg

This is hardcoding hence should be avoided in any case. Correct approach is to wait for the expected change in the page after login. – Connotative

See this - https://mcmap.net/q/535824/-how-to-give-fixed-wait-in-playwright-without-any-condition-like-we-had-in-cypress-cy-wait-600 – Connotative

Answer 2

You can wrap setTimeout as Promise and use it inside async functions:

const delay = ms => new Promise(resolve => setTimeout(resolve, ms))

where ms - delay in millisceonds you wanna wait.

Usage in your code:

...
await page.click('button :text-is("Save")');
await delay(3000); // <-- here we wait 3s
return username;

Bootee

This doesn't work in my case, using @playwright/test 1.39.0 – Pollywog

Doesn't seem to work in my Playwright tests either, though I can't think why. – Francinafrancine

It wasn't working for me in Playwright as well (strangely it did work while debugging a test), but now on @playwright/test 1.40.1 and Node v18.16.0 it does work. I am not sure if the update fixed it or something else. – Fabi

Answer 3

While you can wait for exactly 3 seconds it is inherently either flaky or unnecessarily slow, or both. It's better to detect the changes in the page that tell you the user has been added, e.g. that little green popup.

You could do that with a normal "expect" that awaits for that element "toBeVisible()".

Hairpin

This should be the accepted answer as its suggesting the correct practice not just the solution. – Connotative

Answer 4

Use setTimeout to do that. Here's an example

function  delayedCheck() {
  const processComplete = true; // set the right boolean here

  if ( processComplete ) {
    // Do something
  } else {
    setTimeout(delayedCheck, 3000); // try again in 3 seconds
  }
}

delayedCheck();

Ovid

I don't see the point in this at all, or how it's useful. In its state as written it just always immediately runs the "do something" branch and never even sets a timeout. Nothing is awaited. – Francinafrancine