Form practice · Custom dropdowns

Custom dropdown practice

Three custom-built dropdowns — not native <select> elements. Each opens on click of a .select-trigger, shows options in a floating panel, and writes the chosen value back into the trigger. Build a reusable Playwright helper that handles all three before peeking at the solution.

What students should practise

Click the .select-trigger matching a placeholder, then click an option by visible text.
Write a reusable helper: selectValue(page, label, value).
Assert the trigger's visible text equals the chosen value after selection.
Confirm only one option is marked .is-selected per dropdown.

Playwright solution Helper-based pattern — reusable across all three dropdowns. Show solution

import { Browser, chromium, Page, expect } from '@playwright/test';

(async () => {
  const browser: Browser = await chromium.launch({ headless: false, channel: 'chrome' });
  const page: Page = await browser.newPage();
  await page.goto('/playwright/tables/dropdowns.html');

  await selectValue(page, 'Choose your preferred programming language', 'Java');
  await selectValue(page, 'Choose your preferred web framework', 'Angular');
  await selectValue(page, 'Select your experience level', 'Mid-level (4-6 years)');
})();

async function selectValue(page: Page, dropDownLabel: string, value: string): Promise<void> {
  await page.locator(`//button[contains(@class,'select-trigger')]//span[text()='${dropDownLabel}']`).click();
  await page.getByText(value, { exact: true }).click();
}