Manuel
 

TopTable of contentsPrevious Chapter: 49.1.6 'CustomWebResolver' – ListsNext Page: 49.1.8 'CustomWebResolver' – TabPanel and AccordionNext Chapter: 49.1.8 'CustomWebResolver' – TabPanel and AccordionChapter Overview: 49.1 Improving component recognition with a CustomWebResolverPDF versionQF-Test
Version 7.0.5
'CustomWebResolver' – Combo boxes

Combo boxes mostly consist of text fields or buttons. If the user clicks that component, a list of items is shown. The user can then select an item. To resolve a combo box correctly, you need to map the combo box with the text field and the components for the list and its items.

HTML SELECT nodes will be mapped to combo boxes automatically. The selection of the list item will be recorded as a 'Selection' node.

ClassRequired components and sub-items
ComboBoxContainer component which contains a text field and the button.
List:ComboBoxListRepresents the List component, contains all list entries.
Item:ComboBoxListItemRepresents the individual list entry.
 Optional sub-items
Button:ComboBoxButton(Optional) Represents the button opening the selection list.
TextField:ComboBoxTextField(Optional) Represents the text field receiving text input and showing the selected item.
CheckBox:ComboBoxListItemCheckBox(Optional) Represents a checkbox inside the list entry.
Icon:ComboBoxListItemIcon(Optional) Represents an icon inside the list entry.
Table 49.5:  Mapping of ComboBoxes

It is sufficient to use the standard mappings for list items for the selection list. See subsection 49.1.6.

Sample:

HTML code for a combo box: 

<div class="combobox-wrapper">
  <div role="combobox" aria-expanded="true" aria-owns="ex1-listbox" aria-haspopup="listbox" id="ex1-combobox">
    <input type="text" aria-autocomplete="list" aria-controls="ex1-listbox" id="ex1-input" aria-activedescendant="">
  </div>
  <ul aria-labelledby="ex1-label" role="listbox" id="ex1-listbox" class="listbox">
    <li class="result" role="option" id="result-item-0">Leek</li>
    <li class="result" role="option" id="result-item-1">Lemon</li>
  </ul>
</div>
Example 49.21:  HTML combo box

A ComboBox consists of a container element showing the current selection and a list of the selectable items. In the example the DIV object contains the list plus the ComboBox itself. Often the list is defined somewhere completely different in the DOM. You can find it by opening the list and checking the developer tool of the browser. Alternatively, you can get the CSS classes of the list object and the list entries by recording a click to a list item and checking the qfs:class entry of the 'Extra features' table of the recorded components. 

genericClasses:
- List:ComboBoxList: listbox
- Item:ComboBoxListItem:
    class: result
    ancestor: List:ComboBoxList
- ComboBox: role=combobox
Example 49.22:  HTML combo box

With this ComboBox we have several options for the mapping. When you have contact to the developers of the application it is best to ask them which attributes define a certain component class. If not, you have to decide which attributes best represent a certain class. You should check this with other GUI elements of the same type. Also, you should check similar GUI elements for the same attributes. In this case maybe there is another, hopefully unique, attribute, or you need to make it more specific by adding ancestor:...

In the example above, role=combobox should be precise enough for the ComboBox itself, just as role=listbox or alternatively css: listbox for the list. It probably will not make a big difference which one you choose. If normal lists use the same attribute you can omit the class type, i.e. you would just map List: listbox and Item:ListItem:. This does not affect the functionality the combo box within QF-Test.

However, css: result and role=option, used for the list items, could very well be used with other elements, too. Therefore, we will add ancestor: List:ComboBoxList to be sure.

TopTable of contentsPrevious Chapter: 49.1.6 'CustomWebResolver' – ListsNext Page: 49.1.8 'CustomWebResolver' – TabPanel and AccordionNext Chapter: 49.1.8 'CustomWebResolver' – TabPanel and AccordionChapter Overview: 49.1 Improving component recognition with a CustomWebResolverPDF versionLast update: 9/19/2023
Copyright © 1999-2023 Quality First Software GmbH

Nous utilisons des cookies "Matomo" pour l'évaluation anonyme de votre visite à note page web. Pour cela nous avons besoin de votre consentement qui est valable pour douze mois. La révocation est possbile n'importe quand sur notre page "Protection de données".

accepter
configuration
Configuration de cookies

1. Cookies fonctionnels

Nous utilisons des cookies fonctionnels pour garantir la fonctionnalité de base du site web.

2. Cookies de performance et de statistique

Nous utilisons Matomo pour analyser et améliorer notre site web. Des cookies permettent une collection anonyme des informations qui nous aident à vous offrir un visite clair et facile à utiliser de nos pages web.

Confirmer la sélection

Cookie details