Working with Multi Select dropdown in playwright

 In this example we are going to implement and test a multi-select dropdown using Playwright, a popular automation library for browser testing.

Understanding Multi-Select Dropdowns

A multi-select dropdown allows users to select more than one option from a list. This is particularly useful in scenarios such as selecting multiple hobbies, interests, or any other items where multiple selections are necessary.

✅ Syntax

 // Select multiple options from the dropdown
  await page.locator("#colors").selectOption(["white", "yellow", "blue"]);

Example for multi-select dropdown

In this example demonstrating how to interact with a multi-select dropdown using Playwright:

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

test('Handle multi select dropdown', async ({page}) => {
 
  await page.goto("https://testautomationpractice.blogspot.com/");
  
  // Select multiple options from the dropdown
  await page.locator("#colors").selectOption(["white", "yellow", "blue"]);
  
});