Rivalry2

HTML Diff

1 added 1 removed

Original 2026-01-01

Modified 2026-02-26

1 Одна из основных составляющих современного интернета - формы. Они используются во многих сценариях:

2 <ul><li>Заказ товара</li>

3 <li>Заказ услуги</li>

4 <li>Подписка на рассылку</li>

5 <li>Отправка сообщений в чат</li>

6 <li>Прохождение тестов</li>

7 <li>Регистрация и вход на сайт</li>

8 </ul>Это лишь часть того, где используются формы. Это единственный способ прямого взаимодействия с пользователем на сайте или в приложении. По этой причине тестирование форм выходит на передний план, так как невозможность пользоваться сайтом критичнее, чем небольшая ошибка в стилях.

9 В этом уроке разберем, из чего состоят формы, и как их тестировать. Важно понимать, что невозможно протестировать все возможные варианты значений в большой форме, например, из 20-30 полей. Количество комбинаций разных вариантов в таких формах может быть очень большим.

10 По этой причине мы будем рассматривать общие рекомендации и самые частые проблемы, которые позволят не тестировать форму на все возможные комбинации, а сразу находить проблемные места.

11 <h2>Формы в HTML</h2>

12 Формы в HTML - большая тема, которая включает десятки тегов и атрибутов. Но мы остановимся на общей концепции элементов и том, чем они отличаются друг от друга. В этом разделе рассмотрим следующие элементы:

13 <ul><li>Поля ввода</li>

14 <li>Чекбоксы и радиокнопки</li>

15 <li>Список</li>

16 <li>Кнопка</li>

17 </ul>Если вы заинтересованы в более подробном изучении работы этих элементов, а также в вёрстке, для вас в конце урока будет ссылка на интенсив по вёрстке веб-приложений.

18 Рассмотрим поля формы на примере формы заказа товара:

19 <h3>Поля ввода</h3>

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

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

22 <ul><li>Текст</li>

23 <li>Email</li>

24 <li>Числовое значение</li>

25 <li>Дата</li>

26 <li>Пароль</li>

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

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

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

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

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

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

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

33 <ul><li>Для числового поля попробуйте ввести буквы</li>

34 <li>В полях для ввода имени введите Email</li>

35 <li>В поле для телефона введите имя</li>

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

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

38 <ul><li>Поле для ввода цены - введите отрицательное значение</li>

39 <li>Адрес доставки - введите адрес из вымышленной вселенной</li>

40 </ul><h3>Чекбоксы и радиокнопки</h3>

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

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

43 <ul><li>Связаться за день до доставки</li>

44 <li>Сохранить информацию для будущих заказов</li>

45 </ul>Пользователь может выбрать оба варианта, один или ни одного. Для чекбоксов отсутствие выбора - это тоже выбор.

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

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

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

49 <ul><li>Если в форме чекбокс, то должна быть возможность выбрать несколько вариантов</li>

50 <li>Если в форме радиокнопка, то вариант всегда один. Если разработчик неправильно сверстает форму, то возможна ситуация одновременной оплаты картой и наличными</li>

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

52 <h3>Список</h3>

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

54 <ul><li>Множественный выбор из списка</li>

55 <li>Один вариант</li>

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

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

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

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

60 <h3>Кнопка</h3>

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

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

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

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

65 <ul><li>Форма не отправляется со всеми пустыми полями</li>

66 <li>С незаполненным одним обязательным полем</li>

67 <li>Если форма валидируется в моменте, то не должно происходить отправки в момент исправления последней ошибки</li>

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

69 <h2>Выводы</h2>

70 В этом уроке на примере формы отправки заказа мы рассмотрели, из чего состоит форма, и каким образом ее можно протестировать. Узнали о понятии валидации и как она должна работать.

71 Вот основные пункты при тестировании форм:

72 <ul><li>Проверяйте поля для ввода на невозможных данных. Например: отрицательная цена, буквы в поле для цифр, невозможные имена</li>

73 <li>Чекбоксы должны иметь возможность множественного выбора. Если это не так, то функционал должен быть представлен в виде радиокнопки</li>

74 <li>Радиокнопки используются для выбора только одного пункта из множества</li>

75 <li>Списки повторяют функционал радиокнопок и чекбоксов, только в другом обличии. Их тестирование не отличается</li>

76 <li>Старайтесь проверять не только поле формы, но и то, что происходит вокруг него. Представьте себя не в виде тестировщика, а в виде клиента</li>

77 <li>Все валидируемые поля должны быть понятны и отображать ошибки, если это необходимо</li>

78 </ul>В будущих уроках мы еще вернемся к форме, когда будем изучать тему безопасности.