WebdriverIO - Double Click

WebdriverIO can perform mouse operations like double click using the doubleClick method. With this, we can perform double clicking on the given element on the webpage.

Syntax

The syntax is as follows −

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

Let us perform the double click on the below element −

Double Click

Here, it is seen that on double clicking the Double-Click me To See Alert button, an alert box gets generated.

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('Double Click', function(){    
      // launch url
      browser.url('http://only-testing-blog.blogspot.com/2014/09/selectable.html')  
      //identify element then double click
      $("button").doubleClick()
      //get Alert Text
      console.log(browser.getAlertText() + ' - Alert Text') 
      //accept Alert
      browser.acceptAlert()
   });
});

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 titledWdio.conf.js file and Chapter titled Configuration File generation.

The following screen will appear on your computer −

Double Click Screen

After the command has been executed successfully, the Alert text is generated on double-click - You double clicked me.. Thank You.. gets printed in the console.

Advertisements