Как тестировать форму: 8 слоёв проверок по порядку

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

Проверять форму «как получится» — значит найти опечатку и пропустить двойное списание. Работает послойный подход: от того, что видно, к тому, что скрыто. Каждый следующий слой находит дефекты, недоступные предыдущему.

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

Начинаем с того, что видит человек, не нажимая ничего.

• Все поля подписаны, обязательные помечены, и пометка объяснена.
• Клик по подписи ставит фокус в поле — признак правильной вёрстки и требование доступности.
• Правила известны до отправки: формат телефона, требования к паролю.
• Плейсхолдер не заменяет подпись: начав печатать, человек забудет, что это за поле.
• Тип поля соответствует данным: пароль скрыт, у почты тип email, у телефона — tel.
• Порядок табуляции идёт сверху вниз без прыжков.

Слой 2. Значения

Здесь работают классы эквивалентности и границы, но есть и универсальный набор, который стоит подставлять всегда.

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

Слой 3. Валидация

Проверяем не только «ловится ли ошибка», но и как она подана.

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

Слой 4. Отправка

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

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

Слой, который пропускают чаще всего, потому что позитивный сценарий его не задевает.

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

Слой 6. Мобильные

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

Слой 7. Доступность

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

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

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

Полный список в виде готового документа, который можно распечатать, — в чек-листе тестирования формы.

Порядок важнее полноты

Слои идут именно в таком порядке не случайно. Проверять доступность на форме, которая теряет данные при отправке, — потраченное время: её всё равно будут переделывать. Сначала то, что ломает сценарий, потом то, что портит впечатление.

Практический приём: пройдите слои 1–4 полностью и только потом возвращайтесь к остальным. Если посреди работы придётся остановиться, у вас будет проверено самое дорогое, а не случайная выборка из всех слоёв сразу.

И записывайте по ходу, что осталось непройденным. К концу дня это превращается в честный отчёт о покрытии, а не в «вроде всё посмотрел».

Три дефекта, которые находят чаще всего

Если из всей статьи запомнить только это — уже будет польза.

1. Двойной клик по «Отправить». Две записи вместо одной — уровень Critical, а проверяется за секунду.
2. Вставка длинного значения из буфера. Обходит ограничение длины, выставленное только в браузере, и уезжает на сервер целиком.
3. Тот же запрос в обход формы. Показывает, есть ли проверка на сервере вообще, — самая ценная минута из всех.