How to give Fixed wait in playwright With out any condition Like we had in cypress : Cy.wait(600)

Question

How to give Fixed(Implicit Wait) wait in playwright With out any condition

Like we had in cypress :

Cy.wait(600);

Thank You

Like we had in cypress :

Cy.wait(600);

Answer 1

To give a fixed wait in Playwright without using any conditions, you can use the page.waitForTimeout method. This method will pause the script for a specified amount of time before continuing.

await page.waitForTimeout(2000); // waits for 2 seconds

You can also use the page.waitForFunction method with a function that returns true after a certain amount of time. For example:

await page.waitForFunction(() => {
  const now = Date.now();
  return now - start > 2000;
});

This will wait for 2 seconds before returning true.

Note that these methods should be used sparingly as they can cause delays in the script execution. It is generally better to use specific conditions to determine when to continue, such as waiting for a specific element to be present or for a page to load.

Answer 2

Avoid using hard waits with playwright(or with any library)!

Issue with Hard waits:

Hard waits do only one thing , they simply wait for specified time without considering any application actual response time which is very rigid approach.

See the below example:

await page.waitFor(5000); // hard wait for 5000ms

This will wait for 5 seconds regardless of actual response time which may be less or more than 5 seconds which is bad in both cases as in first case it has to wait unnecessary for longer time where object is already loaded and in second scenario it will fail after waiting unnecessary for 5 seconds if object is not going to load at all in failing scenario.

Recommended Approach

In-built waits

Playwright has in-built waiting mechanism on navigation and page interactions. As they are part of playwright itself , it is better to use them and customize it if required.

Explicit waits

There is another way to handle waits explicitly only in scenarios where auto-waiting is not a sufficient or efficient approach to handle depending on specific scenarios but in general it should be avoided if auto-waiting is enough for the requirement.

Waiting for page navigations and API responses

1)page.waitForNavigation to wait until a page navigation (new URL or page reload) has completed.

2)page.waitForLoadState This waits until the required load state has been achieved.

3)page.waitForURL This waits until a navigation to the target URL.

4)page.waitForResponse waits till the response from the given API is received.

Wait for element

In lazy-loaded pages, it can be useful to wait until an element is visible with locator.waitFor(). Alternatively, page interactions like page.click() auto-wait for elements.

// Navigate and wait for element
await page.goto('https://example.com');
await page.getByText('Example Domain').waitFor();

// Navigate and click element
// Click will auto-wait for the element
await page.goto('https://example.com');
await page.getByText('Example Domain').click();

Waiting on page events

We can also directly wait on page events using page.waitForEvent.

Customized Wait Function

At last we can also write (if really needed) customized wait functions using WaitForFunction for very specific scenarios or specific applications or controls.

Answer 3

This is 5 sec timeout

await new Promise(resolve => setTimeout(resolve, 5000));