Test Cases for Dropdown: Select, Search, and Multi Select

A country selector that displays “India” but submits the identifier for Indonesia is not a cosmetic defect. Dropdowns translate a human choice into an application value, often while filtering, loading data, or enforcing dependencies. The label can look correct even when the saved value, accessible state, or downstream request is wrong.

Test the control as a mapping between visible options, internal values, interaction state, and persisted data. The cases differ significantly for a native select, a custom listbox, an autocomplete, and a multi-select, so classify the component before applying a checklist.

Identify the Control and Its Data Contract

Record whether the user may select one value, several values, or create a new value. Note the option source, sort rule, default, placeholder, required state, disabled options, maximum selections, and behavior when the saved option no longer exists.

Inspect the submitted value. A display label may be translated or renamed while its stable ID remains unchanged. Verify the backend expects that ID and rejects values that were never offered or are no longer permitted.

Verify Defaults, Options, and Ordering

Load the form with no saved value, a valid saved value, a disabled saved value, and an unknown legacy value. A placeholder should describe the required action but must not pass required validation. If a business default is applied, it should be visible and submitted consistently rather than appearing only in the payload.

Compare the option set with its source. Confirm no missing, duplicate, unauthorized, or stale entries. Test labels with accents, long text, identical prefixes, right-to-left text, and characters such as & that may be encoded incorrectly. Each visible option should map to one unique value.

Check alphabetical, ranked, grouped, or server-defined ordering with ties. If a selected option is pinned to the top, verify the rule after reopening and after the data refreshes. Disabled options should remain discoverable only if the design needs to explain them, and they must never be selectable by keyboard, pointer, or crafted request.

Exercise Open, Select, Replace, and Cancel

Open the control from its label, field, arrow, keyboard, and touch target where supported. Confirm the list appears in the expected position, is not clipped by a modal or scrolling container, and shows the current selection. Repeated opening should not register duplicate event handlers or move the page unexpectedly.

Where enhanced behavior falls back to a native select on mobile or without JavaScript, compare the available values and submitted result with the custom version. Progressive enhancement must not introduce a different default, omit disabled choices, or leave two focusable controls representing one field.

Select the first, middle, and last options. Verify the displayed label, selected state, hidden or form value, dependent fields, and submitted request. Reopen and replace the choice. Then dismiss with Escape, outside click, browser back on mobile, and loss of focus. The committed value should change only under the documented policy.

Test a rapid double selection and selection while options are refreshing. The control must not display one option while saving another. If selection triggers a slow dependency, show progress without making the chosen value disappear.

Test Search and Asynchronous Loading

For searchable dropdowns, enter an exact label, prefix, middle substring if supported, different case, leading and trailing spaces, accented text, no-match query, and a query at the maximum length. Define whether matching is case-sensitive and whether the search uses labels, aliases, or codes.

Type quickly enough to produce overlapping requests. A slower response for an older query must not replace newer results. Clear the query, close during loading, and reopen. Verify cancellation or stale-response handling and confirm the selected value does not vanish when its option is outside the current result page.

Simulate an empty source, timeout, unauthorized response, malformed option, and next-page failure. Loading, empty, and error states need distinct messages and retry behavior. Infinite scroll must not duplicate options or skip the boundary item. Search text should be preserved or cleared according to a deliberate rule after selection.

Large option sets often use virtualization, which means only visible rows exist in the document. Scroll rapidly through thousands of entries, jump with keyboard navigation, resize the popup, and return to the selected item. The active option must remain connected to its accessible representation even when rows are recycled. Search result counts and “no results” messages should represent the full data source, not only the loaded window. If the source changes during pagination, the client needs a cursor or stable ordering rule that prevents options from shifting between pages.

Cover Multi-Select Set Behavior

Select one value, several values, all available values if allowed, and the maximum count. Try one more than the limit. Remove the first, middle, and last chips, use backspace from an empty search field, and clear all. The submitted values should be unique and should follow the product's ordering rule.

If selected options disappear from the menu, confirm they return after removal. If they remain visible, they should be marked selected and should not create duplicates. Test “select all” with filtering: establish whether it selects all options, all loaded options, or only current results, then make the label and count match that scope.

Long selections should wrap or summarize without covering the label, validation message, or clear control. Reopen after save and verify the full set, not only the first visible chip. For dependent multi-selects, changing the parent should identify and remove invalid children rather than silently submitting them.

Validate Required, Dependent, and Changing Values

Submit an untouched required dropdown, a placeholder, a cleared value, and a value removed from the source after page load. Associate the validation message with the control and move focus according to the form's established behavior. Correcting the value should clear the error without erasing other inputs.

For cascading controls such as country, state, and city, change each parent after selecting a child. The child list should reload, stale values should clear, and loading should prevent an invalid combination from being submitted. Restore an earlier parent and confirm whether the previous child is intentionally remembered or reset.

Attempt to submit unauthorized and nonexistent IDs directly. Server validation must not trust the option list rendered by the client. When an administrator disables an option during editing, the save response should explain the conflict and keep the rest of the form recoverable.

Prove Keyboard and Screen-Reader Semantics

Use Tab to reach the control, then operate it without a pointer. Confirm the documented keys open it, arrow keys move the active option, Enter or Space selects, Escape closes, and Home or End works where the component pattern requires it. Type-ahead should not conflict with page shortcuts.

For custom controls, inspect the accessible name, role, expanded state, active descendant, selected state, and multi-select declaration. A screen reader should announce option count and selection changes without reading the entire list after every keystroke. Focus must return to the trigger after closing and remain visible at high zoom.

Test high contrast, 200 percent zoom, large text, and right-to-left layout. Color cannot be the only distinction for selected or disabled options. Chips need meaningful remove buttons, and validation must not be hidden behind the expanded popup.

Check label activation, help text, required state, and error announcement together. A custom trigger that looks like an input must not expose contradictory roles or leave screen-reader focus on a hidden search field after closing. When the popup is rendered in a portal, reading and focus order should still make the relationship to the labelled field clear.

Automate Stable User Contracts

Automate by role, label, and option name, not by generated classes or list positions. Assert the selected option and submitted value. For asynchronous controls, intercept or seed the data source so empty, delayed, error, and multi-page states are deterministic.

Keep visual exploration for clipping, touch behavior, long translations, and complex chip wrapping. A focused regression suite should cover default state, one replacement, keyboard selection, required validation, stale asynchronous results, unauthorized submitted value, and a multi-select limit if present.

Use one saved-record trace as the final oracle. Select a human-readable option, capture its submitted ID, inspect the persisted value through a second page or API, and reload the editor. That trace proves the label-to-value mapping survived every boundary and catches the dropdown defect that a screenshot cannot reveal.