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 OpenText Functional Testing and create a new test.

  2. 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.

  3. 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 checkbox.

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 OpenText Functional Testing, open the Object Repository Manager, and select Object > Navigate and Learn. OpenText Functional Testing is hidden, and the cursor changes to a pointing hand.

  2. To verify that OpenText Functional Testing learned the objects correctly, in the object repository, select each Button object and select View > Highlight in Application. OpenText Functional Testing 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 OpenText Functional Testing 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 OpenText Functional Testing 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. OpenText Functional Testing 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. OpenText Functional Testing can now identify each button based on the Web object identifiers you added.

Back to top