Auto Complete

Type to filter suggestions. One field takes a single value, the other collects several values as removable chips.

Single value

Multiple values

Practice tasks

Type sel in the single field and assert only matching suggestions are listed.
Click a suggestion and assert the input holds that value.
In the multi field add three values and assert three chips exist.
Remove one chip with its ✕ button and assert the count drops to two.
Type something with no match and assert the No match message appears.

Sample automation code

driver.findElement(By.id("single-auto")).sendKeys("sel");
new WebDriverWait(driver, Duration.ofSeconds(5))
    .until(ExpectedConditions.visibilityOfElementLocated(By.id("single-suggestions")));
List<WebElement> options = driver.findElements(By.cssSelector("#single-suggestions li"));
Assert.assertEquals(options.size(), 1);
options.get(0).click();
Assert.assertEquals(driver.findElement(By.id("single-auto")).getAttribute("value"), "Selenium");

await page.getByTestId('single-auto').fill('sel');
await page.locator('#single-suggestions li').first().click();
await expect(page.getByTestId('single-auto')).toHaveValue('Selenium');

for (const t of ['Java', 'Playwright', 'SQL']) {
  await page.getByTestId('multi-auto').fill(t);
  await page.locator('#multi-suggestions li').first().click();
}
await expect(page.locator('#chips .chip')).toHaveCount(3);