Form practice · Combobox variants

Select box variants practice

Five custom-built combobox variants — single, multi, creatable, grouped, and async. DOM classes intentionally mirror the popular react-select conventions (tta-rs__control, tta-rs__menu, tta-rs__option) so your locators transfer to real production widgets.

① Single — searchable

Type to filter

Click to open. Type to filter the list. Click an option to set a single value.

Pick a Playwright runner…

id=rs-single data-testid=rs-single · rs-single-input · rs-single-menu class=tta-rs__control · tta-rs__option

② Multi — chips with remove

Multiple values

Pick multiple options. Each becomes a removable chip with its own X button.

Pick automation tools…

data-testid=rs-multi · rs-multi-input chip=tta-rs__multi-value remove=tta-rs__multi-value__remove

③ Creatable multi — type and Enter

Add new options

Type a tag that doesn't exist, press Enter, and a new chip is created on the fly.

Add skill tags…

data-testid=rs-creatable · rs-creatable-input create=press Enter

④ Grouped — categorised options

Groups

Options are split into labelled groups. Practise reaching an option inside a specific group heading.

Pick a deployment target…

data-testid=rs-grouped group=tta-rs__group · data-group=Cloud / Edge / Self-hosted

⑤ Async — fetched on type

600ms latency

Type a city name. Results load after a simulated 600ms network call. Practise page.waitForResponse patterns or just await a visible option.

Type to search cities…

data-testid=rs-async · rs-async-input · rs-async-menu state=loading / no-results / results

No selection yet — interact with the variants above.

What students should practise

Click .tta-rs__control to open, then click .tta-rs__option by visible text.
Type into .tta-rs__input-container input to filter options.
Multi: remove a chip via its .tta-rs__multi-value__remove button.
Creatable: type a brand-new value and press Enter; assert the chip appears.
Grouped: scope a query under a specific .tta-rs__group[data-group="Edge"].
Async: wait for the loading notice to disappear, then click the result.

Playwright solutions One snippet per variant. Show solution

// 1) Single, searchable
await page.getByTestId('rs-single').click();
await page.getByTestId('rs-single-input').fill('play');
await page.getByRole('option', { name: 'Playwright' }).click();
await expect(page.locator('#rs-single .tta-rs__single-value')).toHaveText('Playwright');

// 2) Multi — pick three, remove one
const multi = page.getByTestId('rs-multi');
for (const name of ['Playwright', 'Pytest', 'TestNG']) {
  await multi.click();
  await page.getByRole('option', { name }).click();
}
await multi.locator('.tta-rs__multi-value:has-text("Pytest") .tta-rs__multi-value__remove').click();

// 3) Creatable — type a brand-new tag and press Enter
await page.getByTestId('rs-creatable-input').fill('chaos-engineering');
await page.getByTestId('rs-creatable-input').press('Enter');
await expect(page.locator('#rs-creatable .tta-rs__multi-value', { hasText: 'chaos-engineering' })).toBeVisible();

// 4) Grouped — pick from a specific group
await page.getByTestId('rs-grouped').click();
await page
  .locator('.tta-rs__group[data-group="Edge"]')
  .getByRole('option', { name: 'Vercel Edge' })
  .click();

// 5) Async — wait for results
await page.getByTestId('rs-async-input').fill('pun');
await expect(page.getByTestId('rs-async-menu')).toContainText('Pune');
await page.getByRole('option', { name: 'Pune' }).click();