How do you check the functionality of checkboxes?

1. Default state: Check the state (checked/unchecked) of the checkbox upon page load or window open, and verify if it matches the specifications.
2. Selection/Deselection:
   • Verify the ability to check (click on the checkbox itself).
   • Verify the ability to uncheck (click on a checked checkbox).
   • Verify the ability to check/uncheck by clicking on the associated label (<label>).
3. Visual feedback: Ensure that the checkbox visually changes state when checked/unchecked.
4. Functionality impact: Check how changing the checkbox state affects other page or app functionalities (enabling/disabling certain elements, changing data, activating/deactivating buttons, etc.).
5. State persistence: If applicable, verify that the checkbox state is saved after page reload or reopening the form/window.
6. Disabled state: If the checkbox can be inactive:
   • Verify it visually differs from the active state.
   • Verify it cannot be clicked (neither the checkbox nor the label).
   • Verify its state cannot be changed.
7. Required state: If the checkbox is mandatory:
   • Verify that attempting to submit the form without checking it shows the appropriate error message.
8. Group behaviour (Radio/Checkbox Groups): If checkboxes are part of a group:
   • Checkbox Group: Verify the ability to select multiple checkboxes. Verify the ability to uncheck any of the selected ones.
   • Radio Group (though not checkboxes, but similar control): Verify that selecting one item automatically unchecks others in the same group.
9. Keyboard navigation: Verify that the checkbox can be focused using the Tab key and its state can be changed with the spacebar.
10. Accessibility: Check accessibility for users with disabilities (e.g., correct reading of state and label by screen readers).
11. Browser compatibility: Verify correct display and operation across different browsers.
12. Responsiveness: Check how it displays and functions on devices with various screen sizes.
13. Performance: Ensure that changing the checkbox state does not cause noticeable delays or performance issues.
14. Data submission: When submitting the form, verify that the state of checked checkboxes is correctly sent to the server.

For automation, locators (CSS selectors, XPath) and framework methods (e.g., Selenium, Cypress) are used for clicks and state checks (isSelected(), isChecked(), isEnabled(), getAttribute()).

# Example check in Selenium
from selenium import webdriver
from selenium.webdriver.common.by import By

driver = webdriver.Chrome()
driver.get("your_page_url")

checkbox_locator = (By.ID, "myCheckbox")
checkbox_element = driver.find_element(*checkbox_locator)

# 1. Check default state
if not checkbox_element.is_selected():
    print("Checkbox is not selected by default.")
    
# 2. Select
checkbox_element.click()
if checkbox_element.is_selected():
    print("Checkbox successfully selected.")
    
# 3. Deselect
checkbox_element.click()
if not checkbox_element.is_selected():
    print("Checkbox deselected successfully.")

# 6. Check disabled state
disabled_checkbox_locator = (By.ID, "disabledCheckbox")
disabled_checkbox_element = driver.find_element(*disabled_checkbox_locator)

if not disabled_checkbox_element.is_enabled():
    print("Checkbox is successfully disabled.")

# Close browser
driver.quit()

// Example check in Cypress
describe('Checkbox functionality', () => {
  beforeEach(() => {
    cy.visit('your_page_url');
  });

  it('should allow selecting and deselecting the checkbox', () => {
    // 1. Check default state (e.g., expecting it to be unchecked)
    cy.get('#myCheckbox').should('not.be.checked');

    // 2. Select
    cy.get('#myCheckbox').check();
    cy.get('#myCheckbox').should('be.checked');

    // 3. Deselect
    cy.get('#myCheckbox').uncheck();
    cy.get('#myCheckbox').should('not.be.checked');
  });

  it('should handle disabled state', () => {
    // 6. Check disabled state
    cy.get('#disabledCheckbox').should('be.disabled');
    // Attempting to click a disabled element should not change its state
    cy.get('#disabledCheckbox').click({ force: true }); // force: true to override disabled
    cy.get('#disabledCheckbox').should('not.be.checked'); // assuming initially unchecked and click has no effect
  });

  // ... other tests for groups, labels, etc.
});