Precondition:
First
add firebug add-on to your firefox browser
How
to inspect web-element in webpage using firebug:
To
inspect an element you just have to open the desired web page
- Right-click the desired element and click on Inspect Element with firebug option.
- A new panel will
open showing the desired element.
Example: Consider
Google Home Page is my application, I need to identify the locators
for Search Text Box Field
Steps:
- Open Firefox Browser
- Access http://www.google.com
- Move mouse icon on to search text box
- Right-click on search text box and select “Inspect Element with Firebug”
- A new panel will open showing the desired element at the bottom of the webpage like below screenshot
- In firebug window the desired webelement is highlighted in blue background.
ID
attribute:
There
is id attribute for search text box field like id=”lst-ib”, you
can use id value to enter value in the google search box
Name
attribute:
There
is name attribute for search text box field like name=”q”, you
can use name value to enter value in the google search box
Similarly
id and name, if your webelement as class than you can perform action
based on class attribute, based on xpath so on......
Selenium
WebDriver API supports different possibilities ways to identify the
web-elements from html page
- By ID
- By ClassName
- By Name
- By TagName
- By Xpath
- By CSSSelector
- By LinkText
- By Partial LinkText
Let
us discuss the above possibilities with examples using Java
By.id
:
//Identify
WebElement based on ID attribute
driver.findElement(By.id("lst-ib"));
By.className:
//Identify
WebElement based on class attribute
driver.findElement(By.className(""));
By.name:
//Identify
WebElement based on Name attribute
driver.findElement(By.name("q"));
By.tagName:
//Identify
WebElement based on class attribute
driver.findElement(By.tagName(""));
By.xpath:
//Identify
WebElement based on Xpath attribute
driver.findElement(By.xpath("//input[@name='q']"));
By.cssSelector:
//Identify
WebElement based on css attribute
driver.findElement(By.cssSelector(""));
By.linkText:
//Identify
WebElement based on LinkText attribute
driver.findElement(By.linkText(""));
By.partialLinkText:
//Identify
WebElement based on partialLinkText attribute
driver.findElement(By.partialLinkText(""));