Перейти на PRO

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

Тип вопроса: Веб-тестирование Вероятность: 10% Категория: QA Тестировщик

Ответ

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 атрибут)?

Ответ 18+ 🔞

А, ну вот, опять эти ваши чекбоксы, блядь! Сидишь такой, думаешь — ну что там может быть сложного? Галочка, не галочка, ебушки-воробушки. Ан нет, сука, тут целая наука, оказывается!

Смотри, вот представь себе, это как будто ты в столовой. Перед тобой меню, и ты можешь взять и борщ, и котлету, и компот, и хлеб — всё сразу, на здоровье! Это и есть чекбокс, ёпта. А радио-кнопка — это когда тебе говорят: «Или борщ, или солянка, пидор шерстяной, третьего не дано!». Вот и вся разница, в рот меня чих-пых!

А в коде это выглядит проще пареной репы, но тоже со своими подводными камнями. Смотри, вот тебе базовая магия:

<!-- Вот одинокий чекбокс, грустит такой -->
<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. Внешний вид и доступность, чтобы не ослепнуть:

  • Визуально понятно, что выбрано, а что нет? Есть состояние «неопределённое» (indeterminate), когда, например, в дереве папок только часть файлов выбрана. Оно отображается?
  • Это самое главное, ёбта! Ты кликнул на текст «Подписаться на рассылку» — чекбокс сработал? Если нет, то ты — мудя, который не связал <label for="id"> с <input id="id">. Люди это ненавидят, когда надо целиться в микроскопический квадратик!
  • А слепой пользователь со скринридером поймёт, где он и что можно выбрать? Без правильного label и атрибутов — нихуя не поймёт.

3. Логика, где всё и ебётся:

  • Есть кнопка «Выбрать всё»? Нажал — все галочки проставились. Нажал «Снять всё» — все слетели. Работает? Или начинает глючить и половина остаётся?
  • Состояние indeterminate для древовидных списков (папка внутри папки) обрабатывается логично? Родительский чекбокс помечается «квадратиком», если не все дети выбраны?
  • И, наконец, валидация. Поставил атрибут required на чекбокс, чтобы юзер хоть что-то да выбрал? Форма не отправляется, пока он не ткнёт в один пункт? Работает? А то бывает required, а похуй, отправляет пустое.

Вот так-то, друг. Казалось бы — хуй с горы, а нет, целая вселенная. Проверь всё это, и тогда твои чекбоксы будут не просто галочками, а эталоном юзабилити, блядь!

© ХакСобесов, 2026
support@hacksobesov.com