Manuel
 

TopTable of contentsPrevious Chapter: 48.1.5 Mapping of Tables and TreeTablesNext Page: 48.1.7 Mapping of ListsNext Chapter: 48.1.7 Mapping of ListsChapter Overview: 48.1 Improving component recognition with a CustomWebResolverPDF versionQF-Test
Version 6.0.5
Mapping of Trees

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

ClassRequired components and sub items
TreeRepresents the Tree component, contains all tree nodes.
TreeNodeRepresents a tree node.
Expander:TreeNodeExpanderRepresents 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 level 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 48.2:  Mapping of trees

In case of TreeTables, simply replace Tree with TreeTable, i.e. TreeTable instead of Tree, TreeTableNode instead of TreeNode, Expander:TreeTableNodeExpander instead of Expander:TreeNodeExpander etc.

Example:

The WebCarConfigurator demo (qftest-6.0.5/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 analyse the web page with the developer tool of a browser (cf. subsection 48.1.2) 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 48.2:  HTML Tree

In the CarConfigurator demo test-suite you will find the mapping for the tree in the procedure call to qfs.web.ajax.installCustomWebResolver. It is located in the procedure startStop.start in the last sequence, Install CustomWebResolver.

WebCarConfig
Figure 48.5:  WebCarConfigurator

In the value field of the parameter 'genericClasses' the following entries map the tree:

 
 
installCustomWebResolver
Map the tree of the QF-Test demo test-suite.
Parameters
resolver custom
version
genericClasses tree=Tree,
treenode=TreeNode,
treetoggler=Expander:TreeNodeExpander,
treenodespacer=Spacer:TreeNodeSpacer
 
 
TopTable of contentsPrevious Chapter: 48.1.5 Mapping of Tables and TreeTablesNext Page: 48.1.7 Mapping of ListsNext Chapter: 48.1.7 Mapping of ListsChapter Overview: 48.1 Improving component recognition with a CustomWebResolverPDF versionLast update: 3/15/2023
Copyright © 1999-2022 Quality First Software GmbH

Nous utilisons des cookies "Matomo" pour l'évaluation anonyme de votre visite à note page web. Pour cela nous avons besoin de votre consentement qui est valable pour douze mois. La révocation est possbile n'importe quand sur notre page "Protection de données".

accepter
configuration
Configuration de cookies

1. Cookies fonctionnels

Nous utilisons des cookies fonctionnels pour garantir la fonctionnalité de base du site web.

2. Cookies de performance et de statistique

Nous utilisons Matomo pour analyser et améliorer notre site web. Des cookies permettent une collection anonyme des informations qui nous aident à vous offrir un visite clair et facile à utiliser de nos pages web.

Confirmer la sélection

Cookie details