Handling Single Select Drodpwn

.

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

test('Single Select Dropdown Operations - Complete Test Suite', async ({ page }) => {

    // Navigate to the practice website

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

    // Locators for single select dropdown and its options

    const countryDropdown = page.locator('#country');

    const dropdownOptions = page.locator('#country option');

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

    // 1. Initial State & Visibility Assertions

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

    // Verify dropdown is visible and enabled

    await expect(countryDropdown).toBeVisible();

    await expect(countryDropdown).toBeEnabled();

    // Verify it is NOT a multi-select dropdown

    await expect(countryDropdown).not.toHaveAttribute('multiple');

    // Verify total number of options in the dropdown

    await expect(dropdownOptions).toHaveCount(10); // Adjust count based on the page

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

    // 2. Selection Actions (Three Ways to Select)

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

    // Action 1: Select option by Visible Text (Label)

    await countryDropdown.selectOption({ label: 'India' });

    // Assertion: Verify selected value

    await expect(countryDropdown).toHaveValue('india');

    // Action 2: Select option by Value attribute

    await countryDropdown.selectOption({ value: 'uk' });

    // Assertion: Verify selected value

    await expect(countryDropdown).toHaveValue('uk');

    // Action 3: Select option by Index (0-based positioning)

    await countryDropdown.selectOption({ index: 3 }); // Selects the 4th option

    // Capture currently selected value and text

    const selectedValue = await countryDropdown.inputValue();

    console.log('Selected Value:', selectedValue);

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

    // 3. Verifying Specific Option Text & Presence

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

    // Fetch all option texts from the dropdown

    const allOptionsText = await dropdownOptions.allTextContents();

    console.log('All available options:', allOptionsText);

    // Verify that a specific option exists in the dropdown

    let isCanadaPresent = false;

    for (const optionText of allOptionsText) {

        if (optionText.trim() === 'Canada') {

            isCanadaPresent = true;

            break;

        }

    }

    expect(isCanadaPresent).toBeTruthy();

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

    // 4. Keyboard Navigation & Accessibility

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

    // Focus on the dropdown

    await countryDropdown.focus();

    await expect(countryDropdown).toBeFocused();

    // Navigate through options using Keyboard Arrow Keys

    await page.keyboard.press('ArrowDown');

    await page.keyboard.press('ArrowDown');

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

    // 5. Disabled State Assertions (Edge Case)

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

    const disabledDropdown = page.locator('#disabled-dropdown');

    if (await disabledDropdown.count() > 0) {

        await expect(disabledDropdown).toBeDisabled();

    }

    console.log('Single Select Dropdown tests completed successfully!');

});