В мире современного веб-разработки тестирование веб форм является критическим этапом обеспечения высокого качества веб-приложений. Эффективная работа и тестирование веб форм существенно влияет на пользовательский опыт, а тестирование становится ключевым инструментом для выявления и исправления потенциальных проблем.
Пользовательский опыт тесно связан с удобством использования веб форм. Тестирование позволяет выявить не только технические недочеты, но и аспекты, влияющие на восприятие и удовлетворенность пользователя. От качественных веб форм зависит уровень взаимодействия пользователя с приложением.
Валидационная таблица тестирования
Что проверяем при тестирование веб-форм и элементов | |
| Основные валидационные проверки | |
| Functional | GUI |
| 1. Очистка кэша и кукис перед тестированием: — Прежде чем провести тестирование новой сборки, необходимо выполнить очистку кэша и кукис. — Для полной очистки рекомендуется использовать приложение Ccleaner или провести процедуру через консоль управления. 2. Проверка «хлебных крошек» (Breadcrumbs): — Элемент навигации «хлебные крошки» является важным признаком удобства пользования сайтом и перемещения по его структуре. — Проверка соответствия и правильной работы элемента навигации для обеспечения удобства пользовательского опыта. 3. Проверка взаимосвязи компонентов: — Всегда следует проверять взаимосвязь между компонентами веб-приложения. — Особое внимание уделяется поведению одного компонента при изменении или удалении другого для предотвращения нежелательных воздействий. — Например, при удалении категории товара не должны удаляться все товары в этой категории. 4. Тестирование с использованием реальных данных и нагрузка: — Тестирование проекта с использованием реальных данных имитирует реальные условия работы приложения. — Нагрузочное тестирование должно осуществляться с количеством данных, соответствующим или превышающим ожидаемую реальную нагрузку. — От QA ожидается эффективная имитация работы приложения в условиях, более жестких, чем могут столкнуться обычные пользователи и клиенты. 5. Проверка цветовой кодировки сообщений: — Цвета сообщений (красный для ошибок, зеленый для успешных операций) должны соответствовать установленным стандартам и не вызывать противоречий с особенностями приложения. 6. Согласование числительного и существительного: — Проверка правильного согласования числительных с существительными в сообщениях, чтобы избежать грамматических ошибок. — Например, «1 день», «2 дня», «5 дней». 7. Проверка допустимых символов и языка файлов: — Удостоверение, что имена файлов и допустимые символы соответствуют установленным требованиям. — Проверка обработки ошибок при вводе недопустимых символов. | — Пользователь должен получать информацию о выполненных действиях в системе через сообщения об успешном завершении операций. — Для необратимых действий, таких как удаление, необходимо предоставлять подтверждающие сообщения для предотвращения случайных ошибок. — Сообщения должны соответствовать смыслу выполняемого действия, а названия требуемого действия в сообщениях об ошибках должны быть ясными и указывать на необходимые действия пользователя. — Цветовая кодировка сообщений (красный для ошибок, зеленый для успешных операций) должна соответствовать стандартам и требованиям приложения. — Названия полей, форм, таблиц и кнопок в сообщениях об ошибках и успешном завершении операции должны быть согласованы. — Сообщения об ошибках должны выводиться в порядке, соответствующем расположению полей, где были найдены ошибки. — Поле, содержащее ошибку, рекомендуется выделять цветом для более наглядного обнаружения. — Невалидные значения не должны отображаться в сообщениях об ошибках, чтобы избежать путаницы. Например, не следует отображать «Email exmple@@mail.ru не соответствует допустимому формату». — Числительное и существительное должны согласовываться в с ообщениях (например, «1 день», «2 дня», «5 дней»). — Должны быть указаны допустимые символы и язык файлов с учетом разрешенных значений и возможных ошибок. |
| Тестирование текстового поля | text filed |
| Тестирование числового поля | number |
| Тестирование выпадающих списков и дроп-даунов | List(dropdown) |
| Тестирование файла загрузки | Atachment |
| Тестирование поиска | Search |
| Тестирование кнопки | Button |
| Тестирование чек-боксов | check-box |
| Тестирование радио батонов ( кнопок) | Radio-button |
| Тестирование переключателя | Toggle/Switch(слайдер) |
| Тестирование меню | Menu |
| Тестирование работы с клавиатурой | Keyboards tests |
| Тестирование таблиц | Table |
| Тестирование всплывающих окон | Pop-up |
| Тестирование окна | Window |
| Тестирование скролинга | Scrolling |
| Тестирование календарей | Calendar |
| Тестирование скрытых полей | Shadow fileds |
| Тестирование форм (формы отправки данных) | Forms |
| Тестирование тултипов (подсказок ) | Tooltips |
| Тестирование скачивания | Download |
| Тестирование ссылок | Link |
| Тестирование папок, документов, доков | Folder/Documents/Docs |
Основные аспекты
Валидация данных
Цель: Гарантировать корректность ввода данных пользователем.
- Проверка корректности ввода:
- Действие: Пользователь вводит данные в соответствующие поля формы.
- Ожидаемый результат: Система проверяет данные на соответствие ожидаемому формату (например, валидация email, формата номера телефона).
- Тестирование различных форматов ввода:
- Действие: Ввод данных в различных форматах (цифры, буквы, символы).
- Ожидаемый результат: Система корректно обрабатывает данные в различных форматах и не допускает некорректного ввода.
- Проверка ограничений ввода:
- Действие: Ввод данных, превышающих установленные ограничения (например, максимальная длина пароля).
- Ожидаемый результат: Система предоставляет понятное сообщение об ограничениях и не допускает превышения.
Обработка ошибок при неверных данных
Цель: Гарантировать, что пользователь получит четкое и информативное сообщение при некорректном вводе.
- Тестирование веб форм отображения ошибок:
- Действие: Ввод данных, не соответствующих ожидаемому формату.
- Ожидаемый результат: Система отображает понятное сообщение об ошибке возле соответствующего поля.
- Тестирование сообщений об ошибке:
- Действие: Намеренный ввод данных, приводящих к ошибке.
- Ожидаемый результат: Система предоставляет информативное сообщение, указывающее на причину ошибки и способы ее устранения.
- Обработка некорректных символов:
- Действие: Ввод данных с использованием некорректных символов (спецсимволы, HTML-теги).
- Ожидаемый результат: Система корректно обрабатывает данные, предотвращая возможные атаки (например, предотвращение XSS-атак).
Особенности тестирования:
- Проверка многоязычных сообщений об ошибках.
- Тестирование реакции системы на специфичные сценарии ввода.
Навигация и взаимодействие
1. Тестирование переходов между полями:
- Цель: Обеспечить плавные и логичные переходы между различными полями в веб формах.
- Тестирование фокуса:
- Действие: Переход между полями с использованием клавиши Tab или мыши.
- Ожидаемый результат: Фокус должен легко перемещаться между полями, обеспечивая удобство пользовательского взаимодействия.
- Тестирование порядка перехода:
- Действие: Переход между полями в различном порядке.
- Ожидаемый результат: Порядок перехода должен быть логичным, учитывая потребности пользователя.
- Тестирование с клавишей Enter:
- Действие: Нажатие клавиши Enter для перехода между полями.
- Ожидаемый результат: Клавиша Enter должна легко перемещать фокус, обеспечивая альтернативный способ навигации.
2. Взаимодействие с различными элементами формы:
- Цель: Исследовать взаимодействие пользователя с различными элементами формы.
- Тестирование выпадающих списков:
- Действие: Выбор пунктов из выпадающего списка.
- Ожидаемый результат: Выпадающие списки должны легко раскрываться и предоставлять выбор с минимальным усилием пользователя.
- Тестирование флажков и радиокнопок:
- Действие: Выбор флажков и радиокнопок.
- Ожидаемый результат: Флажки и радиокнопки должны реагировать на выбор пользователя, предоставляя понятную обратную связь.
- Тестирование взаимодействия с текстовыми полями:
- Действие: Ввод текста в текстовые поля.
- Ожидаемый результат: Текстовые поля должны реагировать на ввод, предоставляя комфортное пространство для ввода данных.
- Тестирование кнопок и действий:
- Действие: Нажатие на кнопки отправки, сброса и других действий.
- Ожидаемый результат: Кнопки должны реагировать на действия пользователя, и предусмотренные действия должны выполняться корректно.
Совместимость веб форм
1. Проверка на различных браузерах:
- Цель: Гарантировать корректную работу после тестирования веб форм на различных браузерах, обеспечивая единообразие пользовательского опыта.
- Тестирование основных браузеров:
- Действие: Запуск веб формы на основных браузерах (Chrome, Firefox, Safari, Edge).
- Ожидаемый результат: Веб форма должна одинаково хорошо работать на различных браузерах без потери функциональности.
- Тестирование кросс-браузерной совместимости:
- Действие: Запуск веб формы на менее популярных браузерах.
- Ожидаемый результат: Веб форма должна поддерживать широкий спектр браузеров, обеспечивая доступность для всех пользователей.
- Тестирование различных версий браузеров:
- Действие: Проверка работы веб формы на различных версиях одного браузера.
- Ожидаемый результат: Веб форма должна быть совместима с различными версиями браузеров, учитывая изменения в их функционале.
2. Адаптивность для мобильных устройств:
- Цель: Обеспечить удобство использования во время тестирования веб форм на различных мобильных устройствах, учтя особенности экранов.
- Тестирование на различных устройствах:
- Действие: Запуск веб формы на различных мобильных устройствах (смартфоны, планшеты).
- Ожидаемый результат: Веб форма должна корректно отображаться и функционировать на различных размерах экранов.
- Тестирование ориентации экрана:
- Действие: Проверка работы веб формы в различных ориентациях экрана.
- Ожидаемый результат: Веб форма должна подстраиваться под разные ориентации экрана, обеспечивая комфортное взаимодействие.
- Тестирование использования сенсорных устройств:
- Действие: Проверка возможности взаимодействия с веб формой через сенсорные жесты.
- Ожидаемый результат: Веб форма должна поддерживать сенсорные устройства, такие как тачскрины, обеспечивая плавное и удобное взаимодействие.
Тестирование веб форм нагрузки, автоматизация и безопасность
Автоматизация тестирования веб форм
Цель: Повышение эффективности тестирования через автоматизацию.
- Преимущества автоматизации:
- Сокращение времени тестирования.
- Повторяемость и надежность тестов.
- Возможность раннего выявления дефектов.
- Инструменты для тестирования:
- Selenium, JUnit, TestNG.
- Автоматизированные фреймворки, такие как Appium для мобильных форм.
Тестирование безопасности веб форм
Цель: Гарантировать защиту данных и предотвращение возможных атак.
- Защита от SQL-инъекций:
- Проверка корректной обработки SQL-запросов.
- Использование параметризованных запросов.
- Проверка на подделку межсайтовых запросов (CSRF):
- Проверка наличия и правильной работы механизмов CSRF-защиты.
- Сценарии тестирования на возможность подделки запросов.
- Обеспечение конфиденциальности данных:
- Проверка шифрования данных во время передачи.
- Тестирование механизмов хранения и обработки конфиденциальной информации.
Тестирование производительности веб форм
Цель: Обеспечение отзывчивости и стабильности при высоких нагрузках.
- Обработка большого числа форм:
- Тестирование производительности при одновременном заполнении множества форм.
- Измерение времени обработки данных при большом объеме запросов.
- Загрузка форм на разных уровнях нагрузки:
- Проведение тестов на различных уровнях нагрузки (низкая, средняя, максимальная).
- Мониторинг ресурсов и определение точек узких мест.
Позитивное и негативное тестирование веб форм
Позитивные сценарии
- Успешные варианты ввода данных:
- Цель: Гарантировать, что форма корректно обрабатывает правильные данные.
- Тестовые случаи:
- Ввод корректных персональных данных.
- Заполнение формы с использованием различных форматов (цифры, буквы, символы).
- Подтверждение правильного функционирования выпадающих списков и радиокнопок.
- Положительные аспекты пользовательского опыта:
- Цель: Поддержание удобства использования формы.
- Тестовые случаи:
- Оценка времени, необходимого для успешного заполнения формы.
- Проверка понятности инструкций и подсказок.
- Валидация уведомлений о успешной отправке формы.
Негативные сценарии
- Тестирование на ошибочные данные:
- Цель: Обеспечение правильной обработки некорректных вводов.
- Тестовые случаи:
- Ввод данных в неправильном формате (например, некорректный email).
- Проверка обработки данных, превышающих установленные ограничения (например, слишком короткий пароль).
- Ввод данных с ошибками в грамматике или орфографии.
- Обработка сценариев с некорректным использованием форм:
- Цель: Предотвращение негативного воздействия некорректного использования формы.
- Тестовые случаи:
- Попытка отправки формы без обязательных полей.
- Использование автоматизированных средств для массовой отправки данных.
- Проверка защиты от попыток манипулирования данными через изменение параметров запроса.
Пример тестирования веб форм
Дана форма для регистрации. Оцените ее на различных уровнях сложности, начиная с простых позитивных и негативных кейсов, таких как обязательные поля, проверка галочек на соглашениях, корректность типа поля password и соответствие ввода параметрам ТЗ. Переходите к более сложным проверкам, включая кроссбраузерность, понятность формы с описанием полей, безопасность передачи данных, отображение формы до и после сабмита, поведение при многократном сабмите, глобализацию, простые инъекции, работу с многошаговыми формами и загрузкой файлов. Дополнительно, уделяйте внимание сохранению данных в веб формах или SQL-таблицах, уведомлениям пользователей, атрибуту autocomplete, а также проводите дополнительные тесты, такие как проверка отправки данных, добавление записей в базу данных, загрузка формы при нестабильном интернет-соединении и корректность cookies/токена после сабмита.
