Selenium: Identification of elements

For automation tester, identification of web elements is always a tricky task. In cross browser testing, if you are writing code, your code must be compatible with different browsers. For supporting different browsers, your defined code for identification of elements should be accurate and stable. Thus, to identify these web elements accurately and precisely we have different types of locators.

1. Located the element by ID:

Steps:  1.  Located the element by F12 key (Firebug shortcut key). 
            2. Hover mouse on text box.
            3. Observe that on firebug console, id is displayed.

2. Locate the element by Class name:

3. Locate the element by Name:

4. Locate by Link text:

5. Locate by xpath: By hovering mouse on any element, default xpath would be displayed on Firebug.

6. Locate the element by CSS selector: 
     CSS Selector can be distributed in : 

     1. ID

     2. Class

     3. Attribute

     4. ID Class & Attribute

     5. Sub-string

     6. Inner string

Below example showing the CSS Selector as ID. 

Partial Xpath Creation:

1. If any image file contains the source (src) ex: Profile, then below xpath will be work very easily.

     "//img[contains(@src,’Profile’)]" 

2. If any image file contains the alt (src) ex: 'Visit Us On Twitter', then below xpath will be work very     easily.

     "//img[starts-with(@alt,’Visit Us On Twitter’)]" 

Locate the element by "Tag" name

Ex: driver.findElement (By.tagName (“h1”));

Locate the element by "Web Driver Element locator" name

Before you can use this Firefox add-on, you first need to install it, to do so, please follow these few basic steps: 

Step 1: Open Mozilla Web-Browser. 

Step 2: Download and install the “Web Driver Element locator”.

 

Step 3: now, that you finished with the installation process, you will see that finding the XPath locator is one of the easiest tasks that you can do. Let’s demonstrate it.

Example:

1. Open "jaingourav999.blogspot.in"
2. Right click anywhere (where you want to inspect element), and observe the C# locator, java locator etc...

  

From the image above, you will see few different XPath’s that you can use as your element locator (When you press on one of the options, the syntax will automatically copy to your clipboard).

Locate the element by using Ancestor: 

xpath	description
ancestor	get all parent elements of current node
ancestor-or-self	get all parent elements of current node and it self also
attribute	get all attributes of the current node
child	get all child elements of current node
descendant	get all child elements and its child elements(grandchild) of current node
descendant-or-self	get all child elements and its child elements(grandchild) of current node and it self
following	get all elements in the html after this node
following-sibling	get all siblings of the current node
parent	get the parent of the current node

 Example: 

List lst=driver.findElements(By.xpath("//*[@class='srg']/child::*"));
for(WebElement x : lst)
{
       System.out.println(x.findElement(By.tagName("a")).getText());
}