51.1.4
CustomWebResolver – Tree

In order to resolve Tree components correctly, it is necessary to map the component containing all entries, which is the tree itself, as well as the components which represent the individual tree entries. Furthermore, you need to map the toggle button which opens and closes a tree node.

Class Required components and sub-items
Tree Represents the Tree component, contains all tree nodes.
TreeNode Represents a tree node.
Expander:TreeNodeExpander Represents the toggling component used to open and close the tree node.
  Optional sub-items
Spacer:TreeNodeSpacer (Optional) Represents the spacing object used to create the indentation of the tree node.
CheckBox:TreeNodeCheckBox (Optional) Represents a CheckBox of a tree node.
Icon:TreeNodeIcon (Optional) Represents an Icon in a tree node.
Table 51.2:  Mapping of trees

If QF-Test does not recognize the level of branches or leaves out-of-the-box or does not expand nodes correctly, you can configure the Configuration category treeResolver of the CustomWebResolver. Alternatively, you can use The TreeIndentationResolver Interface to configure the indentation detection.

Example:

The "CarConfigurator Web" demo (qftest-9.0.0/demo/carconfigWeb/carconfigWeb_de.qft) contains a tree. Please open the specials dialog via the menu »Options«-»Specials...«, select a model and click the Button 'Details'.

When you have a look at the CSS classes recorded by QF-Test or analyze the web page with the UI Inspector you will find the following HTML structure (slightly simplifies and shortened): 

<table id="DetailsTree" class="tree">
  <tbody>
    <tr class="treenode even">
      <td>Information</td>
      <td></td>
    </tr>
    <tr class="treenode odd>
      <td>
        <span>
          <span class=treenodespacer">&nbsp;&nbsp;</span>
          <span class="treetoggler">
            <img src="include/collapse.png" onclick="javascript: ..."></img>
          </span>
          <span>Zubehör</span>
        </span>
      </td>
    </tr>
    <tr class="treenode odd>
      <td>
        <span>
          <span class=treenodespacer">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <span>Zentralverriegelung</span>
        </span>
      </td>
    </tr>
  </tbody>
</table>
Example 51.22:  HTML Tree

In the CarConfigurator demo test suite you will find the mapping for the tree in the Install CustomWebResolver node. It is located in the procedure startStop.start in the last sequence, Install CustomWebResolver.

WebCarConfig
Figure 51.7:  CarConfigurator Web

The following CustomWebResolver configuration entries map the tree: 

genericClasses:
- Tree: tree
- TreeNode: treenode
- Expander:TreeNodeExpander: treetoggler
- Spacer:TreeNodeSpacer: treenodespacer
Example 51.23:  HTML tree