Follow this blog entry before read this blog > Read ME
Target is used to identify webelement on the webpage
How many types for Locating Elements on the webpage?
Locating by Id / Locating by Name / Locating by XPath / Locating Hyperlinks by Link Text / Locating by CSS
We need to install two addons in firefox before moving forward
Firebug :: Add-ons for Firefox
FirePath :: Add-ons for Firefox
Using this addon we can get all details of webpage.
Locating by Id
Lets go on to WordPress web portal – http://demo.opensourcecms.com/wordpress/wp-login.php
We want to find Username textbox element on the webpage using ID of that element
For that start firebug.
use web element inspector to get location of Username element on the webpage.
We get following code for it. in which one attribute id=”user_login” which is used to identify Username field at run time.
<input type="text" tabindex="10" size="20" value="" class="input" id="user_login" name="log" style="background-color: rgb(251, 251, 251);">
Locating by Name
Using Name of the webelement we get access of that at runtime.
In wordpress example name=”log”
<input type="text" tabindex="10" size="20" value="" class="input" id="user_login" name="log" style="background-color: rgb(251, 251, 251);">
🙂 Locating by XPath 🙂
Very useful…………..
For this we will firebug + firepath.
There are two ways of accessing element using xpath:
- absolute XPATH
- Relative XPATH
On wordpress website we get both as following to identify element
//*[@id='user_login']
html/body/div[1]/form/p[1]/label/input
We mostly use identical / relative xpath identify web element on the page.
Locating by XPath
Locating by XPath – By finding a nearby element with an id or name attribute (ideally a parent element) you can locate your target element based on the relationship
Locating Hyperlinks by Link Text
<a title="Password Lost and Found" href="http://demo.opensourcecms.com/wordpress/wp-login.php?action=lostpassword" style="background-color: transparent;">Lost your password?</a>
Locating by CSS
What is CSS?
- CSS stands for Cascading Style Sheets
- Styles define how to display HTML elements
So in our wordpress example, Login page webelements has given some css
- class=”input”
<input type="text" tabindex="10" size="20" value="" class="input" id="user_login" name="log" style="background-color: rgb(251, 251, 251);">
If we want to identify webelement using CSS given to it We should enter following values into Target field
css=input[type=”password”]
<input type="password" tabindex="20" size="20" value="" class="input" id="user_pass" name="pwad">
