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:
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.
