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