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 46.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 46.5: HTML TabPanel | |
|
|
|
installCustomWebResolver |
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 |
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
|
|
|
|