Use Web object identifiers - exercise

In this exercise, you use XPath and CSS identifiers in a test object description to help locate the correct button in an HTML table.

Prerequisites

  1. Open UFT and create a new test.

  2. Disable Smart Identification for the Button test object class by selecting Tools > Object Identification, selecting the Web environment in the Object Identification dialog box, and then selecting the Button test object class from the Test Object classes list.

  3. Disable automatic XPath in the Web > Advanced node (Tools > Options > GUI Testing tab > Web > Advanced node) by clearing the Learn and run using automatic XPath identifiers check box.

Back to top

Create a sample Web application

  1. Copy the following syntax content into a text document, and save the document with an .html extension. The document is saved as an HTML page.

    <html>
    <head>
        <title>Sample Web Page</title>
        <style type="text/css">
            body
            {
                background: green;
                color: blue;
            }
            .SelectedRow
            {
                color: #00F;
                background: #ebcbeb;
                width: 450px;
            }
            .RegularRow
            {
                color: #444;
                background: #cbebeb;
                width: 450px;
            }
            .BPTRow
            {
                color: #D9660E;
                background: #cbebeb;
                width: 450px;
            }
        </style>
    </head>
    <body>
        <br />
        <br />
        <table id="maintab">
            <tr class="BPTRow" id="BPT">
                <td>
                    Business Process Testing
                </td>
                <td>
                    <input type="button" value="Buy" />
                </td>
            </tr>
            <tr class="RegularRow" id="QC">
                <td>
                    Application Lifecycle Management
                </td>
                <td>
                    <input type="button" value="Buy" />
                </td>
            </tr>
            <tr class="SelectedRow" id="UFT">
                <td>
                    Unified Functional Testing
                </td>
                <td>
                    <input type="button" value="Buy" />
                </td>
            </tr>
        </table>
    </body>
    </html>
    
  2. Review the appearance and content of your newly created HTML page in any browser. Make sure that it matches the following image.

Back to top

Learn the button objects in the Web application

  1. In UFT, open the Object Repository Manager, and select Object > Navigate and Learn. UFT is hidden, and the cursor changes to a pointing hand.

  2. To verify that UFT learned the objects correctly, in the object repository, select each Button object and select View > Highlight in Application. UFT highlights each button object in the HTML page.

  3. Rename the Button objects to make them more clear:

    • Rename Buy to Buy_BPT.

    • Rename Buy_2 to Buy_ALM.

    • Rename Buy_3 to Buy_UFT.

Back to top

Remove the ordinal identifiers from the button objects

Because all of the Button objects have identical property values, when UFT learned the objects it assigned an ordinal identifier to each test object based on the location of each object in the application. This may cause UFT to identify the objects incorrectly if the sorting order of the buttons in the application changes.

  1. In the Object Repository Window, select the first button object to display its object properties on the right side of the object repository window.

  2. In the Ordinal Identifier section, select the Browse button. The Ordinal Identifier Dialog Box opens.

  3. In the Identifier type drop-down list, select None and close the dialog box. The ordinal identifier is removed from the test object's description properties.

  4. Repeat the previous steps for each of the buttons.

  5. Verify that the test object descriptions are no longer unique by selecting each test object and selecting View > Highlight in Application. UFT cannot identify the objects.

Back to top

Add a CSS identifier based on the object's parent container

  1. Select the Buy_BPT button. The test object details are displayed on the right side of the object repository window.

  2. In the Object Description section, click the Add button, and add the css property to the test object description.

  3. Copy and paste the following syntax into the Value edit box:

    tr.BPTRow input

Back to top

Add an XPath identifier based on the object's parent container

  1. Select the Buy_UFT button. The test object details are displayed on the right side of the object repository window.

  2. In the Object Description section, click the Add button, and add the xpath property to the test object description.

  3. Copy and paste the following syntax into the Value edit box:

    
    //TR[@id='UFT']/*/INPUT
    

Back to top

Add an XPath identifier based on the object's sibling element

  1. Select the Buy_ALM button. The test object details are displayed on the right side of the object repository window.

  2. In the Object Description section, click the Add button, and add the xpath property to the test object description.

  3. Copy and paste the following syntax into the Value edit box:

    //td[contains(text(),'ALM')]/../*/INPUT
    

Back to top

Results

Select each object and select View > Highlight in Application. UFT can now identify each button based on the Web object identifiers you added.

Back to top