<<Previous Post                          << Complete Tutorial>>                             Next Post>>

WebDriverIO – isClickable

isClickable Command Returns true under the following criteria where the selected DOM-element:-

1. Exists
2. Is Visible
3. Is within View Port
4. its center is not overlapped with another element
5. is not disabled

If it doesn’t match the above criteria then isClickable returns false.

Note:- isClickable works only in web and webviews, it doesn’t work in the mobile app native context.

Syntax :- $(selector).isClickable()

Exercise:-

1) Navigate to http://omayo.blogspot.com/

2) Find the Xpath of Disabled Element Present on the page.

3) Now Use isClickable Command and Observe the results.

Practical Demonstration:

Following are the steps to Perform above exercise (i.e., to identify disabled Element i.e., a disabled Button by its Xpath and use isClickable Command to observe the results)

Pre-requisite: Download the project from here (Click here to Download) and Unzip it.

1) Open Visual Studio Code on your system.

2) Click on File and select Open Folder. Select the project folder on which your workspace is present.

3) Expand ‘test’ from the Explorer, right-click on the displayed ‘specs’ and select ‘New file’ option as shown below :

4) Give any name of the newly created file say ‘isClickable_command_test.js’ and copy the below-given code into the newly created file as shown below and save the file:

The following is the WebDriverIO sample code for using isClickable() Command of WebDriverIO on Disable Button present on the page by using on ‘omayo.blogspot.com’ application.

You can understand this code, by reading the comments provided in the below code:

describe('This Example show usage of isClickable() command in webdriverio', () => {
  it('should give us false if isClickable() has been applied on disable element', ()=> {
  browser.url('http://omayo.blogspot.com');
  var disabledElement = $('//button[@id="but1"]').isClickable();
  console.log(disabledElement);
 });
});

5) Click on ‘wdio.conf.js’ to open in the IDE, and make sure the Test file name is updated properly and browser name should be changed from firefox to chrome in this file as shown below and save it:-

6) Click on Terminal and Open New Terminal.

7) Git Bash Terminal will look like this as below:-

8) Start Selenium Standalone server using the command as given below:-

./node_modules./bin./selenium-standalone start

9) Open Another Terminal like we did in step 6 and run below command.

./node_modules./bin/wdio wdio.conf.js

Observe that the ‘isClickable_command_test.js’ will get executed successfully. The chrome Browser will launch, then it will look out the element based on the XPath and respective action will be taken by WebDriverIO Automation code.

And also, the result will be displayed as ‘Passed’ in the terminal as shown below:-

This is how we can take the help of isClickable() command of WebDriverIO to check whether the element present on the page is clickable or not. I will explain other commands to perform different operations on WebPages using WebDriverIO in the upcoming Articles.

Next Steps:

> To learn more about WebDriverIO, continue to the next post (Click on Next Post link below)

> Check complete WebDriverIO Tutorial Contents here (Click here)

Please leave your questions/comments/feedback below.

Happy Learning ?

About Me > Ajay Lunia 

Connect to me on LinkedIn (Click here)

On a mission to contribute to the Software Testing Community in all possible ways.

<<Previous Post                          << Complete Tutorial>>                             Next Post>>