Working with Bootstrap dropdown in playwright

 Bootstrap dropdown, which is not a native <select> element. That means Playwright can’t use selectOption() — you have to interact with it like any regular HTML element (usually buttons, ul, li, etc.).

In this example we will learn how to test a Bootstrap dropdown using Playwright, a powerful automation library for browser testing.

✅ Syntax

// Click to open the dropdown
await page.click('#dropdownMenuButton');

// Click the desired dropdown item by text or index
await page.click('text=Option 2');

Understanding Bootstrap dropdown in playwright

Below is an example code snippet demonstrating how to interact with a Bootstrap dropdown using Playwright:

// @ts-check
import { test, expect } from '@playwright/test';

test('Handle bootstrap dropdown', async ({page}) => {
 
  await page.goto("https://www.jquery-az.com/boots/demo.php?ex=63.0_2");

  // Click on the multiselect dropdown to open it
  await page.locator(".multiselect").click();

  // Locate all options within the dropdown
  const options = await page.locator("ul>li label input");

  // Assert that there are 11 options available
  await expect(options).toHaveCount(11);

  // Select multiple options from the dropdown
  await options.nth(0).click(); // Select the first option
  await options.nth(2).click(); // Select the third option
  
});

Testing Bootstrap dropdowns with Playwright is straightforward and efficient. By following this guide, you can implement and validate multi-select functionalities in your web applications effectively.