How to automate onblur through selenium RC .

How to automate onblur through selenium RC .
How to automate lost focus through selenium.


I faced the problem while automating the form submit. All of the form fields are having some action on their lost focus.
The onblur event occurs when an object loses focus.
For example : I have two fields First Name and Last Name. When i enter first name and press tab then it loses its focus and onblur function gets called.
and its calls upperCase and it changes the first name in Upper case.
the same case with Last Name. When i enter last name and press tab it calls blur function lowerCase and changes the letters in lower case.

But the problem in automation is i cant automate lost focus. when we type in first name and last name it simply types in first name and last name text box.
It does not call onblur function upper case and lower case and does not change the letter respectively.

so, fireEvent is a special command in selenium which helps in automating onblur function.

this is html of the element and blur javascript functions

<html>
<head>
<script type="text/javascript">
function upperCase()
{
var x=document.getElementById("fname").value;
document.getElementById("fname").value=x.toUpperCase();
}
function lowerCase()
{
var x=document.getElementById("lname").value;
document.getElementById("lname").value=x.toLowerCase();
}
</script>
</head>
<body>
Enter your First Name: <input type="text" id="fname" onblur="upperCase()" />
<br />
Enter your Last Nast: <input type="text" id="lname" onblur="lowerCase()" />
</body>
</html>

when we write simple selenium RC code

 selenium.type("fname", "niraj");
 selenium.type("lname", "KUMAR");
 

it doest call blur functions to change cases of the first name and last name.

But by using fireEvent fuction of selenium we can call blur function.

 selenium.type("fname", "niraj");
 selenium.fireEvent("fname", "blur");
 selenium.type("lname", "KUMAR");
 selenium.fireEvent("lname", "blur");

How this works is :

First this will type "niraj" in First Name and then selenium.fireEvent("fname", "blur"); this will call the onblur fuction "upperCase()" which changes the First Name in upper case "NIRAJ".
then it types in Last Name and then selenium.fireEvent("lname", "blur"); which means it will press tab and lost the function and on the lost focus it calls
blur function lowerCase which changes the Last Name in lower case.

How to verify the text ignoring cases sensitivity in selenium ?

How to verify the text ignoring cases sensitivity in selenium ?

Some times we need to verify the text on the webpage no matter is upper cases or lower cases or proper.
We just need to verify the text on the web page ignoring their cases sensitivity.
REGEXPI is used to avoid cases sensitive to verify the text on the page.

Lets say i want to verify the text "Automationtricks is good blog for selenium" No matter its in upper cases or lower case or proper case.

Then use REGEXPI in selenium command selenium.isTextPresent or verifyTextPresent.

<tr>
    <td>verifyTextPresent</td>
    <td>regexpi:AUTOMATIONTRICKS IS GOOD BLOG FOR SELENIUM</td>
    <td></td>
</tr>

<tr>
    <td>verifyTextPresent</td>
    <td>regexpi:AUTOMATIONTRICKS is good blog for selenium</td>
    <td></td>
</tr>

<tr>
    <td>verifyTextPresent</td>
    <td>regexpi:AUTOMAtionTRICKS Is GoOd Blog for SELENIUM</td>
    <td></td>
</tr>

<tr>
    <td>verifyTextPresent</td>
    <td>regexpi:automationtricks is good blog for selenium</td>
    <td></td>
</tr>

In Selenium RC

verifyTrue(selenium.isTextPresent("regexpi:AUTOMATIONTRICKS IS GOOD BLOG FOR SELENIUM"));

verifyTrue(selenium.isTextPresent("regexpi:AUTOMATIONTRICKS is good blog for selenium"));

verifyTrue(selenium.isTextPresent("regexpi:AUTOMAtionTRICKS Is GoOd Blog for SELENIUM"));

verifyTrue(selenium.isTextPresent("regexpi:automationtricks is good blog for selenium"));

How to verify value in drop down list.

How to verify value in drop down list.
We somehow manage to find the element on the page but its difficult to fund element with some specific attributes.
Take an example How to find some value is in drop down list or now? To find element drop down is easy but to find a drop down having some specific
value in their list is difficult.

Go to www.ebay.in you will see there is drop down along with search text box.
How to veify a specific value "Collectibles" is in drop down list.

Using Xpath:

<tr>
 <td>verifyElementPresent</td>
 <td>//select[@id='_sacat']/option[contains(text(),'Collectibles')]</td>
 <td></td>
</tr>

verifyTrue(selenium.isElementPresent("//select[@id='_sacat']/option[contains(text(),'Collectibles')]"));

Using CSS:

<tr>
 <td>verifyElementPresent</td>
 <td>css=select#_sacat>option:contains("Fun")</td>
 <td></td>
</tr>

verifyTrue(selenium.isElementPresent("css=select#_sacat>option:contains(\"Fun\")"));

<tr>
 <td>verifyElementPresent</td>
 <td>css=select>option:contains("Fun")</td>
 <td></td>
</tr>

How to select the value in drop down using regular expression.

There are situation when we need to select the drop down value with some partial text .
With the help of regular expression we can select the drop down value

<tr>
 <td>select</td>
 <td>_sacat</td>
 <td>label=regexp:Fun*</td>
</tr>

selenium.select("_sacat", "label=regexp:Fun*");

How to use CSS in Selenium to locate an element

XPath locator is one of the most precise locator. But this has a disadvantage of its locator types thats is its slowness.
This disadvantage of xpath you can see when running the tests under IE while Firefox works with xpath pretty faster than IE.
The main thing is that tests which intensively use XPath work extremely slow under IE and this feature is the cause of huge variety of problems related to execution speed as well as quality of the tests itself especially during operations with dynamic content.
For this reason CSS locators can be good alternative of XPath. What can we do with CSS locators?

CSS locator will give you clear picture of your element hierarchy
lets say your xpath of an element is like,

xpath=//div//span/a

the same locatore can be identified by CSS is .

css=div * span > a

from the above example there are two symbol are being used to locate an element.

1) "/" in xpath is just a next level of DOM element hierarchy and same used in CSS is ">"
2) "//" in xpath is any DOM object hierarchy level under current object and same used in CSS is "*"

The way we use attributes in xpath we can use attributes in css as well. lets say your element's xpath is like this

//input[@name='continue' and @type='button']

can be written in CSS

css=input[name='continue'][type='button']
or
css=input[name=continue][type=button]

in xpath we can check the partial attribute value matching but in CSS we can't.

lets say your element is like this

<div title="here is m multiword title" />

so the xpath to locate this element is .

xpath=//div[contains(@title,"title")]

and same can be used in CSS like

css=div[title~=title]

But if your element is like this

<div title="my_title" />

then CSS locator css=div[title~=title] wont work here .

CSS provides us the easy way to specify the element.
lets say your element is like this,

<input id="username"></input>

we can write in xpath like this

xpath=//input[@id="username"]

and same can be specified in CSS

css=input#username

so whenever we want to identify any element with their id then we use #

lets say your element is like this,

<input class="password"></input>

then xpath is

xpath=//input[@class="password"]

and corresponding CSS is

css=input.password

so whenever we want to identify any element with their class then we use .

below are the element sturcture used in above examples.

<html>
<body>
<form>
 <input id="username"></input>
 <input class="password"></input>
 <input name="continue" type="button"></input>
 <input name="cancel" type="button"></input>
 <input value="a86b504a-faff-4a18-92d8-68720331c798" name="vid" type="hidden"><input value="LF_c10cf6d6" name="lf_cid" type="hidden"></form>
 </body>
</html>

An interesting feature of CSS in Selenium :Sub-String matches.

^=	Match a prefix
$=	Match a suffix
*=	Match a substring

1 css=a[id^='id_prefix_']

A link with an “id” that starts with the text “id_prefix_”

2 css=a[id$='_id_sufix']

A link with an “id” that ends with the text “_id_sufix”

3 css=a[id*='id_pattern']

A link with an “id” that contains the text “id_pattern”

Without specifying the type of element we can identify the element
to identify the google search button we can use Css like this

css=center > #sbds > #sblsbb > input

these CSS features are awesome more details can be found on
How to use CSS in Selenium extensively
and if you want to know in depth then visit this page.
http://www.w3.org/TR/css3-selectors/

How to locate an element which have same name and same atrributes in selenium

Automation using selenium is a great experience. It provides many way to identif an object or element on the web page.
But sometime we face the problems of idenfying the objects on a page which have same attributes. When we get more than
one element which are same in attribute and name like multiple checkboxes with same name and same id. More than one button having
same name and ids. There are no way to distingues those element. In this case we have problem to instruct selenium to identify a perticular
object on a web page.
I am giving you a simple example . In the below html source there are 6 checkboxes are there having same type and same name.
It is really tough to select third or fifth.

<html>
<body>
<input type='checkbox' name='chk'>first
<br><input type='checkbox' name='chk'>second
<br><input type='checkbox' name='chk'>third
<br><input type='checkbox' name='chk'>forth
<br><input type='checkbox' name='chk'>fifth
<br><input type='checkbox' name='chk'>sixth
</body>
</html>

Thare are some function we can use in Xpath to identify the abject in above cases.
An XPath expression can return one of four basic XPath data types:

* String
* Number
* Boolean
* Node-set

XPath Type : Functions
Node set : last(), position(), count(), id(), local-name(), namespace-uri(), name()
String : string(), concat(), starts-with(), contains(), substring-before(), substring-after(), substring(), string-length(), normalize-space(), translate()
Boolean : boolean(), not(), true(), false(), lang()
Number : number(), sum(), floor(), ceiling(), round()

I will show you how we can use some of these above functions in xpath to identify the objects.

Node Set : last()


In the above html file there are six checkboxes and all are having same attributes (same type and name)
How we can select the last checkbox based on the position. We can use last() function to indentify the last object among all similar objects.
Below code will check or uncheck the last checkbox.

selenium.click("xpath=(//input[@type='checkbox'])[last()]");

How we can select the second last checkbox and third last checkbox. We can use last()- function to indentify the last object among all similar objects.
Below code will check or uncheck the second last checkbox and thrid last checkbox respectively.

selenium.click("xpath=(//input[@type='submit'])[last()-1]");
selenium.click("xpath=(//input[@type='submit'])[last()-2]");

Node Set : position()

If you want to select any object based on their position using xpath then you can use position() function in xpath.
You want to select second checkbox and forth checkbox then use below command

selenium.click("xpath=(//input[@type='checkbox'])[position()=2]");
selenium.click("xpath=(//input[@type='checkbox'])[position()=4]");

above code will select second and forth checkbox respectively.

String : starts-with()

Many web sites create dynamic element on their web pages where Ids of the elements gets generated dynamically.
Each time id gets generated differently. So to handle this situation we use some JavaScript functions.

XPath: //button[starts-with(@id, 'continue-')]  

Sometimes an element gets identfied by a value that could be surrounded by other text, then contains function can be used.
To demonstrate, the element can be located based on the ‘suggest’ class without having
to couple it with the ‘top’ and ‘business’ classes using the following

XPath: //input[contains(@class, 'suggest')].

Example: How to click on link on the page which has many links with same name and attributes.
Below is the example of your html which has 3 links with same name and same attributes

<html>
<body>
<a href="http://www.google.com" name="a1">Link</a>
<a href="http://www.yahoo.com" name="a1">Link</a>
<a href="http://www.gmail.com" name="a1">Link</a>
</body>
</html>

If you want to click on first link then use below command

<tr>
 <td>clickAndWait</td>
 <td>xpath=(//a[@name='a1'])[position()=1]</td>
 <td></td>
</tr>

If you want to click on second link then use below command

<tr>
 <td>clickAndWait</td>
 <td>xpath=(//a[@name='a1'])[position()=2]</td>
 <td></td>
</tr>

If you want to click on last link or third link then use below command

<tr>
 <td>clickAndWait</td>
 <td>xpath=(//a[@name='a1'])[last()]</td>
 <td></td>
</tr>

OR

<tr>
 <td>clickAndWait</td>
 <td>xpath=(//a[@name='a1'])[position()=3]</td>
 <td></td>
</tr>

Selenium RC.

Click on first link
selenium.click("xpath=(//a[@name='a1'])[position()=1]");
selenium.waitForPageToLoad("80000");
Click on second link
selenium.click("xpath=(//a[@name='a1'])[position()=2]");
selenium.waitForPageToLoad("80000");
Click on last link
selenium.click("xpath=(//a[@name='a1'])[last()]");
selenium.waitForPageToLoad("80000");
Click on thrid link
selenium.click("xpath=(//a[@name='a1'])[position()=3]");
selenium.waitForPageToLoad("80000");

For rest of the function please keep reading my blogs i will be posting very soon.

How to write in Iframe in selenium

Selenium is unable to type in iframe. But we can write in it by identifying the iframe using css.
When you write any mail in gmail you can see the body is a iframe we can write in it using below commands
Selenium IDE

<tr>
 <td>storeEval</td>
 <td>var bodytext=" Writing text in iframe body with the help of http://automationtricks.blogspot.com ";  var iframe_locator="css=table:contains('Subject:') +*  iframe";   var iframe_body=selenium.browserbot.findElement(iframe_locator).contentWindow.document.body;   if (browserVersion.isChrome){    iframe_body.textContent=bodytext; }  else if(browserVersion.isIE){ iframe_body.innerText=bodytext; }</td>
 <td></td>
</tr>

Selenium RC.

String  = selenium.getEval("var bodytext=\" Writing text in iframe body with the help of http://automationtricks.blogspot.com \";  var iframe_locator=\"css=table:contains('Subject:') +*  iframe\";   var iframe_body=selenium.browserbot.findElement(iframe_locator).contentWindow.document.body;   if (browserVersion.isChrome){    iframe_body.textContent=bodytext; }  else if(browserVersion.isIE){ iframe_body.innerText=bodytext; }");

How to locate an element based on their label in selenium

How to locate an element based on their label.
Some time it difficult to locate an element usiing DOM, HTML and xpath. In that case we use to locate the element with the
help of their lables.

For example : Go to yahoo login page

selenium.open("https://login.yahoo.com");

Based on the lable "Yahoo ! ID" we will read the text box and type in.

selenium.type("css=label:contains(\"Yahoo! ID\")+input", "niraj");

Based on the lable "Password" we will locate the text box for passowrd and type in.

selenium.type("css=label:contains(\"Password\")+input", "pass");

Go to yahoo registrantion page.

selenium.open("https://edit.yahoo.com/registration?.intl=us");

Based on Name label we will type in First Name text box. 

selenium.type("css=label:contains(\"Name\")+div>input", "niraj");

Based on Name label we will  type in Last name text box.

selenium.type("css=label:contains(\"Name\")+div>input+input", "kumar");

Based on Gender lable we will select the gender from drop down.

selenium.select("css=label:contains(\"Gender\")+div>select", "label=Male");

Based on Birthday lable we will select the month from drop down.

selenium.select("css=label:contains(\"Birthday\")+div>select", "label=January");

Based on Birthday lable we will type the date in date text box.

selenium.type("css=label:contains(\"Birthday\")+div>select+input", "2");

Based on Birthday lable we will type the year in year text box.

selenium.type("css=label:contains(\"Birthday\")+div>select+input+input", "1982");

Based on country lable we will select India in country drop down box.

selenium.select("css=div>label:contains(\"Country\")+div>select", 
"label=India");

+ Is used to point the element on the same node in tree of css.
<label class="label" for="name">Name</label>
<div class="collection" id="name">
<input type="text" title="First Name" name="firstname" id="firstname" value="" size="32" maxlength="32" class="" autocomplete="off">
<input type="text" title="Last Name" name="secondname" id="secondname" value="" size="32" maxlength="32" class="" autocomplete="off">
</div>
to access firstname text box
selenium.type("css=label:contains(\"Name\")+div>input", "niraj");
to access secondname its the same label of div but on the second place
selenium.type("css=label:contains(\"Name\")+div>input+input", "kumar");


> Is used to point the element one node down in the tree of css.
to access firstname text box
selenium.type("css=label:contains(\"Name\")+div>input", "niraj");