<<Previous Post << Complete Tutorial>> Next Post>>
WebDriverIO – MoveTo
MoveTo(xOffset,yOffset) :- MoveTo command is mainly used for hovering over an element. In Simple word by using MoveTo Command one can hover over element with offset x and y if passed but not mandatory. If x offset and y offset has not been passed then moveTo command will ask mouse cursor to hover to center of the Element.
Usage: – $(selector).moveTo({ xOffset, yOffset })
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 to understand moveTo() Command by Hovering over Blogs Menu which provides the list of Menu Under Blogs on Omayo.blogspot.com WebApplication, using MoveTo() command of WebDriverIO.
Using MoveTo() Command
First, I will demonstrate the exercise where we will open URL in browser window, then Hover Over Blogs Menu which generates list of Menu Under Blogs using MoveTo() command, followed by practically demonstrating the WebDriverIO Automation code for achieving it.
Exercise:-
1) Navigate to http://omayo.blogspot.com/
2) Find Xpath of Blogs Menu present on Omayo.blogspot.com web application.
3) Hover over Blog Menu to see the menu list under it.
Practical Demonstration:
Following are the Steps to Perform above Exercise (i.e. Hover Over Blogs Menu which generates list of Menu Under Blogs using MoveTo() command) using WebDriverIO Automation code in ‘Visual Studio Code’ IDE:
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 “moveTo_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 to Hover Over Blogs Menu which generates list of Menu Under Blogs using MoveTo() command on ‘Omayo.blogspot.com’ Web application.
You can understand this code, by reading the comments provided in the below code:
Copy the code from here:-
describe('This Example show usage of MoveTo() command in webdriverio', () => {
it(' should demonstrate mouse hover over blog menu list on omayo.blogspot.com web application’ , () => {
browser.url('http://omayo.blogspot.com/')
$("li.has-sub > a").moveTo(30,60) //hovering over blogs menu list
browser.pause(3000);
});
});
5) Click on ‘wdio.conf.js’ to open in the IDE, and make sure the Test file name is updated properly in this file as shown below and save it:
6) Click on Terminal and Open New Terminal. 
7) By Default, Powershell Terminal will open, change it to git bash as shown below:
8) Open Another Terminal in the same way we did in the step 6 and run below command in terminal
.\node_modules\.bin\wdio .\wdio.conf.js
Observe that the ‘moveTo_command_test.js’ will get executed successfully, the firefox Browser will launch, and open URL given in code 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 help of moveTo() Command of WebDriverIO to hover over any desired element and see menu list under the element. Likewise, I will explain other commands to perform different operations on Web Pages using WebDriverIO in the upcoming Articles.
Next Steps:
> 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>>
