Handling Check box In PlayWright

.

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

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

    // Navigate to the practice website

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

    // Locators for single and multiple checkboxes

    const mondayCheckbox = page.locator('#monday');

    const sundayCheckbox = page.locator('#sunday');

    const allDaysCheckboxes = page.locator('input.form-check-input[type="checkbox"]');

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

    // 1. Initial State Assertions

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

    // Verify visibility and enabled state

    await expect(mondayCheckbox).toBeVisible();

    await expect(mondayCheckbox).toBeEnabled();

    // Verify initial unchecked state

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

   

    // Alternative Boolean state check

    const isCheckedInitial = await mondayCheckbox.isChecked();

    expect(isCheckedInitial).toBe(false);

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

    // 2. Element Attribute Assertions

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

    // Verify attribute properties

    await expect(mondayCheckbox).toHaveAttribute('type', 'checkbox');

    await expect(mondayCheckbox).toHaveAttribute('value', 'monday');

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

    // 3. Single Checkbox Actions (Check / Uncheck / Click)

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

    // Action 1: Check the checkbox

    await mondayCheckbox.check();

    await expect(mondayCheckbox).toBeChecked(); // Assertion: Verified checked

    // Action 2: Uncheck the checkbox (Unlike radio buttons, checkboxes can be directly unchecked)

    await mondayCheckbox.uncheck();

    await expect(mondayCheckbox).not.toBeChecked(); // Assertion: Verified unchecked

    // Action 3: Toggle state using click()

    await mondayCheckbox.click();

    await expect(mondayCheckbox).toBeChecked();

   

    await mondayCheckbox.click(); // Click again to uncheck

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

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

    // 4. Label Association & Selecting via Label

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

    // Check using label text selector

    const sundayLabel = page.getByLabel('Sunday');

    await sundayLabel.check();

    await expect(sundayCheckbox).toBeChecked();

    // Reset sunday checkbox

    await sundayCheckbox.uncheck();

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

    // 5. Multiple Checkboxes Actions (Bulk Operations)

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

    // Array of target checkbox IDs or values

    const targetDays = ['monday', 'wednesday', 'friday'];

    // Action: Check multiple specific checkboxes

    for (const day of targetDays) {

        await page.locator(`#${day}`).check();

    }

    // Assertion: Verify only selected ones are checked

    for (const day of targetDays) {

        await expect(page.locator(`#${day}`)).toBeChecked();

    }

    // Action: Check ALL checkboxes in a group

    const checkboxCount = await allDaysCheckboxes.count();

    console.log(`Total Checkboxes: ${checkboxCount}`);

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

        await allDaysCheckboxes.nth(i).check();

    }

    // Assertion: Verify all are checked

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

        await expect(allDaysCheckboxes.nth(i)).toBeChecked();

    }

    // Action: Uncheck ALL checkboxes in a group

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

        await allDaysCheckboxes.nth(i).uncheck();

    }

    // Assertion: Verify all are unchecked

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

        await expect(allDaysCheckboxes.nth(i)).not.toBeChecked();

    }

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

    // 6. Keyboard Navigation & Accessibility

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

    // Focus on the checkbox

    await mondayCheckbox.focus();

    await expect(mondayCheckbox).toBeFocused();

    // Toggle Checkbox state using Keyboard Space key

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

    await expect(mondayCheckbox).toBeChecked();

    await page.keyboard.press('Space'); // Toggle back

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

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

    // 7. Edge Cases (Disabled & Indeterminate State)

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

    // Disabled Checkbox Verification

    const disabledCheckbox = page.locator('#disabled-checkbox-id');

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

        await expect(disabledCheckbox).toBeDisabled();

    }

    // Indeterminate / Partially Checked State Assertion (via JavaScript property)

    // Useful for parent checkboxes in tree structures

    const isIndeterminate = await mondayCheckbox.evaluate((el) => el.indeterminate);

    expect(isIndeterminate).toBe(false);

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

});