Selenium Web Elements

Selenium  uses  Web elements for automation of a webpage, every object or control in a web page is referred as an elements, there are different ways to find an element in a web page they are:

• ID

• Name

• Tag

• Attribute

• CSS

• Linktext

• PartialLink Text

• Xpath etc

 Since Web Elements play a pivotal role in testing ,the first thing to do is to locate these elements on the web page. Automation of a webpage requires the driver to locate the web element and either trigger a JavaScript event like-click, enter, select or type in the field value.

The Need for FindElement and FindElements:

Find Element command is used to uniquely identify a (one) web element within the web page. Whereas, Find Elements command is used to uniquely identify the list of web elements within the web page.

Find Element returns the first matching web element if multiple web elements are discovered by the locator, throws NoSuchElementException if the element is not found, and is  used only to detect a unique web element.

Where as Find Elements returns a list of matching web elements, a empty list is returned if no matching element is found.

Selenium uses different locators to find the web elements, each of them are unique. Following are the different locators used:

Finding the web element by ID:

ID’s are unique for each element so it is a common way to locate elements using ID Locator. It is the most common fastest and safest way to detect an element. If any website has non-unique Ids or has dynamically generated ids then this strategy can’t be used to uniquely find an element, instead, it will return the first web element which matches the locator.  How we can overcome such situations, will be explained in the XPATH/CSS selector strategy.

Syntax:

WebElement elm = driver.findElement(By.id("abc"));

Finding the web element by NAME:

This method is similar to Find By Id except the driver will try to locate an element by “name” attribute instead of “id” attribute.

Syntax:

WebElement elm = driver.findElement(By.name("name"));

Finding the web element by ClassName:

This method finds elements based on the value of the CLASS attribute. More applicable for locating multiple elements which has a similar css class defined against them.

Syntax:

driver.findElements(By.className(<locator_value>)) ;//for list of elements

or

driver.findElement(By.className(<locator_value>)) ;//single web element

Finding the web element by Tag Name:

This method finds elements based on the HTML tag name of the element. This is not widely used and used as the last resort if the particular web element can’t be detected by Id/name/link/className/XPATH/CSS.

Syntax:

driver.findElement(By.tagName(<locator_value>)) ;//single web element

or

driver.findElements(By.tagName(<locator_value>)) ;//for list of elements

TextFind by Link Text/Partial Link:

With this method, one can find elements of “a” tags (Link) with the link names or having matching partial link names. This strategy is only applicable in finding element(s) of type anchor tags which contain a text value.

Syntax

driver.findElement(By.linkText(<link_text>)) ;//single web element

or

driver.findElements(By.linkText(<link_text>)) ;//for list of elements

driver.findElement(By.partialLinkText(<link_text>)) ;//single web element

or

driver.findElements(By.partialLinkText(<link_text>)) ;//for list of elements

Finding the webelement by CSS Selector:

For websites generating dynamic Ids like ADF based applications or websites which are built on latest javascript frameworks like – React js which may not generate any Ids or names can’t use locator by Id/Name strategy to find elements. Instead, we have to use either CSS selector or XPath selectors.

User can either chose a CSS selector over XPath selector depending on the need. One can choose a hybrid approach. For simple screens CSS selectors(forward only) is preferred over XPATH, however, for complex traversal (forward/backward and complex search conditions) XPATH is the only choice.

CSS selectors have native browser support, so on occasion basis, it can turn out to be faster than XPATH selector.

Finding the web element by XPATHSelector:

XPATH is more readable and the learning curve is less steep since it uses standard XML query syntaxes, however, CSS selectors though have simpler syntax support but are not standard like XPATH and other documentation support, unlike XPATH.

Following are some of the mainly used formats of CSS Selectors –

• Tag and

• ID

• Tag and Class

• Tag and Attribute

• Tag, Class, and Attribute

• Sub-String Matches

  • Starts With (^)

  • Ends With ($)

  • Contains (*)

• Child Elements

  • Direct Child

  •  Sub-child

  • nth-child

    
    

Finding the web element by XPATH selector:

In automation we generally prefer to use id, name, class, etc. these kinds of locators. However, sometimes we can not find any of them in the DOM and also sometimes locators of some elements change dynamically in the DOM. In these kinds of situations, we need to use smart locators. These locators must be capable to locate complex and dynamically changing web elements.

XPATH selectors can be used in such instances ,and mostly used contains() option to locate the web elements.

There are also other tactics of writing XPATH selectors. These are briefly explained below –

Absolute and Relative XPath

Absolute	Relative
A direct way to locate an element	Starts from the middle of the DOM element
Brittle can break if the path of accessing the element changes due to the position	Relatively stable since the search is relative to DOM
Starts with “/” and from the root	Starts with “//” and it can start search anywhere  in the DOM

Based on the kind of testing that has to be done, like for example take a ecommerce website where in the customer loads the webpage, scrolls through the page clicks on the interested item, add it in the cart clicks on payment .Here different type of web elements can be used based on the requirement and feasibility.

Happy Testing!!