Facebook

For any corporate training requirements Please mail To sudhakar@qtpsudhakar.com
New Schedule in MindQ Systems, Madhapur By SUDHAKAR
Course Name Date Time Duration Type Branch
Selenium+Appium 16th October 2017 7.30 AM - 9.00 AM IST 45 Days ClassRoom + Online Mind Q Madhapur
Selenium+Appium 30th October 2017 9.30 AM - 11.00 AM IST 45 Days ClassRoom + Online Mind Q Madhapur

A book "Cracking the QTP interview" authored by Sudhakar.Read More. Buy From FlipKart

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.

<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
____________________________________________
Please send your Suggestions and Doubts to my yahoo group http://in.groups.yahoo.com/group/qtpsudhakar

1 comment :