Version 8.0.1 |
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.
| |||||||||||||||||||||
Table 50.5: Mapping of ComboBoxes |
It is sufficient to use the standard mappings for list items for the selection list. See subsection 50.1.6.
Sample:
HTML code for a combo box:
| ||||
Example 50.28: 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.
| ||||
Example 50.29: 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.
Last update: 9/10/2024 Copyright © 1999-2024 Quality First Software GmbH |
1. Functional cookies
We use functional cookies to ensure the basic functionality of the website.
2. Performance and statistic cookies
We use Matomo for analyzing and optimizing our website. Cookies permit an anonymous collection of information that help us offering you a clear and user-friendly visit of our web pages.
This cookie contains a unique, pseudonymized visitor ID internal to Matomo for recognizing returning visitors.
This cookie is used to track from which website the anonymized user proceeded to our website.
The Matomo session cookie is used to track the visitor's page requests during the session.
is created and should be then directly deleted (used to check whether the visitor’s browser supports cookies).
short lived cookies used to temporarily store data for the visit.
short lived cookies used to temporarily store data for the visit.