Manual

45.1.9
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.

Class Required components and sub items
TabPanel Represents the TabPanel component, contains all tabs.
Item:TabPanelItem Represents 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 45.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 45.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