WebElements in WebDriver

Identifing Webelements In WebDriver During Runtime

Class:
A set of similar objects are called a Class

Class Example:
Animal, Fruit, Birds

Object:
An instance of a class

Object Example:
Tiger, Apple, Parrot

NOTE:  Every object should have some sort of identification properties and behaviors
based on which we can identify the objects correctly

An Example of how HTML code is written for WebElement:



Exp:
Open "www.login.salesforce.com" page
Press F12, Click on Inspector and Check html code for "UserName" edit box

input style="display: block;" class="input r4 wide mb16 mt8 username" value=""
name="username" id="username" type="email"

In above HTML code: Tagname is "input"

Attribute_Name Attribute_value
-------------- ---------------
style display: block;
class input r4 wide mb16 mt8 username
value ""
name username
id         username
type         email


Inspecting WebElement Attribute Values:

There are 2 ways to view webelement html Properties/Attributes
i. Using selenium IDE:
Using Selenium IDE Recording, we can capture webelement attribute values
and these are displayed under "Target" component in "Script Editor"

ii. Using Firebug Add-on on Firefox Browser:
It is used to inspect webelement property values

How to Install FireBug on Firefox Browser:
NOTE:  FireBug only works with Firefox Browser

Open FF browser
Open google search engine
Enter "download Firebug"
Click on "Search" button
Click on the first link
Click on "Add to firefox"
Add on is added to Firefox browser successfully


Finding WebElement Properties using Firebug:

Focus on the webelement that you want to view the properties for,
Right click the webelement
Select "Inspect webelement with firebug" option
Webelement attributes/properties are displayed


NOTE: WD can identify webelements using html properties/attribute values/locator values during runtime

Syntax: {to address webelements}
driver.findElement(By.locatorName(Locator value));

Exp:
Finding Webelement Properties for "username" edit box
driver.findElement(By.id("username"));

NOTE: During Runtime, WD will compare each element by given webelement property value in
the root tag of the html page (ie., DOM, Document Object Model), it will then perform the
given operation on the correct element thats matches based on the values provided. Exp: (By.id("username"))


WD Supports 8 Types Of Element Locators:
----------------------------------------
1. id
2. name
3. className
4. linkText
5. partialLinkText
6. tagName
7. xpath
8. cssSelector