Implementation:Getgauge Taiko DropDown Element
| Knowledge Sources | |
|---|---|
| Domains | Browser_Automation, Form_Interaction |
| Last Updated | 2026-02-12 03:00 GMT |
Overview
Concrete tool for interacting with HTML `<select>` dropdown elements provided by the Taiko browser automation library.
Description
The `DropDown` class extends the base `Element` class to represent `<select>` elements in the DOM. It is the most complex of the Element subclasses at 248 lines, providing comprehensive dropdown selection capabilities. The `select(values)` method supports three selection strategies: by option text or value (string), by index (via `{index: n}` or `{index: [n1, n2]}`), and by regular expression pattern matching against option text. For multi-select dropdowns (those with the `multiple` attribute), multiple values can be selected simultaneously. The method performs detailed error handling, distinguishing between disabled options, unavailable options, and invalid selections. The `value()` method retrieves all currently selected values, returning a comma-joined string for single selections or an array for multiple selections. The `options()` method returns all available option values in the dropdown. All selection operations dispatch `change` and `input` events and are wrapped in `doActionAwaitingNavigation`.
Usage
Use this class when you need to automate dropdown/select interactions such as choosing countries, selecting categories, or picking from multi-select lists. Instances of `DropDown` are not created directly by library consumers. Instead, calling the Taiko API function `dropDown()` returns an `ElementWrapper` that internally constructs `DropDown` instances via the static `DropDown.from(element, description)` factory method.
Code Reference
Source Location
- Repository: Getgauge_Taiko
- File: lib/elements/dropDown.js
- Lines: 1-248
Signature
class DropDown extends Element {
async select(values) { ... }
async value() { ... }
async options() { ... }
static from(element, description) { ... }
}
Import
// Internal class, accessed through Taiko API
const { dropDown } = require('taiko');
// Returns ElementWrapper that creates DropDown instances internally
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| values | number[]} | Yes (for `select`) | The value(s) to select. Accepts: a single string (option text or value), an array of strings (for multi-select), a RegExp to match against option text, or an object with an `index` property for index-based selection. |
| element | Element | Yes (for `from`) | Base Element instance to convert into a DropDown |
| description | string | Yes (for `from`) | Human-readable description used in event logging |
Outputs
| Name | Type | Description |
|---|---|---|
| select() | Promise<void> | Selects the specified option(s) in the dropdown. Dispatches `change` and `input` events. Throws an Error if: multiple values are provided to a single-select dropdown, an option is disabled, or the specified option is not available. |
| value() | string[]> | Returns the currently selected value(s). Returns a single comma-joined string for single selections, or an array for multiple selections. Uses `option.value` if available, otherwise falls back to `option.innerText`. |
| options() | Promise<string[]> | Returns an array of all available option values in the dropdown. |
| from() | DropDown | Static factory that constructs a new DropDown from an existing Element instance. |
Usage Examples
Basic Usage
const { openBrowser, goto, dropDown, closeBrowser } = require('taiko');
(async () => {
await openBrowser();
await goto('https://example.com/form');
// Select by visible text or value
await dropDown('Country').select('United States');
// Select by index
await dropDown('Country').select({ index: 3 });
// Select by regex pattern
await dropDown('Country').select(/United.*/);
// Multi-select (requires <select multiple>)
await dropDown('Skills').select(['JavaScript', 'Python', 'Go']);
// Get the currently selected value
const selected = await dropDown('Country').value();
console.log('Selected:', selected);
// Get all available options
const allOptions = await dropDown('Country').options();
console.log('Options:', allOptions);
await closeBrowser();
})();