Чек-лист тестирования формы

Форма — самое дорогое место продукта: здесь пользователь отдаёт данные и деньги, и здесь же чаще всего их теряет. Это универсальный чек-лист: пройдите его по любой форме — регистрации, оформления заказа, обратной связи.

1. Поля и подписи

• Все поля подписаны, обязательные помечены.
• Клик по подписи ставит фокус в поле (связанный <label for>).
• Правила поля понятны до отправки: формат телефона, требования к паролю.
• Плейсхолдер не заменяет подпись — иначе, начав печатать, человек забывает, что это за поле.
• Тип поля соответствует данным: пароль скрыт, e-mail с типом email, телефон с типом tel.
• Порядок полей логичный, tab идёт сверху вниз без прыжков.

2. Значения: что вводить

• Пусто и только пробелы.
• Минимальная и максимальная длина, и на один символ за границей.
• Пробелы по краям — обрезаются ли (особенно в e-mail).
• Двойные пробелы внутри.
• Кириллица, латиница, иероглифы, эмодзи 🙂.
• Апостроф и кавычки: O'Brien — классика, ломающая запросы к базе.
• HTML и скрипт: <b>текст</b>, <script>alert(1)</script> — должны выводиться как текст.
• Числа: ноль, отрицательное, дробное там, где ждут целое, очень большое, с ведущими нулями.
• Даты: 29 февраля, 31-е в 30-дневном месяце, дата в прошлом и в будущем.
• Вставка из буфера вместо ввода с клавиатуры — часто обходит ограничение maxlength.
• Автозаполнение браузера и менеджер паролей не портят значения.

3. Валидация

• Ошибка появляется в разумный момент: после ухода из поля, а не с первой буквы.
• Текст ошибки объясняет, что сделать, а не «Поле заполнено неверно».
• Ошибка показана рядом с проблемным полем.
• При ошибке введённые данные не теряются.
• Несколько ошибок сразу — видны все, а не по одной.
• После исправления ошибка исчезает.
• Ограничения продублированы на сервере: тот же запрос в обход интерфейса отклоняется.

4. Отправка

• Форма отправляется по Enter.
• Кнопка блокируется на время отправки, есть индикатор.
• Двойной клик по «Отправить» не создаёт две записи.
• Медленная сеть: интерфейс не «замирает» молча (проверьте на Slow 3G).
• Обрыв сети во время отправки — понятная ошибка и возможность повторить.
• Ответ сервера с ошибкой 500 обрабатывается, а не роняет страницу.
• После успеха понятно, что произошло и что делать дальше.
• Повторная отправка той же формы после успеха не создаёт дубль.

5. Состояния и навигация

• Кнопка «Назад» в браузере не ломает форму.
• Перезагрузка страницы: черновик сохраняется или честно предупреждает о потере.
• Две вкладки одновременно: выход в одной — что происходит во второй.
• Отключённые элементы объясняют, почему они отключены.
• Есть состояние загрузки, пустое состояние и состояние ошибки.

6. Доступность

• Вся форма проходится с клавиатуры, фокус видно.
• Контраст текста не ниже 4.5:1, ошибок — тоже.
• Цвет не единственный носитель смысла: к красной рамке есть текст.
• Скринридер называет поле и его ошибку.
• Масштаб 200% не ломает вёрстку.

7. Мобильные

• Экранная клавиатура не перекрывает поле и кнопку отправки.
• Для телефона открывается цифровая клавиатура, для почты — с @.
• Зона нажатия не меньше 44×44 px, кнопки не слипаются.
• Поворот экрана не теряет введённое.
• Автокоррекция не портит имя и адрес.

8. Безопасность и данные

• Пароль не уходит в URL и не пишется в логи.
• Ограничение частоты: 100 отправок подряд блокируются или требуют капчу.
• Чужой идентификатор в скрытом поле не даёт доступа к чужим данным.
• Загрузка файла проверяется по содержимому, а не по расширению.
• Ошибка сервера не показывает стек и SQL-запрос.

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