About these ads

Using DOM, XPath & CSS for Object Identification in QTP – Part 3

We saw how to use HTML DOM and XPath for Web Object Identification in Part 1 & Part 2. In this final Part we will explore using CSS for Object Identification in QTP 11.

Introduction to CSS (Cascading Style Sheets)

CSS (Cascading Style Sheets) is a language used for formatting and rendering of HTML and XML documents.

CSS uses Selectors for binding style properties to elements in the document. These Selectors can be used by QTP as another object identification strategy.

Finding elements with XPath can be costly in terms of performance. CSS Selectors can be more efficient as they are forward only. However they do not provide backword search flexibility as XPaths.

Using CSS for Web Object Indetification

Along with XPath, QTP 11 has added CSS Object Identification Property to all Test Objects in Web Add-In. You can specify CSS Selectors by using css Property.

You can enable and use css Property in Object Repository or in Descriptive Programming. In following example CSS class attribute is used identify Sign In Button on Gmail Home Page:


Browser("title:= Gmail: Email from Google").Page("title:= Gmail: Email from Google").WebButton("css:=input.g-button").Click

Using CSS class attribute is most common and simplest method to indetify the elements. You can identify the elements using class attribute in following way:


element.class_attribute

In above example we identified Sign In Button on Gmail Home Page. Here is the HTML Syntax for Sign In Button. You can see developers have assigned class attribute as g-button:

<input id="signIn" class="g-button" type="submit" value="Sign in" name="signIn" style="background-color: rgb(77, 144, 254);">

Identifying Elements using ID

As we saw in XPath, we can identify elements using their IDs, CSS also has similar way to identify elements using ID. Following is the syntax for identifying elements using ID:

element#id

We need to specify a # between element type and its ID. In following example we will identify User Name Text Box on Gmail Home Page using its ID:


Browser("title:= Gmail: Email from Google").Page("title:= Gmail: Email from Google").WebEdit("css:=input#Email").Set "myname"

Identifying Elements using Attributes

Similar to XPath, we can also use element attributes to identify objects. Following is the syntax for identifying elements using their attributes:

element[attribute=value]

In following example, we will identify and check Stay signed in Checkbox on Gmail Home Page using type attribute:


Browser("title:= Gmail: Email from Google").Page("title:= Gmail: Email from Google").WebCheckBox("css:=input[type='checkbox']").Set "ON"

We can also perform partial match on attribute values using following operators:

Operator Description
^=attribute_value Finds the element attribute starting with the value passed. This is similar to starts-with() function in XPath
*= attribute_value Finds the element attribute which contains the value passed. This is similar to contains() function in XPath
$= attribute_value Finds the element attribute ending with the value passed. This is similar to ends-with() function in XPath

In following example, developers have assigned dynamic attribute values for all the input elements in following way:

<div id='login_area'>
<input type='text' name='text_1'>
</div>

We can use either ^= or *= function to identify this object in following way:


Browser("title:= Test App").Page("title:= test App").WebEdit("css:=div#login_area input[name^='text_']").Set "somevalue"

Browser("title:= Test App").Page("title:= test App").WebEdit("css:=div#login_area input[name*='text_']").Set "somevalue"

Identifying Elements using Text Contents

Locating elements by the text they contain can be quite useful. To identify elements, we need to use CSS contains pseudo class. This will match the entire contents of the element.


element:contains('text')

In following example, we will use contains pseudo class to identify the Create an account link on Gmail Home Page:


Browser("title:= Gmail: Email from Google").Page("title:= Gmail: Email from Google").Link("css:=a:contains('Create an account')","index:=0").Click

Identifying Elements using Relationships

Similar to XPath Axes, we can identify elements using relationships in CSS. Following are some exmaples  for identifying elements by their relationships:

Child/Descendent Elements nth-child orE1 >E2
Element <E1> following some sibling <E2> E2 ~ E1
Element <E1> immediately following sibling <E2> E2 + E1
Element <E1> following sibling <E2> with one intermediary E2 + * + E1

For more combinations please refer here.

We will use the Shopping Cart example from Part 2 to understand identifying elements using relationships in CSS. In following example we select an item by entering the quantity and click the Shopping Cart image to add the item in Cart:


Browser("title:= ShopX").Page("title:= ShopX ").WebEdit("xpath:=td:contains('0002')+td+td+td>div>form>div>input[name='qty']").Set "10"
Browser("title:= ShopX").Page("title:= ShopX ").Image("xpath:=td:contains('0002')+td+td+td>div>form>div>input[name='add']").Click

Here is another example I created for a custom Dropdown control. This control is created with combination of a Text Box, a Button and a DIV containing multiple LI elements. QTP identify this control in following way:

Custom Dropdown Control

When clicked on the Dropdown Button which is identified as WebButton, a dynamic DIV is displayed with values available for selection in HTML LI elements. This is automated using CSS in following way:

Browser(title:=MyApp").Page("title:=MyApp).WebButton("id:=item_Dropdown").Click
Browser(title:=MyApp").Page("title:=MyApp).WebElement("css:=div#item_Dropdown>li:contains('Value2')").Click

There are endless possibilities to identify objects using CSS and XPath. However these are some of the example to understand the basics.

I will close this series with a caution that DOM, XPath, CSS type of identifiers are dependent on locations and page structure and may not work always where developers change the UI frequently.


5 Comments on “Using DOM, XPath & CSS for Object Identification in QTP – Part 3”

  1. Deepa says:

    Can You please tell me How to write code for identifying checkbox property..View source is as listed below —
    Stage 1

  2. vraj says:

    If the “Logout” link is present in the “MouseOver” user Profile Dropdown,
    For this scenario can u give the Code
    How to click the Link using QTP?

  3. kwejk says:

    It’s going to be ending of mine day, but before finish I am reading this enormous post to increase my knowledge.

  4. suryalekha says:

    I m new to this.. do we have to use css and xpath together always?


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

Follow

Get every new post delivered to your Inbox.

Join 46 other followers