Эта статья поможет вам создать эффективные тест-кейсы для проверки хедера (он же верхняя панель или шапка сайта), охватывая как UI-, так и функциональные тесты. Эти навыки помогут вам разрабатывать тестовые сценарии, которые тщательно проверят работоспособность и юзабилити этой важной области веб-сайтов.
Хедер играет важную роль в навигации по сайту — он содержит ключевые элементы, такие как логотип, меню и контактные данные. Его корректная работа не только облегчает навигацию, но и усиливает идентичность бренда.
Читайте также: Тест-кейсы для веб-элементов
Содержание:
- Что такое хедер
- UI-тесты для хедера
- Функциональные тест-кейсы для хедера
- Позитивные тест-кейсы для хедера
- Негативные тест-кейсы для хедера
- Заключение
Что такое хедер
Хедер — это верхняя часть страницы, которая, как правило, остаётся одинаковой на всех страницах сайта. Он часто включает такие элементы, как логотип, основные ссылки для навигации, строку поиска и иконки социальных сетей. Хедер важен, так как предоставляет пользователю быстрый доступ к ключевым разделам сайта.
Друзья, поддержите нас вступлением в наш телеграм канал QaRocks. Там много туториалов, задач по автоматизации и книг по QA.
UI-тесты для хедера
При тестировании интерфейса хедера важно убедиться, что все элементы выглядят и работают корректно. Вот несколько подробных тест-кейсов:
- Отображение логотипа
- Описание: Убедитесь, что логотип в шапке сайта виден на всех страницах.
- Ожидаемый результат: Логотип отображается чётко, без искажений, и при клике ведёт на главную страницу.
- Навигационные ссылки
- Описание: Проверить корректность отображения и работы всех ссылок.
- Ожидаемый результат: Все ссылки видимы, кликабельны и ведут на соответствующие страницы.
- Функциональность поисковой строки
- Описание: Проверить, отображается ли поисковая строка и работает ли поиск.
- Ожидаемый результат: Поле поиска доступно для ввода, поиск выдаёт релевантные результаты.
- Иконки социальных сетей
- Описание: Проверить корректность отображения и работу иконок соцсетей.
- Ожидаемый результат: Иконки должны отображаться корректно и при клике вести на соответствующие страницы в социальных сетях.
- Адаптивность
- Описание: Проверить, как хедер работает на разных устройствах (ПК, планшет, телефон).
- Ожидаемый результат: Верхняя панель корректно масштабируется и сохраняет функциональность на всех устройствах.
- Доступность
- Описание: Убедиться, что хедер соответствует стандартам доступности (например, WCAG).
- Ожидаемый результат: Все элементы доступны с клавиатуры и через скринридеры, текст имеет достаточную контрастность.
- Проверка выпадающего меню
- Описание: Проверить корректность работы выпадающего меню в навигации.
- Ожидаемый результат: Меню должно открываться и закрываться при наведении или клике, корректно отображая все пункты подменю.
- Фиксированный хедер
- Описание: Убедиться, что хедер остаётся на месте при прокрутке страницы.
- Ожидаемый результат: Верхняя панель зафиксирована в верхней части экрана и остаётся доступной при скролле.
Функциональные тест-кейсы для хедера
- Проверка видимости хедера на разных устройствах
- Описание: Проверить, что хедер виден и работает на мобильных устройствах, планшетах и компьютерах.
- Ожидаемый результат: Хедер должен подстраиваться под разные экраны, не теряя своей функциональности и чёткости.
- Адаптивность хедера на мобильных устройствах
- Описание: Проверить адаптивность хедера на мобильных устройствах, включая проверку сворачиваемости и удобства использования меню.
- Ожидаемый результат: Хедер должен сворачиваться в меню “гамбургер”, которое легко открыть, а все пункты меню должны работать исправно.
- Работа ссылок
- Описание: Проверить, ведут ли все ссылки в хедере на нужные страницы.
- Ожидаемый результат: Каждая ссылка корректно открывает соответствующую страницу.
- Функциональность поисковой строки
- Описание: Убедиться, что поисковая строка в хедере работает корректно.
- Ожидаемый результат: Поисковая строка должна принимать текст, показывать соответствующие результаты и правильно реагировать на отсутствие результатов.
- Доступ к учетной записи пользователя
- Описание: Проверить работу ссылок для входа, регистрации и выхода из учётной записи в хедере.
- Ожидаемый результат: Пользователи должны успешно входить в систему, регистрировать новый аккаунт и выходить без ошибок.
- Иконка уведомлений
- Описание: Проверить отображение и работу иконки уведомлений в верхней панели.
- Ожидаемый результат: Иконка должна показывать правильное количество уведомлений и открывать выпадающее меню с ними.
- Переключение языков
- Описание: Убедиться, что переключатель языков в хедере работает корректно.
- Ожидаемый результат: При смене языка страница перезагружается и отображает корректный перевод.
Проведение этих тестов гарантирует, что все функции хедера работают правильно, что, в свою очередь, улучшает пользовательский опыт и доступность сайта.
Позитивные тест-кейсы для хедера
- Навигационные ссылки
- Описание: Проверить, что все ссылки в навигации работают корректно.
- Шаги:
- Перейти по каждой ссылке (например, Главная, О нас, Услуги, Контакты).
- Сравнить URL-адрес с ожидаемым.
- Ожидаемый результат: Каждая ссылка должна открывать нужную страницу без ошибок и с быстрой загрузкой.
- Функциональность поиска
- Описание: Проверить, что поиск выдаёт правильные результаты при введении корректного запроса.
- Шаги:
- Ввести любой известный запрос в поле поиска.
- Нажать на значок поиска или клавишу Enter.
- Ожидаемый результат: Должна открыться страница с результатами, соответствующими введённому запросу.
- Функциональность выпадающего меню
- Описание: Убедиться, что выпадающее меню реагирует на действия пользователя.
- Шаги:
- Навести курсор или кликнуть на каждый элемент с выпадающим меню.
- Проверить, что меню раскрывается и отображает все варианты.
- Кликнуть вне меню и проверить, что оно закрывается.
- Ожидаемый результат: Выпадающее меню должно корректно работать — открываться при клике и закрываться без задержек.
- Адаптивность
- Описание: Убедиться, что хедер корректно отображается и функционирует на разных устройствах и экранах.
- Шаги:
- Изменить размер окна браузера или использовать эмуляторы.
- Проверить, что все элементы хедера видимы и доступны.
- Ожидаемый результат: Шапка сайта должна корректно адаптироваться к любому размеру экрана, не теряя функциональности.
- Отображение контента при переключении языка
- Описание: Убедиться, что содержимое корректно обновляется при смене языка.
- Шаги:
- Выбрать другой язык через переключатель.
- Проверить, что текст на странице обновился.
- Ожидаемый результат: Текст должен отображаться на выбранном языке, а структура и функции страницы остаются неизменными.
Негативные тест-кейсы для хедера
- Неадаптивный заголовок на малых экранах
- Описание: Проверить, что заголовок не адаптируется должным образом при уменьшении ширины окна браузера до меньших размеров.
- Шаги:
- Изменить размер окна браузера до ширины менее 600px.
- Проверить видимость всех элементов заголовка (логотип, меню, строка поиска).
- Ожидаемый результат: Некоторые элементы заголовка могут перекрывать друг друга или становиться недоступными, что указывает на невозможность адаптации к малым экранам.
- Невозможность открыть выпадающее меню
- Описание: Проверить, приводят ли определенные условия к сбоям в открытии выпадающего меню в заголовке.
- Шаги:
- Навести курсор на элемент выпадающего меню.
- Кликнуть по меню, затем переместиться за его пределы.
- Ожидаемый результат: Меню не должно отображать элементы или оставаться открытым, когда это не требуется, что свидетельствует о неисправности в дизайне интерфейса.
- Переключатель языка не обновляет контент
- Описание: Проверить, корректно ли обновляется контент при смене языка.
- Шаги:
- Несколько раз изменить язык с помощью переключателя.
- Проанализировать текст и форматирование контента на странице.
- Ожидаемый результат: Контент может остаться на исходном языке или содержать ошибки в переводе, что свидетельствует о неисправности переключателя языка.
- Клик по логотипу не ведет на главную страницу
- Описание: Проверить, правильно ли работает клик по логотипу и перенаправляет ли он пользователей на главную страницу.
- Шаги:
- Кликнуть по логотипу в шапке сайта.
- Проверить URL и содержание открывшейся страницы.
- Ожидаемый результат: Логотип может не вести на главную страницу, что указывает на ошибку в навигации.
- Поиск не дает результатов
- Описание: Проверить, не возникает ли ошибка при поиске в хедере, когда система не выводит результаты по корректному запросу.
- Шаги:
- Ввести корректный запрос, который должен вернуть результат.
- Нажать на кнопку поиска и проверить ответ.
- Ожидаемый результат: Система может выдать сообщение об отсутствии результатов, несмотря на корректный запрос, что указывает на проблему в алгоритме поиска.
Заключение
Написание эффективных тест-кейсов для хедера веб-сайта важно для обеспечения удобной работы пользователя. Заголовок должен работать надежно в разных ситуациях, как обычных, так и неожиданных. Четко прописанные позитивные и негативные сценарии помогут тестировщикам убедиться, что заголовок не только выглядит хорошо, но и позволяет пользователям легко и уверенно перемещаться по сайту. Хорошо протестированный хедер повышает общую удовлетворенность пользователей и гарантирует успешную работу сайта.
Перевод статьи «How To Write Test Cases For Header».