Docstoc

Automating Web 2.0 using HP QuickTest Professional 9.5 Web Extensibility

Document Sample
Automating Web 2.0 using HP QuickTest Professional 9.5 Web Extensibility Powered By Docstoc
					   Automating Web
   2.0 using HP
   QuickTest
   Professional 9.5
   Web Extensibility
  Ayal Cohen
  Functional Architect, Functional Testing
  Products

  Will Roden
  Senior Quality Engineer
  Authoria




© 2008 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice
“Give a man a fish and you feed him for
 a day. Teach a man to fish and you
 have fed him for a lifetime.”

                             Source: Chinese Proverb
What do we mean by support?




3   19 June 2008
Quick test extensibility




4   19 June 2008
Web extensibility
Control level extensibility

•New in QTP 9.5
•Extending QTP support for specific Web controls
•Supports third party or home grown controls
•Requires basic knowledge of JavaScript
•Enables testing AJAX based applications




5   19 June 2008
Automating Web 2.0



HP QuickTest Professional 9.5
Web Extensibility
What Is Web Extensibility?


  • SDK to extend QTP’s support of web controls
  • You can create support for custom controls.
    > Call your menu div Menu(…) instead of
      WebElement(…)
  • Add methods for your custom controls
    > Fill your contact form with
      ContactForm.Fill( “tester1”, _
      “tester1@example.com”)
Before
  Set oLoginBox = oBrowser.WebElement( _
  "micclass:=WebElement", "class:=loginContentBg", _
  "html tag:=DIV")
  oLoginBox.ChildObjects(oWebEdits).item(0).set "big"
  oLoginBox.ChildObjects(oWebEdits).item(1).set "toe"
  oLoginBox.ChildObjects(oWebButtons).item(0).click


After
oBrowser.LoginBox("index:=0").Login "big", "toe"
Simple WebExt in Three Files



  •   The Login Screen
  •   Object named LoginDiv
  •   One method named Login
  •   Syntax will be
      LoginDiv().Login( _
          username, passwd )
WebExtTestObjects.xml

 <TypeInformation PackageName="auLogin" AddinName="Web">
  <ClassInfo BaseClassInfoName="WebElement" Name="LoginDiv">
   <TypeInfo>
   <Operation Name="Login">
    <Argument Name="userName" IsMandatory="true">
     <Type VariantType="String"/>
    </Argument>
    <Argument Name="password" IsMandatory="true">
     <Type VariantType="String"/>
    </Argument></Operation></TypeInfo>
   </ClassInfo> </TypeInformation>
WebExt.xml

<Controls>
 <Control TestObjectClass="auLoginForm">
  <Settings>
   <Variable name="default_imp_file"
     value="auLoginForm.js"/>
  </Settings>
   <Identification>
    <Conditions type="IdentifyIfPropMatch" logic="and">
     <Condition prop_name="tagName" expected_value="DIV"/>
     <Condition prop_name="className"
      expected_value="loginContentBg"/>
    </Conditions></Identification>
    </Control></Controls>
auLoginForm.js


  function Login(userName, password)
  {
    childNodeByID(_elem, "loginField").value = 
     userName;
    childNodeByID(_elem, "passwordField").value = 
     password;
    childNodeByID(_elem, "Submit1_a").click();
  }
Deploy the WebExt


  • Put WebExt files in the correct
    directories:
    >   Extensibility\Web\WebExtTestObjects.xml
    >   Extensibility\Web\Toolkits\WebExt\WebExt.xml
    >   Extensibility\Web\Toolkits\WebExt\auLoginForm.js
    >   Extensibility is in
        C:\Program Files\HP\QuickTest Professional\dat\
  • Restart QuickTest Pro
  • Close all instances of IE
Load WebExt




 • Just check the box
Testing an Ajax Control
Testing an Ajax Control


  • OrgChart
    > Container for the entire chart
  • PositionBox
    > A single item on the org chart representing a position
  • PopupMenu
    > The action menu inside the position box
    > The same class is used throughout the AUT
Class Methods and Properties

  • OrgChart
    > No methods yet. This is just a simple container.
  • PositionBox
    > positionholder
       • Returns the name of the person holding the position
    > positiontitle
       • Returns the title of the position
  • PopupMenu
    > selectItem(sMenuItem)
       • Clicks the menu item that matches sMenuItem
PositionBox

  • WebExtTestObjects.xml
    <ClassInfo Name="PositionBox" … >
     <IdentificationProperties>
      <IdentificationProperty Name="positionholder" />
      <IdentificationProperty Name="positiontitle" />
    </IdentificationProperties></ClassInfo>


    > These are Identification Properties, not methods like
      we saw before. They are accessed through
      GetROProperty().
    > Properties have to be all lower-case to work as
      identifiers
PositionBox


• PositionBox.js
  function get_property_value(prop) { 
   if (prop == "positionholder") { 
    return _elem.children[0].children[0].children[1].innerText; }
   if (prop == "positiontitle") {
    return _elem.children[0].childNodes[0].childNodes[5].nodeValue;
     }}

  > get_property_value returns values for all Identification
    Properties
  > prop is the name of the property
PositionBox


  • Now we can do this

       PositionBox("positionholder:=Kristen Ard")
         .GetROProperty("positiontitle")
       'returns "Customer Service Representative"


    > Identify the object with
      an Identification Property
    > Get the value of another
      Identification Property
PopupMenu


 • WebExtTestObjects.xml
 <Operation Name="selectItem" PropertyType="Method">
  <Argument Name="sItemText" IsMandatory="true">
   <Type VariantType="String" />
  </Argument> </Operation>



 • WebExt.xml
 <Control TestObjectClass="PopupMenu">
  <Identification>
   <Conditions type="IdentifyIfPropMatch">
    <Condition prop_name="tagName" expected_value="TABLE" />
    <Condition prop_name="className" expected_value="popUpMenu" />
   </Conditions> </Identification> </Control>
PopupMenu


 • PopupMenu.js

 function selectItem(sItemText) {
  getMenuItem(sItemText).oCell.fireEvent("onmousedown");
 }

 function getMenuItem(sItemText) {
  sItemText = sItemText.trim();
  var oRows = _elem.rows;
  for (var count = 0; count < oRows.length; count++){
   var sCurrentText = oRows[count].innerText.trim();
   if (sCurrentText == sItemText) {
    var oCells = oRows[count].cells;
    for (var j = 0; j < oCells.length; j++) {
     if (oCells[j].className == "popUpMenuItemClickable") {
      return oCells[j];
 } } } } }
PopupMenu


 • Now we can do this to choose the “View Talent
   Profile” menu item for Kristen Ard
 Browser.OrgChart("index:=0")
   .PositionBox("positionholder:=Kristen Ard")
        .PopupMenu("index:=0")
               .selectItem("View Talent Profile")


    > And there we have it
    > Except it doesn’t work
    > The menu is an AJAX control that isn’t built until the
      action image is clicked
Getting to PopupMenu
Getting to PopupMenu


  • The syntax we are looking for is something like:
    PositionBox.SelectAction("View Talent Profile")

  • SelectAction can’t be a WebExt method
    because it will have to call another WebExt
    Object ( PopupMenu )
  • SelectAction has to be a vbscript function
SelectAction


  • vbscript library function
  Function boxSelectAction(oBox, sItem)
     oBox.ActionButton("index:=0").click
     waitForPageLoad
     oBox.RefreshObject
     boxSelectAction = oBox.PopupMenu.selectItem(sItem)
  End Function
  registeruserfunc "PositionBox", "SelectAction", _
     "boxSelectAction"
The Final Code


  • This time it really works

  Browser.OrgChart
    .OrgChartBox.selectAction("View Talent Profile")
Demo Time


 • Managing your XML and Javascript code
Q&A



• Questions
• Answers
Technology for better business outcomes

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:19
posted:2/12/2012
language:English
pages:31