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

Locators/Selectors in WebDriverIO

In this article, I am going to explain – ‘What are Locators/Selectors?’ and followed by different types of Locators/Selectors in WebDriverIO.

After explaining the above things, I will explain each and every Locators/Selectors in detail & practical in the upcoming articles.

What are Locators/Selectors?

The JSON Wire Protocol provides several selector strategies to query and locate UI elements. Locators/Selectors locate the UI (User Interface) elements of a page like Button, Text Field, and Dropdowns etc.

First let’s understand the UI elements using the following example:

Example#1 – Suppose we’ve to automate a test, where the User have to log into Tutorialsninja.com/demo/

Steps to Log in to Tutorialsninja.com/demo application:

1. Browse http://tutorialsninja.com/demo/ in any browser
2. In ‘Tutorialsninja’ Log In page, enter your email id into the E-mail Address text box.
3. Enter your Facebook password into the Password text box. 
4. Click on ‘Login’ button.

In the above example, Username text box, Password text box and Log In text box are the UI elements to be identified by the automation tool (as shown below).

Example#2 – Suppose we’ve to automate a test, where the User have to search for ‘WebDriverIO Tutorial by Ajay Lunia’ in Google.

Steps to search for ‘ WebDriverIO Tutorial by Ajay Lunia ‘ in Google:

1. Browser https://www.google.com/ in any browser
2. In ‘Google’ page, enter text ‘WebDriverIO Tutorial by Ajay Lunia into the ‘Search’ Box
3. Click on ‘Google Search’ Button

In the above example ‘Search’ box and ‘Google Search’ button are the UI elements to be identified by the automation tool (as shown below).

So now you have understood how to identify the UI elements required by our automation on any page.

Now let’s understand the Locators/Selectors:

In order to understand the Locators/Selector, we should understand the answer for the below question.

How can the WebDriverIO Automation Tool identify the above explained UI elements for automating the tests?

So, the simple answer is that WebDriverIO uses the Locators/Selectors in the automation code for locating/finding the UI elements on the Web Pages (as shown below).

As you now understood the purpose of Locators in WebDriverIO Automation, let’s find out what actually the locators are:

Identifying a UI element on the application screen is an important feature for any automation tool.

Locators allow the WebDriverIO Automation tool to find UI elements on a page that can be used in our automation tests.

i.e. The WebDriverIO Automation Tool uses Locators to find and match the elements on your page that it needs to interact with while running the automation scripts.

Commonly used different Locators/Selectors in WebDriverIO are listed as below: –

1) CSS Query Selector

2) Link Text

3) Partial Link Text

4) Element with certain text

5) Tag Name

6) id

7) Xpath

8) Chain Selectors

9) And others (Will be explained in the future articles)

In this article, I have explained the Locators/Selectors, Purpose of Locators/Selectors and different types of commonly used Locators/Selectors.

I will practically demonstrate each and every locator/selector mentioned in this article 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>>