WebDriver Tutorial Part 5 : Locating WebElemnts on the Webpage

Every webpage is nothing but the set of of different elments. So we need to have idea on the following things before we start building the script.
1.Knowing the different elements  on WebPage
2.Locating the elements on web page
3.Working wth the elemets

1. Knowing the different typesof  elements  on WebPage
By looking at the webpage we should be able to identify the type of element it consists.Sometimes we can check elements types by viewing the source code.Here are the common elements most of the time we encounter in the process of automation.
Text box 
Drop-down List
Checkbox
Radio button 
TextArea  
Hyperlink
Image
Button
Frames
Alert dialog box
Window

2.Locating the elements on web page 
Before starting let us have a look at the below sample form which consists of "First Name, Last name , Email address, Sex, Submit button".

First name:


Last name:


Email Address:


Your Sex :
 Male
 Female

Above form has 5 elements, three textboxes, one radio button and one submit button.We have successfully identified the elements type.Now we need to locate the elements on webpage using Selenium.

If we see the viewsource of "First Name" textbox , it will look like
<input id="firstname" maxlength="45" name="firstname" type="text" />

It means we can locate the "First Name" text box on the webpage using 4 different locators i.e  id, name, Xpath, CSS.

view plainprint?

1. WebDriver driver=new FirefoxDriver()  
2. WebElement textbox=driver.findElement(By.name("firstname"));  
3. OR  
4. WebElement textbox=driver.findElement(By.id("firstname"));   

We can easily get the Xpath and CSS values of an element using firefox addons like Firebug and  FirePath.

In selenium we can identify the elements on the webpage with the following locators.
Locating By Id 
Locating By Name
Locating By Xpath 
Locating Hyperlinks by LinkText
Locating By DOM
Locating By CSS

3.Working wth the elemets
Knowing the element type and locating the element is not what we actually want. We want to work with those elements to perform some action on the webpage say "locate the submit button on webpage and click on it".

In the next post , we will see how we can work with the different elements using selenium ...!! :)