51.1.3
CustomWebResolver – Tables

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.

Class Required components and sub-items
Table Represents the Table component, contains all rows and cells.
TableRow Represents a table row.
TableCell Represents a table cell.
TableHeader Represents a row of the table headers.
TableHeaderCell Represents 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 51.1:  Mapping of Tables

In addition 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 51.20:  HTML Table

The following configuration for the Install CustomWebResolver node only maps the data table to a QF-Test table component. 

genericClasses:
- Button: button
- TableCell:
    css: datacell
    ancestor: TableRow
- Panel:myTablePanel: role=datatablecontainer
- TableHeader:
    attribute: type
    attributeValue: header
    tag: th
- Table:
    tag: table
    ancestor:
        type: parent
        className: Panel:myTablePanel
- TableHeaderCell:
    tag: td
    ancestor: TableHeader
- TableRow:
    tag: tr
    ancestor: Table
ignoreTags:
- <DIV>
- <SPAN>
- <TABLE>
Example 51.21:  HTML table

In the mapping of Panel:myTablePanel, the class type myTablePanel was freely "invented" 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.

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

To make sure the mappings will only affect HTML elements with the tags TR and TD that are part of a data table we add ancestor: to each.

We do not want to record HTML elements with the HTML tag TABLE that are not mapped to a QF-Test Table component. Therefore, we add <TABLE> in the category ignoreTags in addition to the default entries <DIV> and <SPAN> which, in turn, make sure that unmapped DIV and SPAN elements will not be recorded.