Different ways to locate elements using Selenium – Python

By /
Different Ways To Locate Element In Selenium

Two or more HTML pages make up a web application. Web Elements refer to all of the component units/fields that make up a web page, such as text boxes, buttons, and so on.

Static elements are all the elements on the Data Object Model (DOM) that are rendered by the browser on any HTML page. Dynamic elements are web page elements that are invoked at runtime and dynamically added to the page.

Also read: Python Selenium Introduction and Setup

One of the most crucial phases in the automation testing of a Web application is locating web elements (UI).

Some of the element selectors in Selenium:

  • ID
  • Name
  • Class Name
  • Linked Text
  • Partial Linked Text
  • Tag Name
  • XPath
  • and CSS Selector

A Web element’s ID, Name, or Class Name is the most convenient method to find it. We can simply enter the appropriate values in the code and run the program to see whether it works.

Why we need these many selectors?

You might be wondering why do we need to have or learn about different ways to locate an element in a webpage. It is important because every time we need to fetch data from a webpage, we need to critically look at the HTML code (DOM) of that page for selectors which are unique or common. Also, there are issues regarding dynamic sites, which are loaded dynamically, AJAX sites, etc.

Types of Locators in Selenium

Different Ways To Locate
Different Ways To Locate an Element

On the basis of HTML tags, attributes, and HTML texts, locators are used to finding the web element. In Selenium WebDriver, there are eight different types of locators:

  1. ID: Whenever looking for web elements on a website page, this locator takes priority. Because its value is always unique for each web element on the whole web page, you won’t receive duplicate matches when using this locator. We utilize the id property in HTML code wherever it exists.
  2. Name: This location is used everywhere there is a name attribute in the HTML code for any web element.
  3. className: This location is used whenever the HTML code has a class attribute, generally defined for batch styling.
  4. tagName: This locator is used only when a web element has a distinctive HTML tag.
  5. linkText: This locator is used if a link has a unique HTML text connected with it.
  6. partialLinkText: We utilise this locater by using partial HTML text from the link whenever there is a link on a webpage with a lengthy text linked with it.
  7. cssSelector: The cssSelector is a significantly quicker locator than the XPath and is considerably more extensively used. It is more complicated than the other locators, but it is the most effective since we can use it to identify the web element even if specific html elements are missing.
  8. XPath: This is a locator that uses tags, attributes, and text to find a web element. The X Path may be used for both HTML and XML texts. Absolute XPath and relative XPath are the two forms of XPath.
  9. Absolute XPath – As from root element to the needed child node, this XPath locates the web element. Absolute XPath should not be used in real-time automation programmes.
  10. Relative XPath – This is a modified XPath that uses tags, attributes, or text to discover items.

Now, as we have discussed all the different ways to locate an element in a webpage using Selenium. We now discuss the most important and widely used selectors in Python Selenium for easier selection and attribution.

1. Locate elements in Selenium by CSS ID

This is by far the most straightforward approach to discovering an element. The CSS ID, which is kept in the id property of an HTML DOM element, is designed to be unique for each element on the webpage. As a result, an ID may be used to uniquely identify an element.

To access this functionality, you must use the webdriver class’s find_element_by_id() method. Here’s how to put it to use.

from selenium import webdriver
driver = webdriver.Chrome('./chromedriver.exe')
driver.get("https://www.python.org")
search_bar = driver.find_element_by_id("id-search-field")

A ‘No Such Element‘ Exception is thrown if there is no DOM element with the ID that is being searched for, which may be handled efficiently by using a try-catch block.

Every DOM element on a page should, in theory, have its own ID. However, this is not something that is regularly observed in real life. It’s possible that most items don’t have an ID, or that you’ll come across two elements with the same ID. In such circumstances, a separate technique must be used to uniquely identify a DOM element.

2. Locate elements in Selenium by CSS Class Name

An alternative way to find components on a page is to use the class name as a search term. The class name is saved in an HTML tag’s class property. A CSS class is intended to apply to a set of DOM components. Only the first element with the matching class is returned by the find_element_by_class_name() function.

If there is no element with the supplied class name, it throws a NoSuchElementException. The following is an example of how to utilize the method in the driver.

 from selenium import webdriver
driver = webdriver.Chrome('./chromedriver')
driver.get("https://www.python.org")

first_search_bar = driver.find_element_by_class_name("class-name")

An important thing to note: the above code Returns the first element with matching class only. For all the elements with the same matching class (batch selection), you need to run iteratively the find element method using a loop and store the information in this while on every iteration.

3. Locate elements by XPath in Selenium

If an element’s ID, class, or name fails to identify it, the element’s XML path must be used to locate it.

This method can also be used when reading an XML document. In this article, we’ll look at how to utilize relative paths instead of absolute routes, because absolute paths are prone to mistakes when the HTML structure (DOM) of the webpage changes.

To discover a proper element in the document, we’ll utilize the find_element_by_xpath() function. The path to the element is passed as a parameter to the find_element_by_xpath() function.

The following code may be used to locate the email input box in an HTML form:

email_input = driver.find_element_by_xpath("//form[input/@name='email']")

This bit of code looks for the page’s initial form element. This form looks for an entry with the name email and the value email, limiting it down to the needed element.

Let’s try to discover the form’s first and last names input elements:

first_name = driver.find_element_by_xpath("//form[@id='loginForm']/input[1]")

last_name = driver.find_element_by_xpath("//form[@id='loginForm']/input[2]")

It looks for a form that has the ID login form and then picks the first and second input elements of that form to be the first and last names, if appropriate.

4. Locate a Single HTML Element in Python Selenium – Misc

There are a few more element locators in the Selenium WebDriver that testers may want to investigate in addition to the common ways that we have mentioned thus far.

Finding elements by their HTML tag names may be accomplished via the use of the find_element_by_tag_name() function.

page_heading = driver.find_element_by_tag_name('h1')

A hyperlink element may also be found by searching for it in the link text. It is possible to search for a specific link’s text using the find_element_by_link_text() function, or to search for a partial link’s text using the find_element_by_partial_link_text() method.

For an Exact Link Text –

click_here_link = driver.find_element_by_link_text('Click Here')

Partial Link Text –

click_here_link = driver.find_element_by_partial_link_text('Click')

Conclusion

With this, we have reached the conclusion of the lesson on locators in Selenium using the Python programming language. We discussed a number of different techniques for selecting items inside an HTML page. Hope you have learned well about locating element/s in a webpage and are ready to implement them yourself.