[Tutorial] Building a QTP Add-In for jQueryUI Widget using HP Web Extensibility Accelerator

jQuery UI is a jQuery user interface library. It provides interactions, widgets, effects, and theming for building Rich Internet Applications. jQuery UI provides a number of UI widgets such as Accordion, Datepicker, Slider, Dialog, Tabs etc.

These widgets are built using a number of low-level HTML elements such as DIVs, Unordered Lists, and Input Tags etc. While QTP can recognize these elements individually, we can build an add-in to recognize these controls as native jQuery UI widgets using HP Extensibility Accelerator for QTP. We can then perform native operations supported by jQuery framework.

In this post I’ll explain step by step instructions to build an add-in which will support identification of jQuery UI Tab widget. For more information on jQuery UI Tab visit http://jqueryui.com/demos/tabs/

Step 1 – Create a Web Extensibility Project

  1. Open HP Extensibility Accelerator
  2. Select File → New → Project option from HP Extensibility Accelerator main menu
  3. On New Project dialog box select “Web Add-in Extensibility” in Project types: list
  4. In Templates: select “Web Add-In Extensibility Project”
  5. Enter “jQueryUI” in Name field
  6. Click on OK button

A new Web Add-In Extensibility Project will be created in HP Extensibility Accelerator

Step 2 – Define a new Test Object Class

Click Add [+] button in Test Object Classes list. A new entry will be added to Test Object Classes list as “Control1” and a new Tab will be added with “Control1” title under the Workflow Section

Step 3 – General Settings

  1. On “Control1” tab select the General Tab
  2. Enter “jQueryUITab” in Name field. This will change the Tab name as well as entry in Test Object Classes List
  3. Enter “jQuery UI Tab Control” in Description field
  4. You can provide a custom icon using Icon File options. I have kept this as default icon displayed for WebElement Test Object
  5. In Class Type section, select “WebElement” in Base class dropdown
  6. Click on Advanced Options Section
  7. Go to the Record Options Section
  8. Enter “AddEventHandler” in Event registration function name: field
  9. Uncheck Handle events using standard Web event configuration checkbox
  10. Check Handle events on child elements using standard Web event configuration checkbox

Step 4 – Identification
Next, we need to configure the identification of this control type. Before performing below steps, open the Page containing jQueryUI Tab widget in the Internet Explorer. I have built this example on jQuery UI Tab demo page at http://jqueryui.com/demos/tabs/default.html

  1. Select the Map to Controls tab
  2. Under the Identify Control section, click on Select Controls… button. This will hide the HP Extensibility Accelerator window and a small panel will appear in the center of Desktop with Create Rules and Cancel Button
  3. Activate the Internet Explorer window where the http://jqueryui.com/demos/tabs/default.html  page is displayed
  4. Move the mouse over jQuery UI Tab widget displayed on the page. This control will be heighted by a Box with red border and small box containing tag and class information
  5. Hover mouse until the box shows following details
tag: DIV
class: ui-tabs ui-widget ui-widget-content…
  1. Once you locate the object with above details click on the Red box. A small popup will be displayed with Node hierarchy and classname, id, tagname details. Click on Select button. Tab control will be highlighted
  2. Click on Create Rules button
  3. Following rule will be displayed in the Identify Control Area


We need unique attributes to identify this control. Let’s remove attribute which are not unique or whose value will change based on instance of the widget.

Select the “id Equal tabs” node in the Rule and click on Delete [X] button above.  Value for id attribute will be provided by developers and will change for each instance.

Select the jQuery node in the Rule and click on Delete [X] button above.  Value for jQuery attribute is assigned dynamically.

Following will be the final rule to identify jQuery UI Tab widget

Test this rule by clicking Test Rule button. Widget will be highlighted in light green in Internet Explorer, this means that the rule is correct.QTP will use these attributes and their values to identify jQuery UI Tab widget

Step 5 – Adding Operations

We will add following operations to the jQuery UI Tab Test Object Class

Operation Description Parameter Return Value
Select(Item) Selects a specified Tab on jQuery UI Tab widget Index or Title of the Tab True
GetItems() Returns title for all the Tabs separated by semicolon None String
GetSelectedItem() Returns title of selected Tab None String
GetItemCount() Returns number of Tabs on widget None Int

To add operation to this control, click on Operations tab

Select Operation

  1. Click Add [+] button in Operations list
  2. Enter “Select” in Name field
  3. Enter “Select a specified Tab” in Description field
  4. Check Default Operation checkbox. This will be the default operation for Tab widget
  5. Select “Boolean” in Return Type dropdown
  6. In Operation Arguments list add new “Item” argument with type as “String”. Uncheck the Optional checkbox
  7. We need to write JavaScript code for this operation. Click on Implementation Code… button next to the Name field. This will open the Code editor. A empty function for Select operation will be added by the code editor
  8. Copy following code to the Select function
////////////////////////////////////////////////////////////////////////////////
// Selects specified Tab on a widget
//
// Parameters: Item (Index or Title of the Tab, 
//					 while passing Index prefix # before index value)
// Returns:   Boolean
///////////////////////////////////////////////////////////////////////////////////
function Select(Item) {
	var details = null;
	var success = false;

	if (!Item || typeof (Item) != "string") {
		details = "Cannot select invalid item: " + Item;
		_util.Report(micFail, "Select", toSafeArray(new Array()), details);
		throw Error(details);
	}

	var tabToSelect = -1;

	// Retrieve tab elements.
	var tabs = window.$(_elem).find(".ui-tabs-nav > li");

	if(Item.charAt(0) == '#') {
	// The tab item is specified by index.
	var index = parseInt(Item.substring(1)) - 1;
	if (index < tabs.length && index >= 0)
		tabToSelect = index;
	}
	else {
		// The tab item is specified by name.
		for(var i = 0; i < tabs.length; i++) {
			if (Item == tabs[i].innerText) { 
				tabToSelect = i; 
				break; 
			} 
		} 
	} 
	
	if (tabToSelect >= 0) {
		// Call the Select method of jQueryUI Tab.
		window.$(_elem).tabs().tabs('select',tabToSelect);
		details = "Selected " + Item;
	_util.Report(micDone, "Select", toSafeArray(new Array(Item)), details);
	}
	else {
		details = "Item " + Item + " does not exist.";
		_util.Report(micFail, "Select", toSafeArray(new Array(Item)), details);
		throw Error(details);
	}
	return true;
}

GetItems Operation

  1. Click Add [+] button in Operations list
  2. Enter “GetItems” in Name field
  3. Enter “Returns name of all the Tabs” in Description field
  4. Select “String” in Return Type dropdown
  5. Click on Implementation Code… button next to the Name field. This will open the Code editor. A empty function for Select operation will be added by the code editor
  6. Add following code to the GetItems function
////////////////////////////////////////////////////////////////////////////////
// This returns title of all the Tab on a widget separated by a semicolon 
//
// Parameters: None
// Returns:   String
///////////////////////////////////////////////////////////////////////////////////
function GetItems() {
	var tabLabels = new Array();
	var tabs = window.$(_elem).find(".ui-tabs-nav > li");
	for (var i = 0; i < tabs.length; i++)
		tabLabels.push(tabs[i].innerText);
	return tabLabels.join(";");
}

GetSelectedItem Operation

  1. Click Add [+] button in Operations list
  2. Enter “GetSelectedItem” in Name field
  3. Enter “Returns the name of selected Tab” in Description field
  4. Select “String” in Return Type dropdown
  5. Click on Implementation Code… button next to the Name field. This will open the Code editor. A empty function for Select operation will be added by the code editor
  6. Add following code to the GetSelectedItem function
////////////////////////////////////////////////////////////////////////////////
// This returns title of current selected Tab on widget
//
// Parameters: None
// Returns:   String
///////////////////////////////////////////////////////////////////////////////////
function GetSelectedItem() {
	return window.$(_elem).find(".ui-tabs-nav > li[class*='ui-tabs-selected']")[0].innerText;
}

GetItemCount Operation

  1. Click Add [+] button in Operations list
  2. Enter “GetItemCount” in Name field
  3. Enter “Returns count of Tabs” in Description field
  4. Select “Integer” in Return Type dropdown
  5. Click on Implementation Code… button next to the Name field. This will open the Code editor. A empty function for Select operation will be added by the code editor
  6. Add following code to the GetItemCount function
////////////////////////////////////////////////////////////////////////////////
// This returns count of Tabs on widget
//
// Parameters: None
// Returns:   Integer
///////////////////////////////////////////////////////////////////////////////////
function GetItemCount() {
	return window.$(_elem).find(".ui-tabs-nav > li").length;
}

Step 6 – Adding Properties
To add properties to this control, click on Properties tab

Property Description
all items Gets all tab titles separated by semicolon
items count Gets number of tabs
logical name Gets id of the DIV tag containing Tab widget
selected Gets the title of selected Tab
  1. Click Add [+] button in Properties list. Enter the name of Property. Repeat this for all the properties.
  2. Select the “logical name” property and open Object Identification – Mandatory Section. Click  >> button in middle to move this property in mandatory section
  3. Click on Implementation Code… button . This will open the Code editor. A empty function for Select operation will be added by the code editor
////////////////////////////////////////////////////////////////////////////////
// This returns property value for specified property
//
// Parameters: Name of the Property
// Returns:   String
///////////////////////////////////////////////////////////////////////////////////
function get_property_value(property) {
	if (property == "selected") {
		return window.$(_elem).find(".ui-tabs-nav > li[class*='ui-tabs-selected']")[0].innerText;
	}

	if (property == "items count") {
		return window.$(_elem).find(".ui-tabs-nav > li").length;
	}

	if (property == "all items") {
		var tabLabels = new Array();
		var tabs = window.$(_elem).find(".ui-tabs-nav > li");
		for (var i = 0; i < tabs.length; i++)
			tabLabels.push(tabs[i].innerText);
		return tabLabels.join(";");
	}

	if (property == "logical name")	{
		return _elem.id;
	}
}

Step 7 – Adding functions for Recording Select Operation
In Code editor create following functions. These function will add support for recording Select operation on Tab widget in QTP Record Mode

////////////////////////////////////////////////////////////////////////////////
// This function registers to listen for events that are specific to this
// control to support recording.
// It registers for clicks on all tabs.
//
// Parameters: none.
// Returns:   Boolean. (In this implementation always true.)
///////////////////////////////////////////////////////////////////////////////////
function AddEventHandler() {
	// Retrieve all of the tabs in the tab strip.
	var tabs = window.$(_elem).find(".ui-tabs-nav > li");

	for (var i = 0; i < tabs.length; i++) {
		var tab = window.$(tabs[i]);
		_util.RegisterForEvent(tab.find("a")[0], "onclick", "onTabClick", tabs[i]);
	}
	return true;
}

//////////////////////////////////////////////////////////////////////////////////
// This is the event handler function called during a recording session when a
// user clicks a tab.
// It retrieves the name of the tab that was clicked and records a step that
// selects the tab.
//
// Name:        onTabClick
// Parameters:  selectedItem - The parameter passed to the RegisterForEvent function,
//              in this case the tab that the user clicked.
//              eventObj - The event object for the onclick event.
// Returns:     Boolean. true if the operation was recorded, otherwise false.
///////////////////////////////////////////////////////////////////////////////////
function onTabClick(selectedItem, eventObj) {
	var tabLabel = trim(window.$(selectedItem).text());
	if (!tabLabel)
		return false;
	
	var arr = new Array();
	arr.push(tabLabel);
	_util.Record("Select", toSafeArray(arr), 0);
	return true;
}

Step 8 – Wrap-up and Deployment

  1. Save the Project
  2. We need to deploy this project in QTP so that we can use the newly created add-in for jQuery UI Controls
  3. To deploy on a local machine Select Project Deploy Deploy to Quick Test Professional from Main Menu. A confirmation dialog will be displayed with “Toolkit support set was successfully deployed” message
  4. Restart QTP if it’s open.
  5. In Add-In Manager you will see a new “jQueryUI” Add-In under Web Add-In. Select the Web and jQueryUI Add-In
  6. Open Internet Explorer and navigate to http://jqueryui.com/demos/tabs/default.html
  7. In QTP open the Object Spy and spy on the Tab control. Object Spy will identify this control as jQueryUITab Test Object. It will display properties and operations we defined earlier.
  8. Start recording in QTP and click on one of Tabs, QTP should record the Select operation as follows
Browser("jQuery UI Tabs - Default").Page("jQuery UI Tabs - Default").jQueryUITab("jQueryUITab").Select "Proin dolor"

Here is a sample QTP test

Set objTabWidget =  Browser("jQuery UI Tabs - Default").Page("jQuery UI Tabs - Default").jQueryUITab("tabs")

Print objTabWidget.GetItemCount()
Print objTabWidget.GetItems()

'Select by Index
objTabWidget.Select "#1"
Print objTabWidget.GetSelectedItem()

'Select by Title
objTabWidget.Select "Aenean lacinia"
Print objTabWidget.GetSelectedItem()

Using above steps you can add support for other jQuery UI Widgets such as Accordion, Date Picker, Track Bar etc. For more details visit http://jqueryui.com/demos/

Completed Web Extensbility Project is available at my GitHub Page https://github.com/upgundecha/testomatic/tree/master/Qtp/Web%20Extensibility


4 Comments on “[Tutorial] Building a QTP Add-In for jQueryUI Widget using HP Web Extensibility Accelerator”

  1. Pretty nice post. I just stumbled upon your weblog and wanted to say that I’ve truly enjoyed surfing around your blog posts. In any case I’ll be subscribing to
    your feed and I hope you write again soon!

  2. Paul says:

    Good afternoon,

    I found the information very helpful. I tried to download the source code from https://github.com/upgundecha/testomatic/tree/master/Qtp/Web%20Extensibility but I was unable to retrieve the code. Do you have this as a zip file?

    I was also wondering if you had any examples of the jQueryUI panel to retrieve content. The application has 3 panels with blocks containing content.

    Best,

    • unmesh says:

      Hi Paul,

      You can download the code by clicking Zip icon on GitHub. I’m not actively working on it, but I’ll try to post more examples soon.

      Best,
      Unmesh

  3. Arthy says:

    HI Unmesh,

    I am working on the project that is builtup using jqwidgets. I can workaround on all objects using QTP but unable to work with Grids.
    Can you sene me code for working with grids as webtables.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s