Mapping of Comboboxes

Version 5.1.0

45.1.8

Comboboxes mostly consist of textfields or buttons. If the user clicks that component a list of items is shown. The user can then select an item. To resolve a combobox correctly, you need to map the combobox with the textfield and the components for the list and its items.

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

Class	Required components and sub items
ComboBox	Container component which contains a textfield and the button.
List:ComboBoxList	Represents the List component, contains all list entries.
Item:ComboBoxListItem	Represents the individual list entry.
	Optional sub items
Button:ComboBoxButton	(Optional) Represents the button opening the selection list.
TextField:ComboBoxTextField	(Optional) Represents the textfield 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 45.4: Mapping of ComboBoxes

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

Sample:

HTML code for a combobox:

<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 45.4: HTML ComboBox

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.

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 yourself which attributes best represent a certain class. You should check this with other GUI objects of the same type. Also you should check with similar GUI objects if they use 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 above example role=combobox should be precise enough for the ComboBox itself, just as role=listbox or alternatively class=listbox for the list. It probably will not make a greate difference which one you choose. If normal lists had the same attribute you could leave away the class type, i.e. you would just map listbox=List and result=Item:ListItem@::ancestor=List. It would not affect the functionality the combobox list within QF-Test.

However, class=result as well role=option, used for the list items, could very well be used with other classes, too. Therefore, we will add @::ancestor=List:ComboBoxList in any case to be sure.


`installCustomWebResolver`
Map a ComboBox.
Parameters
`resolver`	custom
`version`
`genericClasses`	listbox=List:ComboBoxList, result=Item:ComboBoxListItem@::ancestor= List:ComboBoxList
`attributesToGenericClasses`	role=combobox=ComboBox

Manual