WebdriverIO - Mouse Operations

WebdriverIO can perform operations like hovering a mouse on an element by using the moveTo method. This method shall move the mouse to the middle of the element.

Syntax

The syntax is as follows −

let p = $('#loc')
p.moveTo()

In the below image, on hovering over the Mouse Hover button, the Top and Reload buttons get displayed.

Mouse Hover

On moving the mouse out of the Mouse Hover button, the Top and Reload buttons get hidden.

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('Mouse Operatio', function(){    
      // launch url
      browser.url('https://courses.letskodeit.com/practice')  
      //identify element then hover mouse
      const e = $(".dropbtn")
      //scroll to element then mouse hover
      e.scrollIntoView()
      e.moveTo()
      browser.pause(2000)
      //verify if sub-element display on hovering
      console.log($('=Top').isDisplayed())
   });
});

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 −

Mouse Operation

After the command has been executed successfully, the boolean value is printed in the console. This is returned by the isDisplayed() function which returns true if an element is displayed on the page.

Advertisements