Как проверить функциональность чек-боксов?

1. Default state: Проверить, в каком состоянии (отмечен/не отмечен) находится чекбокс при загрузке страницы или открытии окна, соответствует ли это спецификации.
2. Selection/Deselection:
   • Проверить возможность установить отметку (кликнуть по самому чекбоксу).
   • Проверить возможность снять отметку (кликнуть по отмеченному чекбоксу).
   • Проверить возможность установить/снять отметку кликом по связанной метке (<label>).
3. Visual feedback: Убедиться, что состояние чекбокса визуально меняется при установке/снятии отметки.
4. Functionality impact: Проверить, как изменение состояния чекбокса влияет на остальную функциональность страницы или приложения (включает/выключает определенные элементы, меняет данные, активирует/деактивирует кнопки и т.д.).
5. State persistence: Если применимо, проверить сохраняется ли состояние чекбокса после перезагрузки страницы или повторного открытия формы/окна.
6. Disabled state: Если чекбокс может быть неактивным:
   • Проверить, что он визуально отличается от активного.
   • Проверить, что на него нельзя кликнуть (ни на сам чекбокс, ни на метку).
   • Проверить, что его состояние нельзя изменить.
7. Required state: Если чекбокс является обязательным:
   • Проверить, что при попытке отправить форму без его отметки появляется соответствующее сообщение об ошибке.
8. Group behaviour (Radio/Checkbox Groups): Если чекбоксы являются частью группы:
   • Checkbox Group: Проверить возможность выбрать несколько чекбоксов. Проверить возможность снять отметку с любого из выбранных.
   • Radio Group (хоть и не чекбоксы, но схожий контроль): Проверить, что выбор одного элемента автоматически снимает отметку с других в той же группе.
9. Keyboard navigation: Проверить возможность фокусироваться на чекбоксе с помощью клавиши Tab и изменять его состояние с помощью пробела.
10. Accessibility: Проверить доступность для пользователей с ограниченными возможностями (например, корректное чтение состояния и метки скринридерами).
11. Browser compatibility: Проверить корректное отображение и работу в различных браузерах.
12. Responsiveness: Проверить, как отображается и работает на устройствах с разным размером экрана.
13. Performance: Убедиться, что изменение состояния чекбокса не вызывает заметных задержек или проблем с производительностью.
14. Data submission: При отправке формы проверить, что состояние отмеченных чекбоксов корректно передается на сервер.

При автоматизации используются локаторы для элементов (CSS-селекторы, XPath) и методы фреймворка (например, Selenium, Cypress) для кликов и проверки состояний (isSelected(), isChecked(), isEnabled(), getAttribute()).

# Пример проверки в 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. Проверка дефолтного состояния
if not checkbox_element.is_selected():
    print("Чекбокс по умолчанию не выбран.")
    
# 2. Выбор
checkbox_element.click()
if checkbox_element.is_selected():
    print("Чекбокс успешно выбран.")
    
# 3. Снятие выбора
checkbox_element.click()
if not checkbox_element.is_selected():
    print("Выбор с чекбокса успешно снят.")

# 6. Проверка disabled-состояния
disabled_checkbox_locator = (By.ID, "disabledCheckbox")
disabled_checkbox_element = driver.find_element(*disabled_checkbox_locator)

if not disabled_checkbox_element.is_enabled():
    print("Чекбокс успешно неактивен.")

# Закрытие браузера
driver.quit()

// Пример проверки в Cypress
describe('Checkbox functionality', () => {
  beforeEach(() => {
    cy.visit('your_page_url');
  });

  it('should allow selecting and deselecting the checkbox', () => {
    // 1. Проверка дефолтного состояния (например, ожидаем, что он не выбран)
    cy.get('#myCheckbox').should('not.be.checked');

    // 2. Выбор
    cy.get('#myCheckbox').check();
    cy.get('#myCheckbox').should('be.checked');

    // 3. Снятие выбора
    cy.get('#myCheckbox').uncheck();
    cy.get('#myCheckbox').should('not.be.checked');
  });

  it('should handle disabled state', () => {
    // 6. Проверка disabled-состояния
    cy.get('#disabledCheckbox').should('be.disabled');
    // Попытка кликнуть по disabled элементу не должна менять его состояние
    cy.get('#disabledCheckbox').click({ force: true }); // force: true для игнорирования disabled
    cy.get('#disabledCheckbox').should('not.be.checked'); // Предполагаем, что он изначально не выбран и клик не сработал
  });

  // ... другие тесты для групп, лейблов и т.д.
});