Find Web Elements using Selenium WebDriver

We can identify web elements in the web page using the following two tools: 

1. Developer Tools
   
2. FireBug and FirePath

Developer Tools –

Right-click on the web page. Navigate to inspect element to find the developer’s tool. 

Note: There are some websites where the right-click is disabled. eg. IRCTC, banking websites, etc. In order to open the developer’s tool on these websites click “Fn+F12”. 

Developer’s tools are not user-friendly and we can not write X path and CSS selectors for them. 

FireBug and FirePath –

FireBug is an add on available with the Firefox browser only. It is used to identify the web-elements on a web page. 

Fire path is a third-party tool for FireBug which is also an add-on available for the Firefox browser only. By using the Fire path we can identify the web elements and we can write customized X path and CSS selectors. We can also use this tool to evaluate the customized X path written. By default, Fire Path generates an absolute X Path. 

Note:

• Using FireBug and Fire Path we can achieve cross-browser testing.
• Both FireBug and Fire Path currently have no support for the Firefox browser version quantum i.e 57 or above.

Steps to use FireBug and Fire Path: 

i) Right-click on the web element. Navigate to “inspect in Fire Path”. 
ii) If the right-click is disabled then open the Fire Path by clicking on the FireBug icon. 

LOCATORS: Locators are used to locate the web element on the basis of HTML tags, attributes and HTML texts. There are 8 types of locators in Selenium WebDriver: 

• id(): This locator has the highest precedence when searching for web elements in a web page. Its value is always unique for the particular web element in the entire web page and hence you won’t get multiple matches when you use this locator. Whenever there is an id attribute in the HTML code we use this.
• name(): Wherever there is a name attribute in the HTML code for any web element then we use this locator.
• className(): Whenever there is a class attribute in the HTML code we use this locator.
• tagName(): Whenever there is a web element with a unique HTML tag we use this locator.
• linkText(): Whenever there is a link with a unique HTML text associated with it we use this locator.
• partialLinkText(): Whenever there is a link in a webpage with a lengthy text associated with it, we use this locator by using partial HTML text from the link.
• cssSelector(): In comparison to the XPath, the cssSelector is a much faster locator and is much more widely used. It is more complex than the remaining locators but is most effective as in the absence of certain html tags, we can use this to locate the web element.
• xpath(): It is a locator which is used to locate a web element using tags, attributes, and text. We can use the X Path for HTML documents as well as XML documents. There are two types of XPath, a. Absolute XPath, b. Relative X Path.

Absolute and relative Xpath – 

Absolute XPath: This XPath locates the web element from the root element to the required child node. In real-time automation scripts, we should not use absolute XPath. 
Note: For dynamic applications such as an Ajax application, we cannot use absolute XPath. 

Relative XPath: It is the customized XPath, which finds the elements by using tags, attributes or text. 

These locators are static method present inside an abstract class called “by”. There are two major methods to find and modify web elements on a web page – 

findElement(): We use this method to find the web elements in the web page. Its return type is web element is an interface. This method finds the web elements on the basis of locators and if this method fails to find the web elements on the page then it gives NoSuchElementException. This method is present inside the Searchcontextinterface. 

sendKeys(): We use this method to enter data inside a text box field in the web page. It takes as an argument a character sequence i.e “String” and i.e Enum. It is present inside the web element interface.