Monday, October 19, 2009

Part 5: Locating the Elements in a Web Page (Object Spying)

For testing our web application we need to enter the data and verify the outputs, how we are going to do this. In other words how we are going to identify the web components on the web page. Its known as spying the objects. For example if we need to do an action on a component, all we need is uniquely identify the component. If we have only a button in the page and it has a unique id or name then we are blessed. What if we have so many buttons and all have no id but the same name(Since all are doing the same action but in different situations so the developer decides to give the same name) These kind of situations we need to do something tricky which help us to identify each button uniquely

Selenium uses the following types to locate the objects on a web page.

1. ID or NAME Locator(The element with @id, @name attributes which is unique in the page.).

2. XPATH Locators.

(Xpath locators are beginning with “//” xpaths are useful when we don't have unique id or name in this case we ma need to use the combination of other attributes like alt, value, class, span etc..)

3. DOM Locators

(We can use the DOM model to traverse the document and locate the objects. The DOM locators must begin with document Ex: document.acme.forms.loginForm.username)

4. CSS Locators

CSS locators are like other XPATH locators but here we will make use of CSS attributes. When we started with IE as test browser I used to face so many problems with XPATH locators. The test execution was extremely slow and in few places the way IE translates the Pages was bit different from Firefox which I used to locate elements. So it will be much appreciated if you use CSS locators over XPATHs. It will increase the execution speed in IE and in AJAX rich applications it will reduce the chances of failures by dynamic object id generation


Example:
For example in our login page we need to test the following scenario. (Note that I will be using java code for samples)

1. Open the login page
2. Verify the login page opened
3. Type the username
4. Type the password
5. Click on the login button
6. Verify the login is successful

Here we need to locate 3 elements 1. Username Textfield 2. Password field 3. Login button. We can use the Selenium IDE to record teh actions there b figuring out the locators but if you are more experience ou can find out locators directly from the html source, DOM, or some locator tools.
Ok when we opened the html we could see that the following code

input id=username value =’Enter username here’ size=10, onKePres= “Do something”
input id=password value =’’ size=10, class= pwd
button id=loginButton value =’’ size=10 name= login

Here all the 32 elements have ids we can make use of it. Hence our code will be look like this

Selenium.type(“username”);
Selenium.type(“password”);
Selenium.click(“loginButton”);
Selenium.wait(“60000”);
The same code can use XPATH/DOM like this (Note that I am not showing the DOM or CSS definition for the page all I need is to show the usage or syntax)
Selenium.tpe(“//input[@value=’ ’Enter username here’]”); //XPATH
Selenium.tpe(“css=div[class=pwd]”); //CSS
Selenium.click(“document.LoginForm.loginButton”); //DOM
Tools which helps us to identify the attributes of a field
1. Firebug (Firefox pluggin) (search for firefox addons)
2. IE Developers Toolbar “http://chrispederick.com/work/webdeveloper/”
3. Xpath Checker (Firefox addon)

No comments:

Post a Comment