Part 2: Ways of locating Web element using: Name, Class Name, Tag Name, Link Text

Hello Folks,

In last post , I explained about locating web element using ID. I explained last post in details so that you will be able to understand other locators easily.

We will learn in this post:

  1. Locating web element using name.
  2. Locating web element using tag name.
  3. Locating web element using link text.
  4. Locating web element using partial link text.
  5. Locating web element using class name.

Locating using name:

If any web element has name as an attribute, we can identify/locate that web element using its name. See below html code of email text box in Facebook login page.

[code language=”css”]
<input id="email" class="inputtext" tabindex="1" name="email" type="email" value="" data-testid="royal_email" />
[/code]

Remember, name is an attribute of html element. It must be “name” only. You can not take any name attribute. Same applies for attribute “id”.

To locate through selenium using name, syntax is below:

WebDriver driver= new FirefoxDriver();
WebElement ele= driver.findElement(By.name("email"))// Only first matching web element
List allEle= driver.findElements(By.name("email")) // all matching web elements

Note:

  1. By is a class in package “org.openqa.selenium”.
  2. It as static methods for each locators. We know static method of class can be called using class name. That is the reason we use as By.name(String name) in findElement() and findElements() method.

It is possible that multiple web element can have same name. It may not be unique.

Locating using tag name:

HTML tags are the hidden keywords within a web page that define how your web browser must format and display the content.

Most tags must have two parts, an opening and a closing part. For example, <html>  is the opening tag and </html>  is the closing tag. Note that the closing tag has the same text as the opening tag, but has an additional forward-slash ( / ) character. I tend to interpret this as the “end” or “close” character.

[code language=”html”]
<a href="some link">home</a>
[/code]

To locate through selenium using tag name, syntax is below:

driver.findElement(By.tagName("a"));

This locator can be very useful to group web elements. If you want to know how many links are present on your webpage, you can use this locator.

[code language=”java”]
List allLinks= driver.findElements(By.tagName("a"));
System.out.println("Total links in currently loaded web page is: "+allLinks.size());
[/code]

Locating using Link Text:

We have an anchor(a) tag in HTML which is used to display a link on a web page. Within opening tag and closing tag of anchor, we can write some text as below:

[code language=”html”]
<a href="some link">home</a>
[/code]
Here, “some link” is called as linktext. Using linktext also, we can locate web element.

Syntax in Selenium to locate web element using linktext:

[code language=”java”]
WebElement link= driver.findElement(By.linkText("some link"));
List<WebElement> allLinks= driver.findElements(By.linkText("some link"));
[/code]
Note:
1. Remember this locator is applicable only to anchor tag.
2. Link text must be matched char by char. If actual link text is as “Amod<space><space> Mahajan” and you pass as “Amod <space>Mahajan” in findElement() method, it will not locate element.
3. It is case sensitive as well. “amod” is not same as “Amod”.

Locating using partial Link Text:

With linkText we have problem that it should match char by char to locate. What is link text is dynamic. For example: In a mail site (Gmail), we have inbox and in braces it shows count of unread mails. Suppose we want to clink on inbox link. You can not pass exact link text as it will be keep changing when you read mail or new mail comes in.

[code language=”html”]
<a href="https://mail.google.com/mail/u/0/#inbox" target="_top" class="J-Ke n0 aBU" title="Inbox (598)" aria-label="Inbox 1943 unread" tabindex="0">Inbox (598)</a>
[/code]

In above scenario, partialLinkText will help. There is no need to pass exact link text. We know “Inbox” will be constant always. So, we will pas just that as:

[code language=”java”]
driver.findElement(By.partialLinkText("Inbox"));
[/code]

Note: If link text is constant use linkText locator. If it is dynamic, use partiallinkText locator.

But I have seen some problems with partialLinkText. It returns wrong/proxy elements as well. You can run below code and observe:

[code language=”java”]
driver.get("https://www.flipkart.com");
// To print all links which contains "tion" in link text
List<WebElement> all =driver.findElements(By.partialLinkText("tion"));
System.out.println(all.size());
for(WebElement e:all)
{
System.out.println(e.getText());
}
// passing exact link text
List<WebElement> all =driver.findElements(By.partialLinkText("Nutrition"));
System.out.println(all.size());
for(WebElement e:all)
{
System.out.println(e.getText());
}
[/code]

Locating using class Name:
Like id, name html element may have an attribute named “class”.

[code language=”css”]
<input id="email" class="inputtext" tabindex="1" name="email" type="email" value="" data-testid="royal_email" />
[/code]

Syntax to locate web element using className:

[code language=”java”]
driver.findElement(By.className("inputtext"));
[/code]

That’s it guys. I will take dedicated post for cssSelector and xpath.
If you like my posts, please like, comment and share. Feedback and suggestions are always welcomed.

#HappyLearning

4 thoughts on “Part 2: Ways of locating Web element using: Name, Class Name, Tag Name, Link Text

  1. Thanks for your response .
    Actually I wanted to ask will the linktext method compare spaces in between a text to get the match?
    And if we are not getting a proxy value using partial link text then how to locate the same?
    Thanks

    1. Link text will compare exactly the same including space, special characters etc. You can use other locator strategies as well to locate element with some text.

  2. Thanks for such a lovely post, below point can you clarify please as both are same , so how they are not matching?
    Link text must be matched char by char. If actual link text is as “Amod Mahajan” and you pass as “Amod Mahajan” in findElement() method, it will not locate element.

    And if we are getting proxy value using partial link text then what is the solution?

    1. Hi
      I didn’t get question properly.
      Regarding proxy value, you get a proxy value of web element in Page Object Model till you use that particular web element in program.
      Thanks

Leave a Reply to Chiranjibi Cancel reply

Your email address will not be published. Required fields are marked *