Click Browser Back and Forward Button in Playwright

Profile picture for user arilio666

In Playwright using goBack() method we can click browser back button and using goForward() method we can click on browser forward button. 

Table of Contents

  1. Playwright goBack() Method
  2. Playwright goForward() Method
  3. Example
  4. Video Tutorial

Playwright goBack() Method

The goBack() method navigates to the previous page in the browsing history and returns the main resource response. In instances where multiple redirects have occurred, the navigation will resolve with the response of the final redirect. If can not go forward, returns null. The syntax for this method is as follows:

await page.goBack();
await page.goBack(options);

options: Object (optional)

  • timeout: number (optional) - Maximum operation time in milliseconds, defaults to 30 seconds, pass 0 to disable timeout. The default value can be changed by using the browserContext.setDefaultNavigationTimeout(), browserContext.setDefaultTimeout(), page.setDefaultNavigationTimeout() or page.setDefaultTimeout() methods.
  • waitUntil: (optional) - When to consider operation succeeded, defaults to load. Events can be either:
    • domcontentloaded - consider operation to be finished when the DOMContentLoaded event is fired.
    • load - consider operation to be finished when the load event is fired.
    • networkidle - consider operation to be finished when there are no network connections for at least 500 ms.
    • commit - consider operation to be finished when network response is received and the document started loading.

returns Promise<null|Response>#

Playwright goForward() Method

The goForward() method allows for navigation to the next page in the browsing history and returns the main resource response. In case of multiple redirects, the navigation will resolve with the response of the last redirect. If can not go forward, returns null. Here is the syntax:

await page.goForward();
await page.goForward(options);

options: Object (optional)

  • timeout: number (optional) - Maximum operation time in milliseconds, defaults to 30 seconds, pass 0 to disable timeout. The default value can be changed by using the browserContext.setDefaultNavigationTimeout(), browserContext.setDefaultTimeout(), page.setDefaultNavigationTimeout() or page.setDefaultTimeout() methods.
  • waitUntil: (optional) - When to consider operation succeeded, defaults to load. Events can be either:
    • domcontentloaded - consider operation to be finished when the DOMContentLoaded event is fired.
    • load - consider operation to be finished when the load event is fired.
    • networkidle - consider operation to be finished when there are no network connections for at least 500 ms.
    • commit - consider operation to be finished when network response is received and the document started loading.

returns Promise<null|Response>#

Example

To practice, on ProgramsBuzz home page click on Ask Doubt link and then use goBack() and goForward() method.

test.only('Back and Forward', async ({page})=> {
    
    // Navigate to home page
    await page.goto("http://www.programsbuzz.com")
    
    // Click Ask Doubt to Navigate to Ask Doubt Page
    await page.locator("li.we-mega-menu-li a[href='/ask-doubt']").click()
    
    // Navigate to Home Page
    await page.goBack()

    // Navigate to Ask Doubt Page
    await page.goForward()
})

Video Tutorial: Playwright Click Browser Back and Forward Button