Skip to main content

UI ELEMENTS

Dropdowns & Autocomplete

Native selects, a custom JS-rendered dropdown, a multi-select list, and an autocomplete field: four different ways to pick a value.

How to use this page

Goal: Open each dropdown, select a value, and confirm it's reflected in the trigger and in the underlying state.

Challenge: The custom dropdown doesn't use a native select, so keyboard navigation and option locators need a different strategy than the native one.

Native Select

A standard HTML select element.

Custom Dropdown

A JS-rendered dropdown built from a button and a list, not a native select.

Multi-select

Select multiple options and remove them individually as chips.

Autocomplete

Type to filter a list of suggestions, then pick one with a click or the keyboard.

Need expert QA help? We offer team training, automation consulting, and end-to-end QA services.

Talk to us

Need this tested professionally?

Testing dropdown-heavy forms on a production product? AssertQA delivers test automation services, manual testing services, and API testing services for teams that need real-world quality.

Talk to our QA team