Manual
 

TopTable of contentsPrevious Chapter: 48.1.8 Mapping of ComboboxesNext Page: 48.1.10 Example for WebCarConfiguratorNext Chapter: 48.1.10 Example for WebCarConfiguratorChapter Overview: 48.1 Improving component recognition with a CustomWebResolverPDF versionQF-Test
Version 6.0.4
Mapping of TabPanels and Accordions

In order to resolve TabPanels or Accordions correctly, it is necessary to map the component containing all entries i.e the TabPanel itself as well as the components which represent the individual TabPanel entries.

ClassRequired components and sub items
TabPanelRepresents the TabPanel 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 48.5:  Mapping of TabPanels

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

Sample:

The following HTML code represents a TabPanel. As with many implementations of web pages there are a lot of additional levels, completely irrelevant for the functionality of the tabs. Some of the levels have attributes which could be used for the mapping. For all TabPanel elements even reduntantly. Therefore, we will show you below two differents ways of how to configure the call to the procedure installCustomWebResolver, 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>Dies ist das erste TabPanel</label>
          </div>
        </div>
        <div class="content">
          <div role="tab-content" id="Tab2">
            <label>Dies ist das zweite TabPanel</label>
          </div>
        </div>
        <div class="content">
          <div role="tab-content" id="Tab3">
            <label>Dies ist das dritte TabPanel</label>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
Example 48.5:  HTML TabPanel

 
 
installCustomWebResolver
Map a TabPanel - Version 1.
Parameters
resolver custom
version
genericClasses tabs=TabPanel,
content=Panel:TabPanelContent  

attributesToGenericClasses type=tab=Item:TabPanelItem
tagsToGenericClasses
ignoreTags DIV,SPAN,UL,LI
 
 

The second procedure call is parameterized differently. QF-Test will record the same component as above.

 
 
installCustomWebResolver
Map a TabPanel - Version 2.
Parameters
resolver custom
version
genericClasses
attributesToGenericClasses role=tab-container=TabPanel,
role=tab-content=Panel:TabPanelContent  

tagsToGenericClasses LI=Item:TabPanelItem@::ancestor=TabPanel

ignoreTags DIV,SPAN,UL
 
 
TopTable of contentsPrevious Chapter: 48.1.8 Mapping of ComboboxesNext Page: 48.1.10 Example for WebCarConfiguratorNext Chapter: 48.1.10 Example for WebCarConfiguratorChapter Overview: 48.1 Improving component recognition with a CustomWebResolverPDF versionLast update: 11/29/2022
Copyright © 1999-2022 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
configuration
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