Формы — Введение в тестирование веб-приложений

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

В современном стандарте HTML5 появилось много типов полей, которыми можно пользоваться:

Эти поля не просто позволяют определить, что нужно ввести. Кроме того, по ним браузеры автоматически проверяют корректность введенных значений. Такая проверка называется валидацией или validation. Если значение в поле не соответствует ожидаемому, то высвечивается ошибка — форма не прошла валидацию.

Представим, что в нашей форме поле Email обязательное и для него указана правильная HTML-разметка. Теперь проверку поля забирает на себя браузер. Если не ввести информацию или ввести некорректный Email, то получится такой результат:

Это касается всей формы. Она размечена с учетом всех правил HTML, поэтому валидируется браузером перед отправкой на сервер. Это удобно, так как отнимает меньше сил по проверке каждого обязательного поля.

Иногда в целях дизайна разработчики указывают специальные атрибуты, чтобы не валидировать форму встроенными средствами браузера. Тогда все валидации и вывод ошибок разработчики делают сами. Это позволяет точнее настроить внешний вид ошибок и их описание. Например, вот как выглядит форма с отключенной валидацией браузером:

Такой подход позволяет лучше контролировать ошибки. Но это накладывает больше ответственности на разработчика, так как для всех типов полей необходимо самостоятельно написать обработчик, который проверит корректность данных. С другой стороны можно проверить абсурдные варианты, например, имя «asjfhalskdfhlkhasdf», так как браузер его пропустит, ведь это текст и поле не пустое.

При тестировании полей для ввода определите, какой элемент перед вами и исходя из этого тестируйте невозможные варианты:

Некоторые поля изначально рассчитаны на определенное количество символов. Например, мобильный номер телефона состоит из 11 цифр. Попробуйте ввести большее или меньшее количество цифр.

Всегда старайтесь вводить нелогичные комбинации:

Это похожие по структуре элементы, у которых есть одно важное отличие: чекбоксы позволяют выбрать несколько вариантов, а радиокнопки — только один:

В нашей форме с помощью чекбоксов сделаны варианты:

Пользователь может выбрать оба варианта, один или ни одного. Для чекбоксов отсутствие выбора — это тоже выбор.

Радиокнопки позволяют выбрать только один вариант ответа. В данном случае мы можем выбрать между оплатой карты и оплатой наличными. Их валидация происходит чаще, так как пользователю нужно выбрать один из вариантов взаимодействия. В практике часто встречается ситуация, что одна из радиокнопок сразу выбрана при загрузке формы.

В этом случае четких правил по валидации нет. В вашем проекте может быть обязательный выбор чекбокса или нескольких и отсутствовать валидация у радиокнопок.

При тестировании нужно обращать внимание на тип элемента:

При тестировании стоит смотреть не только на поведение конкретных элементов, но и на их окружение. В форме радиокнопка отвечает на тип оплаты. Если оплата происходит за наличные, то и части формы с вводом банковской карты быть не должно. Тестировщик всегда смотрит на продукт не только как работник, но и как обычный пользователь. Ищите нелогичности.

Списки — одна из вариаций чекбоксов и радиокнопок, только в другом внешнем представлении. Разработчик может заложить в них один из двух вариантов:

При тестировании списков можно придерживаться рекомендаций из раздела про чекбоксы и радиокнопки.

В нашей форме есть два списка: «Страна» и «Город». Вот как выглядит выбор стран, если кликнуть по списку:

Здесь видно, что один список серый — он заблокирован. И в этом есть своя логика: нельзя выбрать город до тех пор, пока не выбрана страна. Если же выбрать страну, то открывается возможность выбрать город:

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

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

Кнопка должна реагировать на текущее состоянии формы. Если пользователь исправил некоторые ошибки, то после отправки должны исчезнуть предупреждения на полях, которые были исправлены:

Иногда форма валидируется сразу, то есть все ошибки пропадают или появляются еще до нажатия на кнопку «Отправить». В этом случае кнопка не должна ничего делать до того момента, как все ошибки не будут исправлены.

При тестировании старайтесь использовать разные сценарии. Проверьте:

В одном из следующих уроков мы поговорим и о безопасности отправки данных в формах, что является одним из главных пунктов любого тестирования.