Selenium WebDriver - Find Element Commands and Locators

Find Element Commands

These are the different commands to locate/find the GUI elements on the web page using 8 different locators. We can perform actions on elements only after finding them. You can use any of the one locator to find element. Below is the command to find any element on Web page.

// Find Element
driver.findElement(arg0);

All Find Element Commands:

/**************************
 * Find Element Commands  * 
 **************************
*/

// Find Single WebElemnt
driver.findElement(arg0);

// Find Multiple WebElements, it returns a list of WebElements
driver.findElements(arg0);

// Find by different locators
driver.findElement(By.className("class-name"));

driver.findElement(By.cssSelector("some-css-selctor"));

driver.findElement(By.id("some-id"));

driver.findElement(By.linkText("some-link-text"));

driver.findElement(By.name("some-name"));

driver.findElement(By.partialLinkText("some-partial-link-text"));

driver.findElement(By.tagName("some-html-tag-name"));

driver.findElement(By.xpath("some-xpath-expression"));

// Find web element and store value in WebElement variable for re-usability
WebElement element = driver.findElement(By.xpath("/some/xpath");

Selenium Locators

Locators are used to tell Selenium that on which GUI element (text box, radio boxes, links, buttons etc.) action has to be performed. We must have basic knowledge of HTML in order to learn locator techniques. There are total of 8 locators  by which we can find element in Selenium Webdriver. Here is the list:

1. ID
2. Class Name
3. Name
4. Link Text
5. Partial Link Text
6. Tag Name
7. Xpath
8. Css Selector

1. Locate by ID, Name and ClassName

• These three are the most common type of locators. 
• Id, Name and ClassName are the attributes used along with html tags. 
• These attributes are given by Front-end developers for CSS designing.
• Automation testers make use of these attributes for locating elements.

HTML Code for Sample Login Page with Id, Name and ClassName attributes:

 type='text' id='username' name='user' classname='user'/>
 type='password' id='password' name='pwd'/>

In above sample html code, there are three elements present:

1. Input tag for username text box, it has id, name and classname attributes. We can use anyone of it for locating username textbox.
2. Input tag for password box, it has id and name attributes only. We can use anyone of the two.
3. Button tag for login button, it has only id attribute so we can only use id.

Example:

Code for Id- driver.findElement(By.id("some-id"));

Code for Name - driver.findElement(By.name("some-name"));

Code for ClassName - driver.findElement(By.className("some-className"));

How to find ID of an element on a Web Page?

• Open a webpage say - https://www.techlistic.com/p/selenium-practice-form.html
• Click F12 to open firebug or right click on the element (whose id to be find) and click on inspect element.
• Html console of the page will be opened.

Now let's find id of 'Male' radio box

1. Click on the cursor icon on left side of firebug.
2. Now move the cursor to the element whose id you want to find. We will move cursor to 'Male' radio box and click on it.
3. You will observe in the firebug some html code will be highlighted. It is the html code of 'Male' radio box.
4. In that html code find something like id='some_value'. It is the id to be used in selenium command. For 'male' radio box id is 'sex-0'.
5. Code - driver.findElement(By.id("sex-0"));
6. Refer following pic.

 Similarly, Name and ClassName can be find from html code.

Key Points to remember about Id, Name and ClassName:

Html tag can have one, two or all three attributes.

If html tag has more than one attribute, we can pick one whose value is unique in the whole html code.

If Html tag don't have any of the three attribute in that case we have to use xpath or css selector.

Ids have to be unique for each element in html as per w3 standards. 

Id locator is the most reliable and fast locator.

If we have duplicate ids say more than one tag/element has same id, then also we have to use xpath or css selector.

2. Locate by Link Text and Partial LinkText

• Both these locators are used to click on links.
• LinkText is used to click on a static link, whose value is not changing.
• And Partial link text is used to click on a link which is half dynamic. A link whose half text is static and half text is changing. 
• Like Profile Page link, XYZ Profile.
• Here XYZ is name of person, which will be different for every user/person but 'Profile' text will remain unchanged.

Example:

1. Open https://www.techlistic.com/
2. I want to click on any menu link let's say on 'Selenium Tutorial' link using Selenium.
3. You have to write text of the link (which is displaying on the page) in the Selenium command.

Code for Link Text - driver.findElement(By.linkText("Selenium Tutorial"));

Code for Partial Link Text -  driver.findElement(By.partialLinkText("some-partial-link-text"));

3. Locate by Tag Name

Using this command one locate elements using html tag name.

Code Example:

// Example - Get all options from a dropdown and print them
WebElement select = driver.findElement(By.tagName("select"));

// Get all options in a list with tagname 'option'
List allOptions = select.findElements(By.tagName("option"));

We will learn about xpath and css selector in upcoming tutorials.

Refer Complete Selenium Wbedriver Tutorials Series

Author: Vaneesh Behl

Subscribe FB Group Techlistic.com

Join Telegram channel at https://t.me/techlistic

Feel free to ask queries or share your thoughts in comments or email me.