Handling Multi-select Dropdown

.

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

test('Multi-Select Dropdown Operations - Unique Variables Suite', async ({ page }) => {

    // Navigate to the test website

    await page.goto('https://testautomationpractice.blogspot.com/');

    // ==========================================

    // 1. Locators with Unique Variable Names

    // ==========================================

    const colorDropdownElement = page.locator('#colors');

    const colorDropdownOptionsList = page.locator('#colors option');

    // ==========================================

    // 2. Initial State & Attribute Assertions

    // ==========================================

    // Verify dropdown visibility and enabled state

    await expect(colorDropdownElement).toBeVisible();

    await expect(colorDropdownElement).toBeEnabled();

    // Verify that it is indeed a multi-select dropdown

    await expect(colorDropdownElement).toHaveAttribute('multiple');

    // Verify total number of options available

    const countOfOptions = await colorDropdownOptionsList.count();

    console.log('Total options in multi-select:', countOfOptions);

    // ==========================================

    // 3. Selection Actions (Using Unique Variables)

    // ==========================================

    // Action 1: Select multiple options using visible text labels

    await colorDropdownElement.selectOption(['Red', 'Blue', 'Yellow']);

    // Assertion: Verify selected values

    await expect(colorDropdownElement).toHaveValues(['red', 'blue', 'yellow']);

    // Action 2: Select options using value attributes

    await colorDropdownElement.selectOption([

        { value: 'green' },

        { value: 'white' }

    ]);

    // Action 3: Select options using zero-based index positions

    await colorDropdownElement.selectOption([

        { index: 0 },

        { index: 2 }

    ]);

    // ==========================================

    // 4. Verifying Selected Options & State

    // ==========================================

    // Select specific options for checking

    await colorDropdownElement.selectOption(['Red', 'Green']);

    // Locator specifically for currently checked/selected options

    const checkedOptionsLocator = colorDropdownElement.locator('option:checked');

    await expect(checkedOptionsLocator).toHaveCount(2);

    // Retrieve text of all currently selected options into a unique variable

    const selectedOptionTexts = await checkedOptionsLocator.allTextContents();

    console.log('Currently selected colors:', selectedOptionTexts);

    // ==========================================

    // 5. Deselection & Clearing Selections

    // ==========================================

    // Keep only 'Red' and deselect others

    await colorDropdownElement.selectOption(['Red']);

    await expect(colorDropdownElement).toHaveValues(['red']);

    // Clear ALL selections completely by passing an empty array

    await colorDropdownElement.selectOption([]);

    // Assertion: Verify that no options are selected now

    await expect(colorDropdownElement).toHaveValues([]);

    // ==========================================

    // 6. Iterating Through All Options Dynamically

    // ==========================================

    // Fetch texts of all options into a unique variable

    const listOfAllOptionTexts = await colorDropdownOptionsList.allTextContents();

    console.log('All available multi-select options:', listOfAllOptionTexts);

    // Collect all values in a unique array variable

    const extractedValuesArray = [];

    for (let index = 0; index < countOfOptions; index++) {

        const singleOptionValue = await colorDropdownOptionsList.nth(index).getAttribute('value');

        if (singleOptionValue) {

            extractedValuesArray.push(singleOptionValue);

        }

    }

   

    // Select all gathered values at once

    await colorDropdownElement.selectOption(extractedValuesArray);

    console.log('All options selected dynamically!');

    // Clean up / Clear selection at the end of the test

    await colorDropdownElement.selectOption([]);

    console.log('Multi-Select Dropdown tests completed successfully with unique variables!');

});