DropDown

The DropDown class provides a clean interface for interacting with generic container elements such as <select> blocks. It includes methods for selection, assertions, and scrolling into view.

Usage : dropdown

🧩 Code

The Dropdown class is designed to interact with common drop-down element

To insert a code block with syntax highlighting:

Cypress

import { oi } from "@ordino.ai/spartify-engine";

oi.ui.dropdown(this.ddl_element).click()

Playwright

Methods

openDropdown(): void Opens the dropdown.

• @returns void

Cypress

oi.ui.dropdown(this.element).openDropdown()

Playwright

closeDropdown(): void Closes the dropdown..

• @returns void

Cypress

oi.ui.dropdown(this.element).closeDropdown()

Playwright

selectByIndex(index: number, forceSelect:boolean): void Selects an option by its index.

• @param {index} – The index of the option to select.

• @param {force} – true (optional)

• @returns void

Cypress

oi.ui.dropdown(this.element).selectByIndex(1,true)

Playwright

selectByText(text: string, forceSelect:boolean): void Selects an option by its text.

• @param {index} – The index of the option to select.

• @param {force} – true (optional)

• @returns void

Cypress

oi.ui.dropdown(this.element).selectByText('text',true)

Playwright

selectByValue(value: string , forceSelect:boolean): void Selects an option by its value.

• @param {value} – The value of the option to select.

• @param {force} – true (optional)

• @returns void

Cypress

oi.ui.dropdown(this.element).selectByValue('text',true)

Playwright

filterByText(text: string , forceSelect:boolean): void Filters options by text.

• @param {text} – The text to filter options by.

• @param {force} – true (optional)

• @returns void

Cypress

oi.ui.dropdown(this.element).filterByText('text')

Playwright

filterByValue(value: string): void Filters options by value.

• @param {value} – The value to filter options by

• @returns void

Cypress

oi.ui.dropdown(this.element).filterByValue('test')

Playwright

filterByPartialText(partialText: string): void Filters options by partial text.

• @param {text} – The partial text to filter options by.

• @returns void

Cypress

oi.ui.dropdown(this.element).filterByPartialText('test')

Playwright

clearSelection(): void Clears the current selection in the dropdown.

• @returns void

Cypress

oi.ui.dropdown(this.element).clearSelection()

Playwright

selectRandomOption(): void Selects a random option from the dropdown.

• @returns void

Cypress

oi.ui.dropdown(this.element).selectRandomOption()

Playwright

clickOptionByText(text: string, forceSelect:boolean): void Clicks an option by its text.

• @param {text} – The text to filter options by.

• @param {force} – true (optional)

• @returns void

Cypress

oi.ui.dropdown(this.element).clickOptionByText('text',true)

Playwright

Assertions

assertSelectedText(text: string): void Clicks an option by its text.

• @param {text} – The partial text to filter options by.

• @returns void

Cypress

oi.ui.dropdown(this.element).assertSelectedText('text')

Playwright

assertSelectedValue(value: string): void The value to assert against the selected option’s value.

• @param {value} – The value to filter options by.

• @returns void

Cypress

oi.ui.dropdown(this.element).assertSelectedValue('text')

Playwright

assertContainsOption(value: string): void Asserts that the dropdown contains an option with the given value.

• @param {option} – The value of the option to check for

• @returns void

Cypress

oi.ui.dropdown(this.element).assertContainsOption('text')

Playwright

assertNotContainsOption(value: string): void Asserts that the dropdown does not contain an option with the given value.

• @param {text} – The partial text to filter options by.

• @returns void

Cypress

oi.ui.dropdown(this.element).filterByPartialText('test')

Playwright

assertNotContainsOption(value: string): void Asserts that the dropdown does not contain an option with the given value.

• @param {text} – The value of the option to check for.

• @returns void

Cypress

oi.ui.dropdown(this.element).assertNotContainsOption('text')

Playwright

assertIsDisabled(): void Asserts that the dropdown is disabled.

• @returns void

Cypress

oi.ui.dropdown(this.element).assertIsDisabled()

Playwright

assertIsEnabled(): void Asserts that the dropdown is enabled.

• @returns void

Cypress

oi.ui.dropdown(this.element).assertIsEnabled()

Playwright

assertOptionCount(count: number): void Asserts that the number of options in the dropdown matches the given count

• @param {count} – The expected number of options.

• @returns void

Cypress

oi.ui.dropdown(this.element).assertOptionCount(3)

Playwright

assertSelectedByIndex(index: number): void Asserts that the selected option’s index matches the given index.

• @param {index} – The index to assert against the selected option’s index.

• @returns void

Cypress

oi.ui.dropdown(this.element).assertSelectedByIndex(1)

Playwright

assertIsVisible(): void Asserts that the dropdown is visible.

• @returns void

Cypress

oi.ui.dropdown(this.element).assertIsVisible()

Playwright

assertPlaceholder(text: string): void Asserts that the placeholder text matches the given text.

• @param {text} – The placeholder to assert

• @returns void

Cypress

oi.ui.dropdown(this.element).assertPlaceholder('text')

Playwright

Scrolling

scrollToOption(value: string): void; Scrolls to an option with the given value.

• @param {value} – The value of the option to scroll to.

• @returns void

Cypress

oi.ui.dropdown(this.element).scrollToOption('text')

Playwright

Custom Events

Ordino allows you to build custom actions or user journeys by directly interacting with the underlying tool’s native methods and actions.

This approach gives you full control, bypassing Ordino’s abstraction layer, and ensures you can leverage tool-specific capabilities as needed.

• locator → The element locator (e.g., XPath, CSS selector, or tool-specific reference).

• Returns → A tool element object on which you can invoke native actions (e.g., .click(), .type()).

// Generic pattern
element(locator): object

_{Ordino Custom Mode}

Using Ordino’s direct tool method reference:

// Ordino direct-to-tool approach
oi.ui.element('@xpath').click()

Here, Ordino will call the Cypress (or other tool) element object directly, rather than going through Ordino’s wrapper.

Building User Journeys

By chaining multiple oi.ui.element() calls, you can construct full user journeys while still working with native tool methods.

Example: Login Flow

// Enter username
oi.ui.element('//input[@id="username"]').type('testuser')

// Enter password
oi.ui.element('//input[@id="password"]').type('secret')

// Click login button
oi.ui.element('(//*[contains(text(),"Login")])[1]').click()

---

Key Notes

• Use this mode when you need maximum control over the test framework.

• This does not abstract or transform the call – it executes directly on the tool object (e.g., Cypress, Playwright, etc.).

• Perfect for custom journeys, advanced locators, or tool-specific actions not exposed by Ordino’s higher-level API.