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.
|
<head>
<!-- Starting of CSS
-->
<style type="text/css">
/* Define h1 tag style */
h1
{
color:orange;
text-align:Left;
}
/* Define CSS Classes */
.MyObject1 { color: #22444; background:
#ebcbeb; width: 200px; }
.MyObject2 { color: #22444; background:
lightblue; width: 200px; }
</style>
</head>
<body>
<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">
</input>
<h1>Sudhakar Kakunuri</h1>
</body>
</html>
|
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
nice work
ReplyDelete