<<Previous Post << Complete Tutorial>> NextPost>>
WebDriverIO – getLocation Command
getLocation command is used to find the location of elements on the page.
The response of getLocation commands shows X and Y coordinate of elements on the page. Where Origin (0,0) starts from the top-left corner of the page.
Syntax :- $(selector).getLocation(prop)
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 try to find out the location of Arun Motoori pic in X and Y Coordinates and will print it out on console.
1) Navigate to http://omayo.blogspot.com/
2) Find out the Xpath of Arun’s pic which is present on omayo.blogspot.com application.
3) Display the X and Y Coordinates along with its actual Height and Width on the console.
Practical Demonstration:
Following are the steps to Perform above exercise (i.e., to display the Location of Arun Pic in X and Y Coordinates through getLocation command of WebDriverIO )
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 ‘getLocation_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 getLocation() Command of WebDriverIO to find the coordinates of Arun pic 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 getLocation() command in WebDriverIO',()=> {
it('should give us location in X and Y Coordinates of Arun Pic on omayo.blogspot.com',()=> {
browser.url('http://omayo.blogspot.com');
let pic = $("//div[@class='sidebar section']//div[@class='widget HTML']//div[@class='widget-content']//img");
let location = pic.getLocation();
console.log(location);
});
});
5) Click on ‘wdio.conf.js’ to open in the IDE, and make sure the Test file name is updated properly 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 ‘getLocation_command_test.js’ will get executed successfully. The chrome Browser will launch, then it will look out for XPath of Arun Pic present on omayo.blogspot.com web application, and likewise, 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 the getLocation() command of WebDriverIO to display the location coordinates of Arun pic present in omayo.blogspot.com web application, Likewise 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>> NextPost>>
