WebdriverIO - Browser Navigation Commands

---

---

Some of the browser navigation commands used in WebdriverIO are listed below −

browser.navigateTo(URL)

This command is used to navigate to an application whose URL is passed as a parameter.

Syntax

The syntax is as follows −

browser.navigateTo('https://the-internet.herokuapp.com/redirector')

browser.back()

This command is used to navigate back in browser history.

Syntax

The syntax is as follows −

browser.back()

browser.forward()

This command is used to navigate forward in browser history.

Syntax

The syntax is as follows −

browser.forward()

browser.refresh()

This command is used to refresh the present webpage.

Syntax

The syntax is as follows −

browser.refresh()

To begin, follow Steps 1 to 5 from the Chapter titled Happy path flow with WebdriverIO which are as follows −

Step 1 − Install NodeJS. The details on how to perform this installation are given in detail in the Chapter titled Getting Started with NodeJS.

Step 2 − Install NPM. The details on how to perform this installation are given in detail in the Chapter titled Installation of NPM.

Step 3 − Install VS Code. The details on how to perform this installation are given in detail in the Chapter titled VS Code Installation.

Step 4 − Create the Configuration file. The details on how to perform this installation are given in detail in the Chapter titled Configuration File generation.

Step 5 − Create a spec file. The details on how to perform this installation are given in the Chapter titled Mocha Installation.

Step 6 − Add the below code within the Mocha spec file created.

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Navigation', function(){    
      // launch url
      browser.url('https://www.tutorialspoint.com/about/about_careers.htm')
      // navigate to another url
      browser.navigateTo("https://www.tutorialspoint.com/codingground.htm")
      //navigate back in history  
      browser.back()
      //get title back in browser history
      console.log('Back in Browser history: ' + browser.getTitle())
      //navigate forward in history  
      browser.forward()
      //get title forward in browser history
      console.log('Forward in Browser history: ' + browser.getTitle())
      //refresh browser
      browser.refresh()
      //get title after refresh
      console.log('Page Title after refresh: ' + browser.getTitle())
   });
});

Run the Configuration file - wdio.conf.js file with the following command −

npx wdio run wdio.conf.js

The details on how to create a Configuration file are discussed in detail in the Chapter titled Wdio.conf.js file and Chapter titled Configuration File generation.

The following screen will appear on your computer −

After the command has been executed successfully, the page title obtained on navigating back in browser history - About Careers at Tutorials Point - Tutorialspoint is printed.

Then, the page title obtained on navigating forward in browser history - Free Online IDE and Terminal is printed.

Finally, the page title obtained after page refresh - Free Online IDE and Terminal is printed.