WebdriverIO - Scrolling Operations

We can perform scrolling operations with the WebdriverIO by using the scrollIntoView method. This method does not accept any parameter and can be applied to the browser object or on a particular element.

Syntax

The syntax is as follows −

const p = $('#loc')
p.scrollIntoView()

Or,

browser.scrollIntoView()

In the below image, let us scroll to the footer element link - Helping and click on it.

Scrolling Operations

To begin, follow Steps 1 to 5 from the Chapter titled Happy path flow with WebdriverIO.

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('Scroll', function(){    
      // launch url
      browser.url('https://www.tutorialspoint.com/index.htm')  
      //identify element 
      const e = $("=Helping")
      //scroll to element
      e.scrollIntoView()
      e.click()
      //get page title
      console.log(browser.getTitle() + ' - Page time after click')
   });
});

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 −

Scrolling Operations Screen

After the command has been executed successfully, the page title of the page obtained on clicking the link after scrolling - Helping Tutorials Point - Tutorialspoint gets printed in the console.

Advertisements