Что такое элемент интерфейса Checkbox и как его тестировать?

Checkbox (флажок) — это элемент управления в графическом интерфейсе пользователя (GUI), который позволяет сделать независимый и множественный выбор из предложенных опций.

Ключевые отличия от Radio Button:

• Checkbox: Множественный выбор. Каждый флажок независим.
• Radio Button: Единичный выбор внутри группы. Выбор одной кнопки сбрасывает другие в той же группе.

Базовая HTML-реализация:

<!-- Одиночный чекбокс -->
<input type="checkbox" id="subscribe" name="subscribe" value="newsletter">
<label for="subscribe">Подписаться на рассылку</label>

<!-- Группа чекбоксов -->
<fieldset>
  <legend>Выберите интересы:</legend>
  <input type="checkbox" id="sports" name="interests" value="sports">
  <label for="sports">Спорт</label>
  <input type="checkbox" id="tech" name="interests" value="tech">
  <label for="tech">Технологии</label>
</fieldset>

Чек-лист для тестирования чекбокса:

1. Функциональность:

   • Можно ли поставить и снять галочку кликом мыши и с клавиатуры (пробел, Tab)?
   • Сохраняется ли состояние после обновления страницы (если задумано)?
   • Корректно ли передаются данные в форме? Передаётся только значение отмеченного (checked) чекбокса.

2. Визуальное состояние и доступность (Accessibility):

   • Есть ли визуальный индикатор состояния (checked, unchecked, indeterminate/частичный)?
   • Связан ли элемент <input> с <label> (клик по тексту должен активировать чекбокс)?
   • Корректно ли работает с программами чтения с экрана (screen readers)?

3. Логика и валидация:

   • Правильно ли работает логика "Выбрать всё/Снять всё"?
   • Корректно ли обрабатывается состояние indeterminate для древовидных структур?
   • Работает ли валидация, если выбор обязателен (required атрибут)?