Handbuch
 

TopInhaltsverzeichnisVorheriges Kapitel: 47.1.8 installCustomWebResolver - ComboboxNächste Seite: 47.1.10 Beispiel für den WebCarConfiguratorNächstes Kapitel: 47.1.10 Beispiel für den WebCarConfiguratorKapitel-Übersicht: 47.1 Verbesserte Komponentenerkennung mittels CustomWebResolverPDF VersionQF-Test
Version 6.0.3
installCustomWebResolver - TabPanel und Accordion

Für das Mappen von TabPanels bzw. Accordions ist es wiederum notwendig sowohl die Hauptkomponente selbst, diejenige, die alle Einträge enthält, wie auch die einzelnen Elemente zu mappen.

KlasseNotwendige Komponenten / Unterelemente
TabPanelStellt das TabPanel dar, beinhaltet die Einträge.
Item:TabPanelItemStellt einen Tab dar.
 Optionale Unterelemente
Panel:TabPanelContent(Optional) Stellt ein Panel dar, das den Inhalt des angezeigten Tabs enthält.
Closer:TabPanelCloser(Optional) Stellt einen Closer Button innerhalb des Tabs dar.
CheckBox:TabPanelCheckBox(Optional) Stellt eine CheckBox unter einem Listeneintrag dar.
Icon:TabPanelIcon(Optional) Stellt ein Icon unter einem Listeneintrag dar.
Tabelle 47.5:  Mapping von TabPanels

Im Falle von Accordions lauten die Klassen entsprechend Accordion, Item:AccordionItem etc.

Beispiel:

Der folgende HTML Code bildet ein TabPanel ab. Wie man auch in vielen Implementierungen von Webseiten findet, sind etliche zusätzliche Ebenen eingezogen, die für die Funktionalität der Tabs völlig irrelevant sind. Einige der Ebenen haben Merkmale, die man für die Zuweisung nutzen kann, für alle TabPanel-Elemente sogar redundant. Sie finden im Anschluss daher zwei Aufrufe der Prozedur installCustomWebResolver, die völlig unterschiedlich parametrisiert sind, für die Komponentenaufnahme bei QF-Test jedoch das gleiche Ergebnis liefern. 

<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>
Beispiel 47.5:  HTML TabPanel

 
 
installCustomWebResolver
Zuweisungen für TabPanels - Variante 1.
Parameter
resolver custom
version
genericClasses tabs=TabPanel,
content=Panel:TabPanelContent  

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

Der zweite Aufruf ist zwar anders parametrisiert, bewirkt aber die gleiche Komponentenaufnahme seitens QF-Test:

 
 
installCustomWebResolver
Zuweisungen für TabPanels - Variante 2.
Parameter
resolver custom
version
genericClasses
attributesToGenericClasses role=tab-container=TabPanel,
role=tab-content=Panel:TabPanelContent  

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

ignoreTags DIV,SPAN,UL
 
 
TopInhaltsverzeichnisVorheriges Kapitel: 47.1.8 installCustomWebResolver - ComboboxNächste Seite: 47.1.10 Beispiel für den WebCarConfiguratorNächstes Kapitel: 47.1.10 Beispiel für den WebCarConfiguratorKapitel-Übersicht: 47.1 Verbesserte Komponentenerkennung mittels CustomWebResolverPDF VersionLetzte Änderung: 6.9.2022
Copyright © 1999-2022 Quality First Software GmbH

Wir verwenden Cookies zur anonymisierten Auswertung Ihres Besuchs auf unserer Webseite durch »Matomo«. Dafür benötigen wir Ihr Einverständnis, welches für zwölf Monate gilt. Ein Widerruf bzw. Opt-out ist jederzeit auf unser Datenschutz-Seite möglich.

akzeptieren
konfigurieren
Cookie-Konfiguration

1. Funktionale Cookies

Wir verwenden funktionale Cookies, um die Basisfunktionalität der Webseite zu gewährleisten.

2. Performance und Statistik Cookies

Wir verwenden Matomo zur Analyse und Optimierung unserer Webseite. Cookies erlauben eine anonyme Erfassung der Informationen und helfen uns, Ihnen einen benutzerfreundlichen Besuch unserer Webseite zu bieten.

Auswahl speichern

Cookie details