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

Open UFT One and create a new test.
Deactivate 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.
Turn off 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.

Create a sample Web application

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>

Review the appearance and content of your newly created HTML page in any browser. Make sure that it matches the following image.

Learn the button objects in the Web application

In UFT One, open the Object Repository Manager, and select Object > Navigate and Learn. UFT One is hidden, and the cursor changes to a pointing hand.
To verify that UFT One learned the objects correctly, in the object repository, select each Button object and select View > Highlight in Application. UFT One highlights each button object in the HTML page.
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.

Remove the ordinal identifiers from the button objects

Because all of the Button objects have identical property values, when UFT One 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 One to identify the objects incorrectly if the sorting order of the buttons in the application changes.

In the Object Repository Window, select the first button object to display its object properties on the right side of the object repository window.
In the Ordinal Identifier section, select the Browse button. The Ordinal Identifier Dialog Box opens.
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.
Repeat the previous steps for each of the buttons.
Verify that the test object descriptions are no longer unique by selecting each test object and selecting View > Highlight in Application. UFT One cannot identify the objects.

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

Select the Buy_BPT button. The test object details are displayed on the right side of the object repository window.
In the Object Description section, click the Add button, and add the css property to the test object description.
Copy and paste the following syntax into the Value edit box:
```
tr.BPTRow input
```

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

Select the Buy_UFT button. The test object details are displayed on the right side of the object repository window.
In the Object Description section, click the Add button, and add the xpath property to the test object description.
Copy and paste the following syntax into the Value edit box:
```
//TR[@id='UFT']/*/INPUT
```

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

Select the Buy_ALM button. The test object details are displayed on the right side of the object repository window.
In the Object Description section, click the Add button, and add the xpath property to the test object description.
Copy and paste the following syntax into the Value edit box:
```
//td[contains(text(),'ALM')]/../*/INPUT
```

Results

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