How to Refresh Page in Playwright

To refresh a page in Playwright, you can use the page.reload() method, which will reload the current page.

Table of Contents

1. Syntax
2. Demo Website
3. Example

Syntax

await page.reload();
await page.reload(options);

Arguments:

• options - Object (optional)
  • timeout - number (optional): maximum operation time in milliseconds. The default is 0 - no timeout. The default value can be changed via navigationTimeout option in the config, or by using the browserContext.setDefaultNavigationTimeout(), browserContext.setDefaultTimeout(), page.setDefaultNavigationTimeout() or page.setDefaultTimeout() methods.
  • waitUntil (optional): load | domcontentloaded | commit | networkIdle. Default value is load.
    • load: consider operation to be finished when the load event is fired.
    • domcontentloaded: When this event is fired, consider the operation finished.
    • networkIdle:DISCOURAGED consider operation to be finished when there are no network connections for at least 500 ms. Don't use this method for testing, rely on web assertions to assess readiness instead.
    • commit: Consider operation to be finished when network response is received and the document started loading.

Returns: Promise<null|Response>

Demo Website

For demo let's fill in value of both input on autopract refresh example page. 

Once you will refresh value for input-1 will be displayed and value for input-2 will be cleared.

Example

test.only('Reload Page', async ({ page }) => {
    await page.goto('http://autopract.com/selenium/refresh/');

    // Fill in Input
    await page.locator("#display").type('Hello')
    await page.locator("#clear").type('World') 

    // Reload or Refresh Page
    await page.reload()

    // Get value of both inputs
    const input1 = await page.locator("#display").inputValue('value')  
    const input2 = await page.locator("#clear").inputValue('value')  
    
    // Verify Values After Refresh
    expect(input1).toEqual("Hello")
    expect(input2).toEqual("")
})