Handling Radio Button in PlayWright

.

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

test('Radio Button Operations - Comprehensive Test Suite', async ({ page }) => {

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

    // Locators for Radio Buttons

    const maleRadio = page.locator('#male');

    const femaleRadio = page.locator('#female');

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

    // 1. Initial State Assertions

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

    // Check visibility and enablement

    await expect(maleRadio).toBeVisible();

    await expect(maleRadio).toBeEnabled();

    // Verify initial checked state (Default state is unchecked)

    await expect(maleRadio).not.toBeChecked();

    await expect(femaleRadio).not.toBeChecked();

    // Alternative Boolean assertion for checked status

    const isMaleCheckedInitial = await maleRadio.isChecked();

    expect(isMaleCheckedInitial).toBeFalsy(); // Or toBe(false)

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

    // 2. Element Attribute & Value Assertions

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

    // Verify radio button value attribute

    await expect(maleRadio).toHaveAttribute('value', 'male');

    // Verify input type is 'radio'

    await expect(maleRadio).toHaveAttribute('type', 'radio');

    // Verify radio button name attribute (Group Name)

    await expect(maleRadio).toHaveAttribute('name', 'gender');

    await expect(femaleRadio).toHaveAttribute('name', 'gender');

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

    // 3. User Actions (Selection & Clicking)

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

    // Action 1: Select radio button using check() - Recommended

    await maleRadio.check();

    // Assertion after checking

    await expect(maleRadio).toBeChecked();

    await expect(femaleRadio).not.toBeChecked();

    // Action 2: Select another radio button in the same group

    await femaleRadio.check();

    // Assertion: Female should be checked and Male should automatically uncheck

    await expect(femaleRadio).toBeChecked();

    await expect(maleRadio).not.toBeChecked();

    // Action 3: Selection using click() method

    await maleRadio.click();

    await expect(maleRadio).toBeChecked();

    // Note: uncheck() is NOT supported on radio buttons in HTML specs.

    // To unselect a radio button, another option in the same group must be selected.

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

    // 4. Label Association & Clicking via Label

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

    // Click radio button using associated label text

    const femaleLabel = page.getByLabel('Female');

    await femaleLabel.check();

    await expect(femaleRadio).toBeChecked();

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

    // 5. Radio Group Count & Iteration

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

    // Locate all radio buttons in the gender group

    const genderRadioGroup = page.locator('input[name="gender"]');

    // Assert total count of radio buttons in the group

    await expect(genderRadioGroup).toHaveCount(2);

    // Loop through radio group and verify attributes

    const radioCount = await genderRadioGroup.count();

    for (let i = 0; i < radioCount; i++) {

        const radioOption = genderRadioGroup.nth(i);

        await expect(radioOption).toBeEnabled();

    }

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

    // 6. Keyboard Navigation & Accessibility

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

    // Focus on the radio button

    await maleRadio.focus();

    await expect(maleRadio).toBeFocused();

    // Select using Keyboard Space bar

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

    await expect(maleRadio).toBeChecked();

    // Navigate radio group using Arrow keys

    await page.keyboard.press('ArrowDown'); // or 'ArrowRight'

    await expect(femaleRadio).toBeChecked();

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

    // 7. Disabled / Readonly Radio Button Handling

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

    const disabledRadio = page.locator('#disabled-radio-id'); // Example selector

   

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

        // Assert disabled state

        await expect(disabledRadio).toBeDisabled();

        await expect(disabledRadio).not.toBeEditable();

    }

    console.log('All Radio Button assertions and actions executed successfully!');

});