How to Get Element by Tag Name In Selenium

Selenium locators are your key when dealing with locating elements on a web page. From the list of locators like ID, Name, Class, tag name, XPath, CSS selector etc, one can choose any of these as per needs and locate the web element on a web page. Since ID’s, name, XPath or CSS selectors are more frequently used as compared to tag name or linktext, people majorly have less idea or no working experience of the latter locators. In this article, I will be detailing out the usage and real-time examples of How to Get Element by Tag Name locators In Selenium.

So, what is a tag name locator in Selenium?

A tag name is a part of a DOM structure where every element on a page is been defined via tag like input tag, button tag or anchor tag etc. Each tag has multiple attributes like ID, name, value class etc. As far as other locators in Selenium are concerned, we used these attributes values of the tag to locate elements. In the case of tag name Selenium locator, we will simply use the tag name to identify an element.

Below is the DOM structure of LambdaTest login page where I have highlighted the tag names:

Email Field: < input type="email" name="email" value="" placeholder="Email" required="required" autofocus="autofocus" class="form-control mt-3 form-control-lg">

Password Field: < input type="password" name="password" placeholder="Password" class="form-control mt-3 form-control-lg" >

Login Button: < button type="submit" class="btn btn-primary btn-lg btn-block mt-3">LOGIN< /button >

Forgot Password Link: < button type="submit" class="btn btn-primary btn-lg btn-block mt-3">LOGIN< /button >

Now the question that arises in one’s mind is, when do I use this tag name locator in Selenium? Well, in a scenario where you do not have attribute values like ID, class or name and you tend to locate an element, you may have to rely on using the tag name locator in Selenium. For example, in case you wish to retrieve data from a table, you may use < td > tag or < tr > tag to retrieve data.

Similarly, in a scenario where you wish to verify the number of links and validating whether they are working or not, you can choose to locate all such links through the anchor tag.

Please note: In a simple basic scenario where an element is located just via tag, it may lead to a lot of values being identified and may cause issues. In this case, Selenium will select or locate the first tag that matches the one provided from your end. So, refrain yourself from using tag name locator in Selenium if you intend to locate a single element.

The command to identify an element via tag name in Selenium is:

This certification is for anyone who wants to stay ahead among professionals who are growing their career in Selenium automation testing.

Here’s a short glimpse of the Selenium 101 certification from LambdaTest:

Real Time Scenarios Highlighting How to Get Element by Tag Name In Selenium

Scenario 1

A basic example, where we are locating the image avatar on ‘my profile’ section of LambdaTest:

Reference is the DOM structure of the avatar:

< img src="https://www.gravatar.com/avatar/daf7dc69b0d19124ed3f9bab946051f6.jpg?s=200&d=mm&r=g" alt="sadhvi" class="img-thumbnail" >


Let’s look into the code snippet now:

Scenario 2

In this example, we will be verifying the number of links on the LambdaTest homepage and printing those link-texts:

Below is a screenshot of the console:

Scenario 3

In this example, I will showcase when one wants to identify the number of rows in a table as during runtime this information can be dynamic and hence, we need to evaluate beforehand on the number of rows and then retrieve or validate the information.

Below is the DOM structure of the table:

< tbody class="yui3-datatable-data" >< tr id="yui_patched_v3_18_1_1_1554473988939_130" data-yui3-record="model_1" class="yui3-datatable-even" >

< tr id="yui_patched_v3_18_1_1_1554473988939_130" data-yui3-record="model_1" class="yui3-datatable-even">< td class="yui3-datatable-col-name yui3-datatable-cell ">John A. Smith< /td >

1236 Some Street San Francisco CA< /td >< /tr >

//……further rows continue//

Now let’s look into its code snippet:

Snapshot of Console output:

Conclusion

As you can see, how I have used the tag name locator in Selenium on different scenarios. You can also use the tag name locator in combination with attribute value using XPath or CSS selectors. When it comes to other scenarios of locating elements, I may not suggest you using the tag name locator in Selenium but of-course scenarios mentioned above can really come in handy. Usage of tag name locator in Selenium may be limited, however, if you wish to be a proficient automation tester, then understanding how to use tag name locator and when to use it becomes very critical.