New TestComplete HTML Table Checkpoint – Simplify Creation of Tests for Web Applications
Develop | Posted September 10, 2010

Web developers use TABLE elements to display tabular data on their web pages or to set the desired
layout for the page contents. Cells of HTML tables contain various types of data: from plain text and
images to nested tables and complex child elements.

To simplify the task of comparing HTML Table elements within TestComplete, we implemented a special
HTML Table checkpoint. It automates the verification of TABLE elements and lets you compare them with
some baseline data using just one test command.

The checkpoint is implemented as a TestComplete script extension. It provides a special dialog, in
which you can interactively specify the TABLE element to be checked, and extends the TestComplete
scripting engine with a new HTMLTableCheckpoint object that performs the comparison of TABLE elements
with baseline data.

This script extension supports the following versions of TestComplete and web browsers:

  • TestComplete ver. 7.52 and 8.0
  • Internet Explorer ver. 7 and 8, Firefox ver. 3.5 and 3.6

Download and Installation

  1. Important: The script extension requires MSXML 4 to be installed.

  2. You can download the HTML Table Checkpoint package from the AutomatedQA web site:
    (135 KB)

  3. Important: Check the extension of the downloaded file. By default, the file has the .tcx extension and is associated with TestComplete. Some web browsers can automatically change the extension to zip. If this happened in your case, you need to change the extension back to .tcx before proceeding with the plug-in installation. For information on changing file extensions, see Windows documentation.

  4. Double-click the downloaded file in Windows Explorer.
    This will invoke the Installing Extension dialog.


    To do this:

      the Script Extensions dialog.
    • In the dialog, click Reload. You will see the checkpoint under the Checkpoints
    • Close the dialog.

After the checkpoint is installed, you will see its icon in the Tools toolbar:

How It Works

The HTML Table checkpoint is based on the XML checkpoint.

When you command TestComplete to create a HTML Table checkpoint, the test engine displays a dialog
allowing you to pick the desired web TABLE element from the screen.

The checkpoint then saves the contents of this TABLE element to an .xml file and adds the file
reference to the Stores | XML collection of your test project. The structure of the saved .xml file
depends on the structure of the table’s rows and cells and their ID attributes. The textual content
is stored based on the data, innerText and textContent properties
of HTML elements (these properties are provided by web browsers).

When verifying the table data, the checkpoint compares the table’s actual contents with the
stored .xml file. The HTML Table checkpoint reports results using the XML checkpoint log type.

During comparison, the checkpoint ignores the order of rows in the table. Also, the checkpoint
verifies only textual data of cells. Images and ActiveX objects are ignored.

How to Create an HTML Table Checkpoint

You can create HTML Table checkpoints both during script recording and at design time. Let’s see
how you can do this at design time (creation of the checkpoint during test recording is similar):

  1. Open the tested web page in your web browser.

  2. In TestComplete, select HTML Table Checkpoint from the Code Editor’s toolbar:

    The HTML<br />    Table Checkpoint toolbar item

    Note: to create the checkpoint during script recording, you select this item from the Recording

    Selecting the toolbar item invokes the following dialog:

    The Create<br />    HTML Table Checkpoint Dialog

  3. In the dialog, drag the Finder tool (Finder Tool) to some text within the desired TABLE element of the tested web page. While you are
    dragging, TestComplete will highlight the objects under the mouse cursor.

  4. After you selected the desired table, the dialog will display the names of the found TABLE

    The Create<br />    HTML Table Checkpoint Dialog

    In our case, the dialog displays only one item. Several items are displayed if you chose an element
    that resides in a nested table.

  5. Choose the appropriate table in the list, enter the checkpoint name into the Name edit box
    and click OK.

    The checkpoint will generate the verifying script statements and display them on screen:

    The Generated Code

    As you can see the generated script includes a call of the HTMLTableCheckpoint.Compare
    method. This method uses the following two parameters:

    • The first parameter specifies the baseline data (on the image above, it’s the MyCheckpoint item of the Stores | XML collection).
    • The second parameter specifies the script object that corresponds to the checked TABLE element.
    • The third parameter is optional. It can be either True (default) or False. It specifies whether the
      method will post information on differences to the test log.
  6. Click Copy to copy the statements to the clipboard and then paste them to your script

After you run the test with the checkpoint, you can see the results in the test log:

The checkpoint's<br />results in the test log

To view detailed comparison results, click Details. As we have said above, the HTML Table checkpoint uses the XML Checkpoint log view:

The checkpoint's<br />results in the test log

Currently, you can inset the HTML Table checkpoints into script code only. To use the checkpoint in
keyword tests, you may use the Call Object Method or Run Code Snippet keyword-test operations.


By submitting this form, you agree to our
Terms of Use and Privacy Policy

Thanks for Subscribing

Keep an eye on your inbox for more great content.

Continue Reading

Add a little SmartBear to your life
