TESTHEON Practice Lab

Component Lab A · Selection

Dropdown Components

Compare native selects with searchable and ARIA listboxes, then automate dependent and paged options loaded from the isolated Practice API.

Start the fixtureRead the API testing guide

PRACTICE FIXTURE — intentionally built for automation practice

Native, multi-select, and grouped options

Native controls give Playwright reliable value and selected-option assertions.

No environment selected.

Nothing selected.

No grouped option selected.

Searchable dropdown

Typing filters a static list while selection updates a separate status region.

Type to filter disciplines.

Custom ARIA combobox/listbox

This non-native widget exposes combobox state, active descendant, options, and keyboard selection.

Use Arrow keys and Enter.

Country → State → City from API

The fixture reads synthetic customer cities from Chunk 3, then enables only valid dependent choices.

API locations not loaded.

Options added after a controlled delay

A 400 ms deterministic delay adds three options and enables the native select.

Options not loaded.

Infinite-scroll dropdown from paged API

The list requests 15 products at a time and loads up to four pages when its scroll boundary is reached.

Product dropdown is closed.

Passing examples

Start with observable behavior

These snippets match executable tests stored inexamples/playwright-ts/.

Native select
await page.getByLabel('Test environment').selectOption('staging');
await expect(page.getByRole('status')).toContainText('staging selected');
ARIA combobox keyboard flow
const timezone = page.getByRole('combobox', { name: 'Timezone' });
await timezone.press('ArrowDown');
await timezone.press('Enter');
await expect(timezone).toHaveValue('Asia/Kolkata');
Dependent API options
await page.getByRole('button', { name: 'Load API locations' }).click();
await page.getByLabel('Country').selectOption('India');
await page.getByLabel('State').selectOption('Maharashtra');
await page.getByLabel('City').selectOption('Mumbai');