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

WebDriverIO – getSize Command

getSize Command is used to get the width and height for an DOM – Element. In simple terms, it can help you get the size of any element present in your document object model (DOM).

It can also be used to fetch only width or only height for that particular DOM-Element.

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 find out width and Height of the Image present on the page and then print them, using getSize command of WebDriverIO.

Using getSize Command

First, I will demonstrate the exercise where we will fetch Xpath of ordered list then after getting an array with element results will print 3^rd element text on console using $$ command, followed by practically demonstrating the WebDriverIO Automation code for achieving it.

Exercise:-

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

2)  Finding size of Arun’s Image present on omayo.blogspot.com web application.

Practical Demonstration:

Following are the Steps to Perform above Exercise (i.e. to find the size of Image present on omayo.blogspot.com web application and printing the size of image on console) 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 “getSize _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 finding the size of Image present on web page and printing the size of image on console by using getSize command of WebDriverIO on ‘Omayo.blogspot.com’ 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 $ command in webdriverio', () => {
    it('should fetch element based on the locator passed and perform actions accordingly', ()=> {
    browser.url('http://omayo.blogspot.com');
    const size = $('#HTML29 > div.widget-content > img').getSize();
    console.log(size); // display result in width and height , output should be { width: 150, height: 200 }
    console.log(size.width) //display only width of Image , output should be 150
    console.log(size.height) //display only height of Image output should be 200
    });
});

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) 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 ‘getSize_ Command_test.js’ will get executed successfully, the chrome Browser will launch, then xpath of image will be fetched 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:

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>>