Тестирование веб-приложений
Тестирование полей ввода и веб-форм: что проверять
Поле ввода проверяют на пустое значение, длину на границах (на единицу меньше лимита, ровно лимит и на единицу больше), недопустимые символы, пробелы, HTML-теги и вставку из буфера обмена. К этому добавляются проверки под тип поля: формат email, сложность пароля, маска телефона, размер и формат файла, диапазон дат. Каждое ограничение проверяют и на клиенте, и на сервере, потому что клиентскую проверку можно обойти.
- 3 значения
- на каждой границе длины: на единицу меньше, ровно и на единицу больше
- Клиент и сервер
- ограничение поля проверяют на обеих сторонах
- Собеседование
- форму с паролем и подтверждением часто дают протестировать
Валидация на клиенте и на сервере
Прежде чем проверять поля, стоит разобраться с валидацией, то есть с проверкой введённых данных. Клиентская валидация срабатывает до отправки запроса на сервер. Если в поле имени можно ввести 15 символов, а введено 16, браузер сразу показывает сообщение об ошибке. Такую проверку пишут в коде фронтенда.
Одной клиентской проверки мало: вёрстку на своей стороне пользователь может изменить, например в DevTools, и снять ограничение. Поэтому сервер проверяет те же данные ещё раз и на 16 символов отвечает своей ошибкой, а код ответа показывает, что запрос не обработан.
Тестировщик проверяет обе стороны. Если клиент показывает ошибку, а сервер спокойно принимает лишние символы, это критичный дефект. В поле имени он выглядит безобидно, но в поле пароля или данных банковской карты такая дыра становится риском для безопасности.
Пример из банковского приложения: поле суммы перевода не даёт ввести больше 100 000 рублей за раз. Тестировщик вводит 100 001 и видит ошибку на экране, затем копирует из вкладки Network запрос обычного перевода (Copy as cURL), импортирует его в Postman, меняет сумму на 100 001 и отправляет. Если сервер провёл перевод, лимит держится только на интерфейсе.
В глоссарии ISTQB у слова "валидация" другое значение: подтверждение того, что продукт пригоден для своего назначения. В разговоре о формах так называют проверку ввода, и на собеседовании полезно показать, что вы различаете эти смыслы.
Текстовое поле: обязательный набор проверок
Эти проверки я считаю обязательными для любого поля ввода, а у отдельных типов полей к ним добавляются свои. Ожидаемое поведение берут из требований: там записаны лимиты, допустимые символы и тексты сообщений об ошибках.
Длину проверяют техникой граничных значений, по три значения на каждой границе. В программе ISTQB это вариант техники, а в базовом варианте на границу берут два значения: саму границу и ближайшее за ней.
Обязательность
Оставить пустым каждое обязательное поле по очереди, потом все сразу. Система должна сообщить, что поле нужно заполнить.
Максимальная длина
Ввести на один символ меньше лимита, ровно лимит и на один больше. На краях диапазона ошибки встречаются чаще, чем в середине.
Минимальная длина
Те же три значения у нижней границы: минимум минус один, минимум и минимум плюс один.
Недопустимые символы
Если разрешена только латиница, ввести кириллицу, цифры и спецсимволы и посмотреть, появляется ли понятное сообщение.
Пробелы
Пробел считается полноценным символом и входит в лимит. Проверяют один пробел вместо значения, пробел в начале, в конце и в середине ввода.
HTML-теги
Ввести тег вроде <b>текст</b>. Если текст отобразился жирным, система выполняет разметку из ввода, и через тег <script> злоумышленник может внедрить вредоносный скрипт. Такая атака называется межсайтовым скриптингом (XSS), а введённое значение должно показываться как обычный текст.
Вставка из буфера
Скопировать значение и вставить его через Ctrl+C и Ctrl+V. Вставленный текст должен проходить те же проверки, что и набранный вручную.
Проверки под тип поля
К базовому набору добавляются проверки, которые зависят от того, что поле принимает. Если требования о чём-то молчат, вопрос задают аналитику, а удобную мелочь, которой в требованиях нет, можно предложить как улучшение.
Текстовая область (textarea)
Многострочное поле для длинного текста. Проверки те же, что у текстового поля, плюс растягивание за уголок: тянется ли область и подстраивается ли текст под новый размер.
Адрес сайта
Адрес без протокола, с другим протоколом (например, ftp вместо https), с www и без него, максимальная длина и кириллица. Если сайт не найден, должно появиться сообщение об ошибке.
Телефон
Пустое значение, знаки плюс и минус, буквы кириллицы и латиницы, теги и спецсимволы. Если у поля есть маска, проверяют, что код страны в ней можно сменить (например, на 375 для Беларуси) и что цифры автоматически разбиваются дефисами. Полезен плейсхолдер – серый образец ввода, который исчезает, как только в поле появляется текст.
Email
Адрес без @, с двумя @, с недопустимыми символами. Корректные адреса бывают с цифрами и спецсимволами, их перечни можно найти в интернете и взять в тестовые данные. Если в требованиях нет шаблона адреса, его стоит предложить аналитику.
Пароль и подтверждение
Пустое поле, минимальная и максимальная длина и требования к сложности: латиница, заглавная буква, цифра, спецсимвол. Каждое требование проверяют по отдельности, и пароль, где не выполнено одно условие, должен получить отказ. Отдельно проверяют подтверждение, которое не совпадает с паролем.
Загрузка файла
Отправка формы без файла, размер на границе лимита (при лимите 10 МБ это 9,99, 10 и 10,01 МБ), пустой файл весом 0 байт, разрешённые и запрещённые форматы. Если требования не запрещают пустые файлы, такой файл должен загрузиться. Файлы нужного размера делают онлайн-генераторами.
Капча
Верный ввод пропускает дальше, после обновления картинка меняется, звуковая капча воспроизводится, а с пустым полем форма не отправляется.
Чек-боксы, радиокнопки, списки и даты
Элементы выбора проверяют на всех сочетаниях: ничего не выбрано, выбран один вариант, несколько, все. Хорошей практикой считается, когда выбор срабатывает и по щелчку рядом с квадратиком или кружком, на подписи, так что это тоже проверяют.
Названия элементов стоит знать по-английски. Баг-репорты часто пишут на английском, и разработчик должен сразу понять, в каком элементе дефект. Фраза вроде "нажал на какую-то кнопочку, и всё сломалось" ему ничего не скажет.
Чек-бокс (checkbox)
Ничего, один, несколько и все варианты. Если выбор обязателен, после отправки пустой формы появляется сообщение. В длинном списке удобен пункт "Выбрать все", и если его нет, тестировщик может предложить его как улучшение.
Радиокнопка (radio button)
Выбрать можно только один вариант. Обычно один выбран по умолчанию, и снять выбор совсем нельзя. Проверяют, что два варианта одновременно не выбираются.
Выпадающий список (dropdown)
Выбор одного пункта, поиск по первой букве, если он есть, длина и символы в строке поиска, сортировка пунктов.
Список с множественным выбором (list box, multiselect)
Выбор нескольких пунктов с Ctrl и Shift, прокрутка, добавление и удаление кнопками плюс и минус или перетаскиванием, кнопки "добавить все" и "удалить все", поиск и сортировка.
Дата и время (date picker, time picker)
Дата, введённая в текстовое поле, должна подтягиваться в календарь. Проверяют самую раннюю и самую позднюю допустимую дату: на сайте для взрослых нельзя выбрать дату рождения, по которой человеку нет 18 лет, а в медицинской системе процедуру нельзя назначить дальше разрешённого срока. Во времени не принимаются значения больше 24 часов, отрицательные числа, буквы и пробелы.
Пример: даты в бронировании
В сервисе бронирования отелей тестировщик выбирает выезд на день раньше заезда и заезд в прошлом. Каждый вариант должен получить понятную ошибку ещё до оплаты. Если форма пропустила выезд раньше заезда, сервис может посчитать отрицательное число ночей и показать неверную сумму.
Другие элементы
Переключатель (toggle), хлебные крошки (breadcrumbs), то есть цепочка ссылок от главной страницы к текущей, о которой спрашивают на собеседованиях, слайдер, пагинация и индикатор загрузки (loader). У строки поиска, где подсказки появляются после третьего символа, проверяют ввод двух, трёх и четырёх символов.
Пример: тестовые данные для поля "Имя"
Требование: поле обязательное, принимает только латинские буквы, длина от 2 до 15 символов. Из базового набора получаются такие значения и ожидаемые результаты. Начинают с позитивной проверки, потому что она подтверждает, что форма работает по требованиям.
Anna
Позитивная проверка: имя принимается и сохраняется.
Пустое поле
Ошибка: поле обязательно для заполнения.
A (1 символ)
Ошибка: имя слишком короткое. Это значение на единицу ниже нижней границы.
Al, Ala, 14 и 15 символов
Значения принимаются: это нижняя граница, значение на единицу выше неё, значение на единицу ниже верхней границы и сама верхняя граница.
16 символов
Ошибка о превышении длины. Затем то же значение отправляют в обход клиента, сняв ограничение в DevTools, и сервер тоже должен его отклонить.
Анна
Ошибка: допустимы только латинские буквы.
Anna1 и Anna!
Ошибка, потому что цифры и спецсимволы требование не разрешает.
Пробелы
Один пробел вместо имени даёт ошибку обязательного поля. Пробел в начале или в конце либо обрезается, либо считается символом и входит в лимит. Как именно, решают требования, а если там об этом ничего нет, вопрос задают аналитику.
<b>Anna</b>
Ошибка о недопустимых символах. Если значение всё же сохранилось, на странице оно должно показываться с угловыми скобками и без жирного шрифта, иначе система выполняет разметку из ввода.
Anna из буфера обмена
Значение вставляется и проходит те же проверки, что и набранное вручную.
Видеоурок, шпаргалки и тренажёры
Поля ввода и веб-формы я разбираю в шестнадцатом уроке курса "Тестировщик с нуля" на YouTube и по каждому элементу на экране показываю, что в нём проверять. В бесплатном базовом курсе по тестированию теме посвящён урок "Тестирование полей ввода и веб-форм", и после теории в нём идут задания.
Из этих проверок стоит собрать собственный чек-лист для полей ввода и сверяться с ним на каждой новой форме. Готовые чек-листы из интернета тоже пригодятся, если дополнять их своим опытом. Шпаргалка по веб-элементам показывает каждое поле живым примером с кодом и списком проверок. В тренажёрах нужно придумать позитивные и негативные значения под требование, найти дефект в валидации формы и сопоставить элементы с их названиями.
Курсы по теме
Вопросы и ответы
Что проверять в поле ввода?
Пустое значение, если поле обязательное, длину на нижней и верхней границе (на единицу меньше, ровно и на единицу больше), недопустимые символы, пробелы в начале, в конце и вместо значения, HTML-теги и вставку из буфера обмена. Затем добавляют проверки под тип поля: формат email, сложность пароля, маску телефона, размер файла.
Чем клиентская валидация отличается от серверной?
Клиентская срабатывает в браузере до отправки запроса и сразу показывает сообщение об ошибке. Серверная проверяет данные, которые дошли до сервера, и отвечает ошибкой, если они неверны. Клиентскую можно обойти, изменив вёрстку, поэтому серверная нужна всегда, и тестировщик проверяет обе.
Как протестировать форму с паролем и подтверждением пароля?
Проверить пустые поля, минимальную и максимальную длину по границам и каждое требование к сложности отдельно: пароль без цифры, без заглавной буквы, без спецсимвола, кириллицей. Затем ввести подтверждение, которое не совпадает с паролем, и проверить, что форма его не принимает. Такую задачу часто дают на собеседовании.
Какие тестовые данные брать для поля email?
Корректный адрес, адрес без @ и с двумя @, с пробелом и недопустимыми символами, пустое значение и значение длиннее лимита. Корректные адреса тоже бывают разными, с цифрами и спецсимволами, поэтому их перечень стоит взять из требований или из готовых списков.
Как проверить загрузку файла?
Отправить форму без файла, загрузить файл на границе лимита размера (при лимите 10 МБ это 9,99, 10 и 10,01 МБ), пустой файл весом 0 байт, разрешённые и запрещённые форматы. Если требования не запрещают пустые файлы, такой файл должен загрузиться.
Зачем знать названия веб-элементов по-английски?
Баг-репорты часто пишут на английском, и в них нужно точно назвать элемент: checkbox, radio button, dropdown, date picker, breadcrumbs. Из расплывчатого "нажал на кнопочку" разработчик не поймёт, где дефект, а путаница в названиях роняет доверие к тестировщику.
Посмотреть программы курсов
Программа каждого курса открыта целиком: видны все модули, уроки и число шагов.