Mapping of Tables and TreeTables

In order to resolve Table components correctly, it is necessary to map the component containing all entries, i.e the table itself as well as the components which represent the individual rows of a table and the individual table cell entries. Furthermore, the row containing all headings as well as the specific headings need to be mapped to generic classes.

ClassRequired components and sub items
TableRepresents the Table component, contains all rows and cells.
TableRowRepresents a table row.
TableCellRepresents a table cell.
TableHeaderRepresents a row of the table headers.
TableHeaderCellRepresents a header cell.
 Optional sub items
CheckBox:TableCellCheckBox(Optional) Represents a CheckBox in table cell.
Icon:TableCellIcon(Optional) Represents an Icon in a table cell.
CheckBox:TableCellHeaderCheckBox(Optional) Represents a CheckBox of a table header cell.
Icon:TableCellHeaderIcon(Optional) Represents an Icon of a table header cell.
Table 48.1:  Mapping of Tables

In case of TreeTables, simply replace Table with TreeTable.

Additionally to the following example you will find a detailed instruction for mapping a table in Mapping of complex components like data-tables.

Example:

The following HTML code defines two tables, one as a data table and the other one for the layout of buttons:

<div role="datatablecontainer">
    <table>
        <th type="header">
            <td class="datacell">Form</td>
            <td class="datacell">Color</td>
        </th>
        <tr>
            <td class="datacell">Square</td>
            <td>Red</td>
        </tr>
        <tr>
            <td class="datacell">Diamond</td>
            <td class="datacell">Blue</td>
        </tr>
    </table>
</div>
<table>
     <tr>
        <td>
            <div class="button">Save</div>
            <div class="button">Cancel</div>
        </td>
    </tr>
</table>
Example 48.1:  HTML Table

Below parameters for installCustomWebResolver only map the data table to a QF-Test table component, however, not the HTML table used for the layout of the buttons.

 
 
installCustomWebResolver
Map a table.
Parameters
resolver custom
version
genericClasses button=Button,
datacell=TableCell@::ancestor=TableRow  

attributesToGenericClasses role=datatablecontainer=Panel:myTablePanel,
type=header=TableHeader=TH  

tagsToGenericClasses TABLE=Table@::parent=Panel:myTablePanel,
TD=TableHeaderCell@::ancestor=TableHeader,
TR=TableRow@::ancestor=Table  

ignoreTags DIV,SPAN,TABLE
 
 

The procedure call maps only the data table as a Table component. The table layouting the buttons is not to be recorded. The only way to distinguish the two is that the data table is in a container object with a role attribute.

Have a look at role=datatablecontainer=Panel:myTablePanel. There, we use our own class type myTablePanel to distinguish the DIV element containing the data table from other DIVs. This allows us to use @::parent=Panel:myTablePanel in the mapping of the table to make sure it is a data table.

The mapping for the column title type=header=TableHeader=TH reads as follows: The attribute type with the value header will be mapped to the generic class TableHeader only if the HTML tag is th.

To be sure the mappings will only affect GUI elements with the tags TR and TD that are part of a data table we will append @::ancestor=... to each mapping.

We do not want to record GUI elements with the tag TABLE not mapped to a QF-Test Table component. Therefore, we will enter TABLE in the parameter ignoreTags, additionally to the standard entries DIV and SPAN which, in turn, have the effect that unmapped DIV and SPAN objects will not be recorded.