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

WebDriverIO – Using Xpath Locators

What is Xpath?

Xpath Extends for XML Path. Xpath is a way to traverse/navigate through XML Document. As HTML has similar structure of XML, so we can use the same Xpath for traversing/navigating through the HTML Content

Types of Xpath:-

1. Absolute Xpath: – Absolute Xpath traverse HTML Document from the root of the HTML content. It start with one forward Slash /
2. Relative Xpath: – Relative Xpath can traverse HTML Document from anywhere of the HTML content. It starts with two forward Slash //

Relative Xpath is recommended to use as compared to Absolute Xpath, To know more about Xpath, Click here and scroll to Heading Xpath Expression Locators in Detail. Or you can check our YouTube link.

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 Click on ‘ClickToGetAlert’ Button via Absolute Xpath and After that using Relative Xpath using Xpath Locators in WebDriverIO. Both will generate the same result just to demonstrate how use of Relative Xpath is easy as compared to Absolute Xpath:-

Using Xpath Locators

First, I will demonstrate the exercise we need to perform to Click on ‘ClickToGetAlert’ Button using Xpath (Absolute) Locator of WebDriverIO , and then will demonstrate the exercise to Click on ‘ClickToGetAlert’ Button using Xpath(Relative) Locator of WebDriverIO ,followed by practically demonstrating the WebDriverIO Automation code for achieving it.

Exercise:-

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

2)  Absolute Xpath Exercise: – Find Xpath for ClickToGetAlert Button on the Webpage.

3) Click on ClickToGetAlert Button.

4) Relative Xpath Exercise: – Find Xpath for ClickToGetAlert Button on the Webpage.

5) Click on ClickToGetAlert Button.

Practical Demonstration:

Following are the Steps to Perform above Exercise (i.e. Click on ‘ClickToGetAlert’ Button using Xpath (Absolute) Locator of WebDriverIO , then Click on ‘ClickToGetAlert’ Button using Xpath(Relative) Locator of WebDriverIO) 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 “Xpath_locator_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 Clicking on ClickToGetAlert Button by both the way Absolute Xpath and Relative Xpath Using Xpath Locators in 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('Click on ClickToGetAlert Button Using Xpath Locators in WebDriverIO',() => {
        
     it('should find Absolute Xpath for ClickToGetAlert Button and Then click on it',() => {
        browser.url('http://omayo.blogspot.com')
        $('/html/body/div[4]/div[2]/div[2]/div[2]/div[2]/div[2]/div[2]/div/div[4]/div[3]/div/aside/div[1]/div[4]/div[1]/input').click()
        browser.pause(3000); 
        });
     
     it('should find Relative Xpath for ClickToGetAlert Button and Then click on it',() => {
        browser.url('http://omayo.blogspot.com')
        $('//*[@id="alert1"]').click()
        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 as shown below:

8) Run geckodriver.exe in the Powershell terminal as shown below to run Geckodriver in background.

9) 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 “Xpath_locator_test.js” will get executed successfully, the Firefox Browser will launch and then based on respective Xpath Click on ‘ClickToGetAlert’ Button present on omayo.blogspot.com web application gets clicked 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 Xpath Locators using WebDriverIO. I will explain other Locators/Selectors 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>>