Navigate back and forward in the browser using Cypress

Table of contents

Reading Time: 3 minutes

Hello readers,
In this blog, we will learn about how to navigate backward and forward in cypress.

Navigation:

As the name suggested, navigation can be defined as a way to go forward and backward to the previous or next URL in the browser history. It is the way that helps users or visitors to find content that they want to see.

Cypress:

Cypress is a free open-source automation javascript-based framework for end-to-end testing. we use cypress to automate web browser testing. It works completely on a real browser without the need for driver binaries. Cypress runs on the NodeJS server. It provides us a visual interface to indicate all tests and which all commands are running, passed, or failed.

Navigation in cypress:

Cypress comes with a way to navigate back or forward to the previous or next URL in the browser’s history. In cypress, we use the ‘go’ command to navigate:

Here is the Syntax for navigating backward and forward in cypress :

cy.go(direction)
cy.go(direction, options)

For navigating backward in cypress we follow the below steps:

Step 1: First, we open the visual studio code then In the terminal we run the command ‘npx cypress open’ then the cypress dashboard will open. From the cypress dashboard, we will click on the ‘navigate.js’ file then we visit the below page

step 2: Then we use the below command for navigating backward in cypress:

cy.go('back')

cy.go(-1)

Both the above command is equivalent to clicking the back button

step 3: And after using any of the above commands we visit the below page

For navigating forward in cypress in cypress we follow the below steps:

step 2: Then we use the below command for navigating forward in cypress:

cy.go('forward')

cy.go(1)

Both the above command is equivalent to clicking the forward button

step 3: And after using any of the above commands we visit the below page

To perform navigate backward and forward in cypress:

For this, we created a navigation.js file that contains our test and we used the cypress site “https://example.cypress.io/”.

Here is the code that contains all the tests.

/// <reference types="cypress" />

it('Implicit Assertion', function (){
    // test step to launch a URL
    cy.visit("https://example.cypress.io/")


    // visit to the utility page
    cy.get('#navbar > :nth-child(1) > :nth-child(2) > a').click()

    // Navigate to the backward page 
    cy.go('back')

    // Navigate to the fordward page 
    cy.go('forward')
    cy.get('#_ > a').click()

    // Alternate command for navigate backward
    cy.go(-1)
    // Alternate command for navigate fordward
    cy.go(1)

});