WebElement Locators in Selenium

In Selenium Automation, Locators are used to locating the UI (User Interface) elements of a page like TextBox field, Button etc.

 

Suppose we have to automate a test, where the User has to search for ‘Easybix’ in Google.

Steps to search for ‘Easy bix’ in Google:

  • Browser www.Google.com in any browser.

  • In ‘Google’ page, enter text ‘Easybix’ into the ‘Search’ text box.

  • Click on ‘Google Search’ Button.

 

In the above example ‘Search‘, text box and ‘Google Search‘ button are the UI elements to be identified by the automation tool.

Now the question, How can Selenium Automation Tool identify the UI elements for automating the tests. So the simple answer is by using the Locators. Let’s find out what actually the locators are:

 

Video Tutorial:

If you liked this video, then please subscribe to our YouTube Channel for more video tutorials.

 

Selenium WebDriver uses 8 locators to find the elements on web page. The following are the list of object identifier or locators supported by selenium.

 

1. Locate Web Element By ID – Web Element ID defined by attribute @id in HTML. This is most efficient and preferred way to locate an element on a web page. ID will be the unique on the web page which can be easily identified.
IDs are the safest and fastest locator option and should always be the first choice even when there are multiple choices.

Let’s see Google example with ID.

Find Element by ID

We can write script for this like this –

WebElement logo = driver.findElement(By.id(“hplogo”));

 

2. Locate Web Element By Name – Web Element Name defined by  attribute @name in HTML. After ID, the next worth seeing HTML element is Name attribute. But make sure there the name cannot be unique all the times. If there are multiple names, Selenium will always perform the action on the first matching element.

Suppose the Element Name is mkdod then we can write script like this –

WebElement logo = driver.findElement(By.name(“mkdod”));

 

3. Locate Web Element By Linktext– Web Element link defined by the anchor tag <a href=> . Finding an element with link text is very simple. But make sure, there is only one unique link on the web page. If there are multiple links with the same link text (such as repeated header and footer menu links), in such cases Selenium will perform the action on the first matching element with the link.

For example we have link —

<a href=”https://github.com/SeleniumHQ/www.seleniumhq.org/edit/master/src/main/webapp/index.jsp”>edit this page</a>

then our script will be –

 WebElement editLink= driver.findElement(By.linkText(“edit this page”));

 

4. Locate Web Element By Partial linkText– In the same way as LinkText, PartialLinkText also works in the same pattern.

For the above example link, Partial link script will be –

WebElement editLink= driver.findElement(By.PartialLinkText(“edit this”));

 

5. Locate Web Element By Tag Name– In this web element locate with tag HTML attribute. TagName can be used with Group elements like Select and checkboxes / dropdowns.

Suppose we have a drop-down with tag name dropdown and we want to select the valve option in dropdown named – US, then the script will be like this –

Select select = new Select(driver.findElement(By.tagName(“dropdown”))); select.selectByVisibleText(“US”);

We will look into this in details later.

 

6. Locate Web Element By ClassName– Web Element class defines the attribute class in HTML. Using class name we can use class name direct to identify the web element.

For example —

WebElement login= driver.findElement(By.className(“fb_footer”));

 

7. Locate Web Element By CSS Selector– Let we learn how we can use By.cssSelector in WebDriver. Look into bellow given image.

Find Element using CSS Selector

 

Let’s see the script for the above-highlighted line.

WebElement login= driver.findElement(By.cssSelector(“input[id=’fname’]”));

We will learn this in coming tutorials, how to create the CSS Selectors.

 

8. Locate Web Element By Xpath–  We have seen, how can we create the XPath for any web element using fire path. Now let’s take the above example for XPath. Xpath of the above example will be — //*[@id=’fname’]

Script for the above xpath —

WebElement name= driver.findElement(By.xpath(“//*[@id=’fname’]”));

 

 

We will discuss the CSS Selectors and XPath in details in coming tutorials. So that’s all how we can find the element in selenium for automation testing.

3 Comments
  1. Priyanka Lal 8:24 PM / May 31, 2017 - Reply

    Nice Tutorial Anshul Sir…. It’s so easy to understand … Thanks for sharing …

  2. shash Kumar 4:31 PM / June 1, 2017 - Reply

    Hi, just wanted to tell you, I liked this post. It was helpful. Keep on posting!

  3. Maaya 8:26 AM / June 3, 2017 - Reply

    keep sharing more articles like this.

Leave a Reply