<<Previous Post << Complete Tutorial>> Next Post>>
WebDriverIO – isFocused Command
isFocused Command returns True or False based on the selected Dom-Element has focus on it or not. If there are multiple elements present in DOM which is matched by the selector then isFocused return true for the element which currently has focus on it.
Syntax:- $(selector).isFocused()
Pre-requisite: Have ‘Visual Studio Code’ IDE installed in your machine (Click here to install if not installed in your machine)
Here is the small Exercise where we will click on the checkbox and use isFocused to see if we are getting true as our focus would remain on the checkbox on which we have clicked. And will also see another checkbox that is already selected and see if we are getting false as that already selected checkbox is not in current focus.
Exercise:-
1) Navigate to http://omayo.blogspot.com/
2) Find the Xpath of the checkbox which needs to be selected and on which focus needs to be check.
3) Find the Xpath of the checkbox which is already selected on the web application.
4) Now Use isFocused Command on the newly selected checkbox and already selected checkbox. Then verify the results.
Practical Demonstration:
Following are the steps to Perform above exercise (i.e., to select checkbox Element as desired and use isFocused command to see if it returning true as the focus would remain on selected checkbox rather than already selected checkbox)
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 ‘isFocused_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 isFocused() Command of WebDriverIO on checkboxes present on the page on ‘omayo.blogspot.com’ web application.
You can understand this code, by reading the comments provided in the below code:
describe('This Example show usage of isFocused() command in webdriverio', () => {
it('should give us True for the element which has current focus on it', ()=> {
browser.setTimeout({
'implicit': 60000 //Providing Implicit Timeout
});
browser.url('http://omayo.blogspot.com');
var viewPort = "//h2[contains(text(),'Iframe1 & Iframe2')]";
viewPort.scrollIntoView();
browser.pause(3000);
var checkBoxButtonLaptop = "input[value='Laptop']";
$(checkBoxButtonLaptop).click();
console.log($(checkBoxButtonLaptop).isFocused()); //should display true as focus is present on checkBoxButtonLaptop
var checkBoxButtonBook = input[value='Book'];
console.log($(checkBoxButtonBook).isFocused()); //should display false as focus is not present on checkBoxButtonBook
});
});
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 ‘isFocused_command_test.js’ will get executed successfully. The chrome Browser will launch, then it will look out the checkbox 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 isFocused() command of WebDriverIO to check the current state of focus on element present on the page. 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?
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>>
