In this section we will see Browser navigation, this will help us to go back and forth between webpages we wish to visit during the test.

Almost all the websites these days have a sophisticated routes on which we need to navigate in order to accomplish our test, as these are very fundamental for website testing cypress has provided as the below listed,

• cy.go()

• cy.reload()

• cy.visit()

To go back or forward in the browser's history, use the cy.go() command.

cy.go('back')
cy.go('forward')

By passing the arguments 1 and -1 we can perform browser click back and forward.

cy.go(-1)
cy.go(1)

To reload the page, use the cy.reload() command.

cy.reload()

By passing the arguments true page will be reloaded without using the cache

cy.reload(true)

To visit an URL or webpage we use visit, we have to pass the URL string as an argument.

cy.visit()

We can also pass timeout and function before and after a page visit.

cy.visit('URL', {timeout: <time in milli secounds>})

describe('Child Window',function(){
context('Test Cases',function(){
it('Test 01',function(){
cy.visit('http://the-internet.herokuapp.com/')
cy.get(':nth-child(5) > a').click()
cy.url().should('eq', 'http://the-internet.herokuapp.com/challenging_dom')
cy.go('back')
cy.url().should('eq', 'http://the-internet.herokuapp.com/')
cy.go('forward')
cy.url().should('eq', 'http://the-internet.herokuapp.com/challenging_dom')
cy.go(-1)
cy.url().should('eq', 'http://the-internet.herokuapp.com/')
cy.go(1)
cy.url().should('eq', 'http://the-internet.herokuapp.com/challenging_dom')
cy.visit('http://the-internet.herokuapp.com/', {timeout: 500})
})
})
})

Once the test runner hits the command visit, it opens the URL in selected browser

Next we click "Challenging DOM" for navigation to a new webpage, now as we have moved to the new webpage we can go back and move forth between new and old web pages.

We do a simple assertion on the webpage to ensure or check if we have landed on a new webpage. Then we you cypress command go to go back to old webpage. Check the below image where we can see the go command executed on Developer option and the DOM snapshot after to view that we have landed on old webpage.

Vice versa we now move forward from old webpage to new webpage by using cypress forward command. Check the below image where we can see the forward command executed on Developer option and the DOM snapshot after to view that we have landed on new webpage.

The command cy.go(-1) & cy.go(1) will also work the same way as it was done above by back and forward command. We have also given page timeout for an URL visit in the last section of the code. In below snap you can see that our test passed as we have visited the page less than half a second, command details are available in developer option.

Download the spec file below,

https://drive.google.com/open?id=1evmGGgPBJCcz7VVMMGRqyi0giCLuqQRR