Monday, July 23, 2012

Selenium Module #6 ( Javascript)

Javascript


For creating user extensions in Selenium IDE, it is necessary to learn javascript as Selenium core is in javascript.

So, lets start learning javascript.

Javascript is a scripting language which is embedded directly into HTML pages and works at client's browser. It supports different browsers- IE, Mozilla Firefox, Google Chrome, Safari , Opera.

 Features of javascript 

1. Detects visitor's browser- Because of this platform dependent functions can be easily performed by the script. This ensures loading of page designed specifically for that browser.

2. Validates data- If user commits any mistake while inputting data then error message will be popped up.

3. Creates cookies- Used to store and retrieve information on visitor's computer.

4. Manipulates HTML elements- Some contents dynamically changes after clicking some icons like arrow. This is because of the javascript operation on client machine.

5. Easy programming tool- It is an object oriented language with simple syntax.

Javascript programs

If you are having a basic understanding of html then it will be easier to understand javascript. Lets have a look at simple javascript program

<html>
<body>
<h1> My first javascript program </h>  //Heading
<script type =" text/javascript"> //script tag for inserting javascript into HTML
document.write("<p> Good Morning </p>"); //print text on web page
</script>
</body>
</html>

Output:
My first javascript program
Good Morning

Above program is executed when page is loaded. However if we want to run our program when some event is generated like clicking some button, we use functions:


<html>
<head>
<script type="text/javascript">
function javascriptFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</head>

<body>

<h1>Javacript Function</h1>

<p id="demo">Welcome to learningselenium.blogspot.in</p>

<button type="button" onclick="javascriptFunction()">Click me</button>

</body>
</html>

Following output will be displayed

On clicking Click me button,
it will display:



To be continued...






Friday, July 20, 2012

Upcoming Modules- Java basics, Selenium RC , web driver


Selenium Module #5

User Extensions

 Selenium IDE does not have all the commands. If you go to command textbox in Selenium IDE and write "while" in it, it won't show predictions for this command. Also it will not execute as while loops are not present in it. However, since selenium core is in javascript so we can add javascript extensions to it so that we can include these commands in Selenium IDE.

For installing user extensions, just follow the below steps:
1. Go to http://www.google.com.
2. Type selenium documentation in search box and click on the first link.
3. On selenium documentation page, click on "Sequence of evaluation and flow control" link . In the description of this link,click on  " goto_sel_ide.js extension" link. Then click on "page" link. One blog will get open. Scroll down and click on " github.com/darrenderidder/sideflow " link and then download the zip file.
4. After extracting that file, you will get one .js file. Ggo to  Selenium-IDE’s Options=>Options=>General tab. Browse for that file and press ok.
5. Now close Selenium IDE and restart it.

For checking whether its added or not, type while in command box and see it will start displaying commands.

Thats it!!
Your user extension is added now.. :-)

To be continued..

Thursday, July 19, 2012

Selenium Module #4

 X  Path


 In Selenium Module#3 I mentioned an example. Now the question arises how selenium specifically identifies which element to click , where to type. The answer to that question is target. It uniquely identifies the object on page. For that you need X Path. You can get this through Firebug. Firebug is also an add on in Firefox like Selenium IDE.

Installing Firebug and Firepath:
In Mozilla Firefox, go to Tools -> Add- ons -> Search Firebug.
It will be displayed in search result. So click on Install button and install it. After installing firebug, you need to install Firepath. Firepath is an extension of Firebug which will show the path of the web element.
For installing Firepath go to http://www.google.com and search Firepath. Click on the first link displayed in search results and click on Add to Firebug. Restart your browser. Now your firepath is installed.
For checking whether its installed or not go to Tools -> Web developer -> Firebug -> Open Firebug.
It will open on your browser. And you will see Firepath is installed over Firebug.


Below is the screenshot how it looks like.





How to use Firepath?

 Lets take a simple example of gmail login.
Go to the website http://www.gmail.com. Here you see the user name and password textbox, Sign in button. Now for knowing the target or xpath of these elements, we will use firepath.
Open firebug from tools.
On the left side of the firebug user interface, there will be an arrow icon to Inspect Element ("Click an element in the page to inspect"). Click on this inspect icon. Now move your mouse over the gmail page. You will see that it is inspecting the page objects. Now click on username textfield. It will display the source of username field and in xpath textfield on the top of firebug, it will display the path. You can see below in the screenshot.



Here xpath is //*[@id='Email']. ID parameter is used to identify the username field as it uniquely identifies it. And this xpath will be used in Selenium IDE and RC. Any other parameter can also be used but it should uniquely identify that particular web element.

This xpath is relative. For absolute xpath i.e for knowing the path from the root, click on Firepath drop down and check on 'Generate Absolute Path' and absolute xpath will get generated. However it does not make any difference whether we are using relative or absolute xpath as both of them points to the same element.

XPath is mostly used used by developers to find out the exact location of the error in their program. But nowadays automation engineers are also using it.