Manuel
 

TopTable of contentsPrevious Chapter: 50.1.7 'CustomWebResolver' – Combo boxesNext Page: 50.1.9 Example for "CarConfigurator Web" demoNext Chapter: 50.1.9 Example for "CarConfigurator Web" demoChapter Overview: 50.1 Improving component recognition with a CustomWebResolverPDF versionQF-Test
Version 8.0.1
'CustomWebResolver' – TabPanel and Accordion

In order to resolve tab panels or accordions correctly, it is necessary to map the component containing all entries, i.e. the tab panel itself as well as the components which represent the individual tab panel entries.

ClassRequired components and sub-items
TabPanelRepresents the tab panel component, contains all tabs.
Item:TabPanelItemRepresents an individual tab.
 Optional sub-items
Panel:TabPanelContent(Optional) Represents a panel containing the actual content of a selecting tab.
Closer:TabPanelCloser(Optional) Represents the closer button of one tab.
CheckBox:TabPanelCheckBox(Optional) Represents the checkbox of one tab.
Icon:TabPanelIcon(Optional) Represents the icon of one tab.
Table 50.6:  Mapping of tab panels

In case of accordion components you can map the classes to Accordion, Item:AccordionItem etc.

Sample:

The following HTML code represents a tab panel. As with many implementations of web pages there are a lot of additional nodes, irrelevant for the semantics of the tabs. Some of the nodes have attributes which could be used for the mapping. Therefore, we will show you below two different ways to configure the 'Install CustomWebResolver' node, leading to exactly the same result. 

<div role="tab-container">
  <div class="tabs">
    <div>
      <div>
        <ul>
          <div class="tab-bar">
            <div>
              <li>
                <div type="tab">Tab1</div>
              </li>
              <li>
                <div type="tab">Tab2</div>
              </li>
              <li>
                <div type="tab">Tab3</div>
              </li>
            </div>
          </div>
        </ul>
        <div class="content">
          <div role="tab-content" id="Tab1">
            <label>The first tab panel</label>
          </div>
        </div>
        <div class="content">
          <div role="tab-content" id="Tab2">
            <label>The second tab panel</label>
          </div>
        </div>
        <div class="content">
          <div role="tab-content" id="Tab3">
            <label>The third tab panel</label>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
Example 50.30:  HTML tab panel

genericClasses:
- TabPanel: tabs
- Panel:TabPanelContent: content
- Item:TabPanelItem: type=tab
ignoreTags:
- <DIV>
- <SPAN>
- <UL>
- <LI>
Example 50.31:  HTML tab panel variant 1

The second configuration is using a different approach. QF-Test will record the same component as above. 

genericClasses:
- TabPanel: role=tab-container
- Panel:TabPanelContent: role=tab-content
- Item:TabPanelItem:
tag: li
ancestor: TabPanel
ignoreTags:
- <DIV>
- <SPAN>
- <UL>
Example 50.32:  HTML tab panel variant 2
TopTable of contentsPrevious Chapter: 50.1.7 'CustomWebResolver' – Combo boxesNext Page: 50.1.9 Example for "CarConfigurator Web" demoNext Chapter: 50.1.9 Example for "CarConfigurator Web" demoChapter Overview: 50.1 Improving component recognition with a CustomWebResolverPDF versionLast update: 9/10/2024
Copyright © 1999-2024 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
PARAMETRER
REFUSER
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