Приведи примеры проверок Checkbox

Проверки для элемента Checkbox

Checkbox (чекбокс) — один из базовых элементов интерфейса, требующий тщательного тестирования из-за его простоты и частого использования. Основная задача — убедиться, что элемент корректно отражает состояние («включен»/«выключен»), правильно взаимодействует с пользователем и системой.

Основные группы проверок (Test Scenarios)

1. Проверки функциональности и состояний

• Проверка базовых состояний: Элемент должен иметь два четко различимых состояния: checked (отмечен) и unchecked (не отмечен).

  <!-- Пример HTML-элемента -->
  <input type="checkbox" id="agree" name="agree">
  <label for="agree">Согласен с условиями</label>
  

    В тестах нужно проверить:
    * Клик на чекбокс или связанный `label` меняет состояние с `unchecked` на `checked`.
    * Повторный клик меняет состояние обратно на `unchecked`.
    * Состояние корректно отображается визуально (например, галочка или заполненный квадрат).

• Проверка третьего состояния: Для некоторых реализаций существует состояние disabled (неактивен).

  // Пример проверки состояния через JS (в автотестах)
  expect(checkboxElement.isEnabled()).toBe(false); // Для disabled
  expect(checkboxElement.isSelected()).toBe(true);  // Для checked
  

• Проверка группового поведения (для группы чекбоксов):

    * Независимость элементов: выбор одного не должен автоматически менять другие.
    * Возможность выбрать несколько, все или ни одного.

2. Проверки пользовательского интерфейса (UI)

• Визуальное соответствие: Состояния должны четко отличаться (цвет, форма, иконка). Проверка в разных браузерах и на разных разрешениях.
• Позиционирование и размеры: Элемент и его label должны быть правильно расположены, не перекрываться другими элементами.
• Доступность (Accessibility):

    * Наличие корректного `id` и связанного `label` (или `aria-label`).
    * Правильные **ARIA-атрибуты** (`aria-checked`, `aria-disabled`).

```html
<!-- Правильный пример с ARIA -->
<input type="checkbox" id="newsletter" aria-checked="false" aria-labelledby="newsletter-label">
<span id="newsletter-label">Получать рассылку</span>
```

    * Работа с клавиатурой: фокус должен перемещаться по `Tab`, состояние меняться по `Space` или `Enter`.

3. Проверки интеграции и данных

• Влияние на бизнес-логику: Проверка, что состояние чекбокса корректно влияет на данные формы или состояние системы.

  // Пример: при отправке формы значение чекбокса должно быть в данных
  // Если чекбокс 'agree' отмечен, в запросе должно быть поле 'agree=true'
  

• Проверка поведения в форме: Состояние должно сохраняться при валидации/отправке/очистке формы.
• Взаимодействие с другими элементами: Например, чекбокс «Показать детали» должен скрывать/показывать соответствующий блок контента.

4. Проверки в рамках автоматизированного тестирования

В автотестах (например, с Selenium WebDriver или Playwright) проверки часто включают:

• Поиск элемента по различным локаторам.
• Операции клика и проверки состояния.
• Ожидание изменений (например, после клика должен появиться другой элемент).

# Пример автотеста на Python с Selenium
from selenium import webdriver
from selenium.webdriver.common.by import By

driver = webdriver.Chrome()
driver.get("https://example.com/form")

checkbox = driver.find_element(By.ID, "terms")
# Проверяем начальное состояние (не отмечен)
assert not checkbox.is_selected()
# Кликаем и проверяем изменение
checkbox.click()
assert checkbox.is_selected()
# Проверяем видимость связанного элемента
details_section = driver.find_element(By.ID, "details")
assert details_section.is_displayed()

Конкретные примеры тест-кейсов

1. Кейс: Изменение состояния по клику

    * **Предусловие:** Чекбокс находится в состоянии `unchecked`.
    * **Шаг:** Кликнуть на чекбокс или его текстовую метку (`label`).
    * **Ожидаемый результат:** Чекбокс переходит в состояние `checked`. Визуальное отображение меняется.

1. Кейс: Состояние 'disabled'

    * **Предусловие:** Чекбокс имеет атрибут `disabled`.
    * **Шаг:** Попытаться кликнуть на элемент или использовать клавишу `Space`.
    * **Ожидаемый результат:** Состояние не меняется. Элемент не получает фокус (или получает, но не реагирует).

1. Кейс: Влияние на обязательное поле

    * **Предусловие:** Форма содержит обязательный чекбокс «Согласие».
    * **Шаг:** Попытаться отправлить форму с `unchecked` состоянием.
    * **Ожидаемый результат:** Форма не отправляется, появляется сообщение об ошибке.

1. Кейс: Группа чекбоксов «Выбор интересов»

    * **Шаги:** Выбрать один, несколько, все чекбоксы.
    * **Ожидаемый результат:** Каждый элемент работает независимо. Данные формы содержат корректный список выбранных значений.

Особые рекомендации

• Не забывайте про мобильные устройства: Проверьте удобство клика (размер элемента).
• Тестируйте с помощью инструментов доступности (например, расширения для браузера).
• Для сложных кастомных чекбоксов (сделанных через CSS/JS) проверяйте не только логическое состояние (checked), но и визуальные классы.

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