Manual
 

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

We use "Matomo" cookies to anonymously evaluate your visit to our website. For this we need your consent, which is valid for twelve months. A revocation, so-called opt-out, is possible at any time on our privacy page.

ACCEPT
CONFIGURE
DECLINE
Cookie configuration

1. Functional cookies

We use functional cookies to ensure the basic functionality of the website.

2. Performance and statistic cookies

We use Matomo for analyzing and optimizing our website. Cookies permit an anonymous collection of information that help us offering you a clear and user-friendly visit of our web pages.

Confirm selection

Cookie details