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

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

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://stackoverflow.com/a/74933906/1831456.

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;

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()".

You should avoid hard-coded waits like waitForTimeout(3000), because they make tests brittle and slow. Instead, you should wait for a concrete signal that the table has updated, using Playwright's locator-based assertions or visibility/state checks.

Root-Cause Solution: Wait for a Reliable Change in the Table

Assuming that after submitting the form, the admin user appears as a new row in the table, here’s how you should structure your code:

Option 1: Wait for a specific row/text to appear in the table:

await page.locator('button[type="submit"]').click();

// Wait for the user row to appear (use unique identifier like email/username)
await expect(page.locator('table')).toContainText('[email protected]');

Option 2: Wait for the number of rows to increase (if table rows are stable)

Before submitting:

const rowsBefore = await page.locator('table tbody tr').count();

After submitting:

await page.locator('button[type="submit"]').click();

// Wait for one more row to appear
await expect
  .poll(async () => await page.locator('table tbody tr').count())
  .toBe(rowsBefore + 1);

Option 3: Wait for a table loader/spinner to disappear (if applicable)

If the table shows a loading spinner or “Loading…” message during the refresh:

await page.locator('button[type="submit"]').click();

// Wait for spinner to appear and disappear
await page.locator('.spinner').waitFor({ state: 'visible' });
await page.locator('.spinner').waitFor({ state: 'hidden' });

// OR wait until "Loading..." text disappears
await expect(page.locator('text=Loading...')).toHaveCount(0);

Summary:

Don’t rely on fixed timeouts. Instead, wait for meaningful UI changes — like the presence of user info, row count increase, or a loading indicator disappearing.

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();