Course Name Start Date Time Duration Registration Link
No Training Programs Scheduled ClickHere to Contact
Please mail To sudhakar@qtpsudhakar.com to Register for any training

Saturday, January 7, 2012

Using CSS in QTP 11

The Object Identification for QTP is based on the Recorded Object Description, Visual Relation Identifiers, Smart Identification and Ordinal Identifiers. You can observe all these options for all QTP supported environments like Web, Windows, VB, and Java…etc.
But when it comes to Web Applications there are few more identifiers to identify the objects. Those are
  • CSS
  • User Defined X-Path
  • Automatic X-Path
  • Native Properties
CSS (Cascading Style Sheet) is a language used to define formatting of elements in HTML pages. You can define a CSS identification property value for a test object to help identify a Web object in your application based on its CSS definition.

For your understanding I have given the below sample on how to use CSS in HTML.

<!-- Starting of CSS -->
<style type="text/css">
/* Define h1 tag style */
/* Define CSS Classes */
.MyObject1 { color: #22444; background: #ebcbeb; width: 200px; }
.MyObject2 { color: #22444; background: lightblue; width: 200px; }
<h1>CSS in QTP</h1>
<!-- Specify defined CSS class for object -->
<input type=button class="MyObject1" value="QtpSudhakar">
<input type=button class="MyObject2" value="QtpSudhakar">
<h1>Sudhakar Kakunuri</h1>

In the above html document I have defined a style for “h1” tag. Because of that where ever I have used “h1” tags automatically the specified style will be applied there.

I have also created a CSS style classes MyObject1 and MyObject2. I can specify the CSS style class for any object using “class=MyObject1” or “class=MyObject2”.

Like this we can specify styles to automatically give a specific formatting for Html tags or we can specify class names for selected objects.

The output of above code is like below

Using CSS Property for QTP Objects

Follow below steps to know how to use CSS in QTP
1)       Save above html code with a html file
2)       Open the saved html file
3)       Open QTP
4)       Disable smart identification for WebButton class in Toolsà Object Identification window
5)       Read the both “QTPSudhakar” buttons to Object Repository

6)       Remove Ordinal Identifier Index for both the buttons in Object Repository

There will be two “QtpSudhakar” buttons created because there are duplicate buttons with the name of QtpSudhakar. We differentiate these buttons based index. But index is not reliable if more objects are added. But we can use CSS property to differentiate both the objects. Continue to below steps

7)       Select QtpSudhakar Button in Object Repository
8)       Click on Property Add (+) in the Object Description Place

9)       Select CSS property

10)    Give “.MyObject1” in the value column

11)    Select QtpSudhakar_2 Button in Object Repository
12)    Click on Property Add (+) in the Object Description Place
13)    Select CSS property
14)    Give “.MyObject2” in the value column
15)    Highlight both the objects

1 comment :