Dropdowns & Select

Native selects, a multi-select, dependent dropdowns and – most importantly – a custom dropdown built from div elements, which is what most modern applications actually use.

Single select

Multi select

Country (dependent)

City

Custom dropdown (not a <select>)

Built from div and li elements, with a search box – Select class will not work here, you have to click.

Practice tasks

Select a role with the Select class and assert the output shows it.
Select two skills in the multi-select and assert both are listed.
Choose India and assert the city dropdown is enabled and contains Chennai.
Change the country and assert the previously selected city is cleared.
Open the custom dropdown, type play in its search box and assert only one option remains.
Pick an option from the custom dropdown and assert the toggle text changes.

Sample automation code

Select role = new Select(driver.findElement(By.id("select-role")));
role.selectByValue("sdet");

Select skills = new Select(driver.findElement(By.id("select-skills")));
skills.selectByVisibleText("Java");
skills.selectByVisibleText("Playwright");

// custom dropdown - no Select class, just clicks
driver.findElement(By.id("custom-dropdown-toggle")).click();
driver.findElement(By.id("custom-dropdown-search")).sendKeys("play");
driver.findElement(By.xpath("//ul[@id='custom-dropdown-list']/li[not(@hidden)][1]")).click();
Assert.assertEquals(driver.findElement(By.id("custom-dropdown-value")).getText(), "Playwright");

await page.getByTestId('select-role').selectOption('sdet');
await page.getByTestId('select-skills').selectOption(['java', 'playwright']);
await page.getByTestId('select-country').selectOption('India');
await expect(page.getByTestId('select-city')).toBeEnabled();

await page.getByTestId('custom-dropdown-toggle').click();
await page.getByTestId('custom-dropdown-search').fill('play');
await page.locator('#custom-dropdown-list li:visible').first().click();
await expect(page.getByTestId('custom-dropdown-value')).toHaveText('Playwright');