Инструкция по ручному тестированию сайта по макету
Цель и Задачи
Цель данной инструкции — обеспечить соответствие сайта утверждённому макету и выявить ошибки или проблемы в его функциональности, что гарантирует качественный пользовательский опыт и корректную работу всех элементов.
Основные задачи ручного тестирования:
- Проверка визуального соответствия сайта макету;
- Тестирование навигации и удобства перемещения по сайту;
- Проверка функциональности всех интерактивных и структурных элементов;
- Адаптивность интерфейса на различных устройствах;
- Кросс-браузерность и корректное отображение сайта в разных браузерах;
- Проведение повторного тестирования после исправлений;
- SEO-проверка для передачи мета-данных и настроек на новый сайт.
Подготовка к тестированию
Перед началом тестирования:
- Очистите кэш браузера или включите режим инкогнито, чтобы избежать влияния сохранённых данных;
- Ознакомьтесь с макетом сайта, его функциональными требованиями и утверждёнными спецификациями.
Пункты тестирования
1. Визуальное соответствие дизайну
Тестирование визуального соответствия направлено на проверку всех видимых элементов и эффектов сайта, чтобы они точно воспроизводили утверждённый макет.
- Цвета и оттенки
Убедитесь, что цвета текста, кнопок, фона, заголовков, ссылок и других элементов сайта полностью соответствуют макету. - Шрифты и текст
Проверьте, чтобы тип и размер шрифта, а также отступы и межстрочные интервалы совпадали с дизайном. - Размещение и пропорции элементов
Каждый элемент (кнопки, изображения, блоки текста) должен находиться на своих местах с корректными отступами и не «съезжать» по ширине и высоте. - Изображения и иконки
Проверьте качество и разрешение изображений и иконок. Убедитесь, что они не искажаются и сохраняют высокое качество. - Эффекты и анимация
Если в макете предусмотрены анимации или эффекты (например, плавные переходы, всплывающие окна), проверьте их корректную реализацию.
Навигация — важный аспект для удобства пользователей. Проверьте работу меню, ссылок, подменю и других элементов навигации.
- Ссылки и кнопки
Проверьте, чтобы каждая ссылка и кнопка были рабочими и вели на нужные страницы. - Главное меню и подменю
Убедитесь, что главное меню и подменю соответствуют макету, пункты меню ведут на соответствующие страницы. Если предусмотрены поддомены, проверьте их корректную интеграцию и мультирегиональность. - Функция поиска
Если на сайте есть поиск, введите несколько запросов и проверьте результаты на точность и релевантность. - Переход между страницами
Убедитесь, что переход между страницами происходит плавно, а кнопки «Назад» и «Вперед» в браузере работают корректно. - Пагинация
Если раздел сайта имеет многостраничное отображение, проверьте работу пагинации и правильность её реализации. - Хэдер и футер
Проверьте наличие и работоспособность ссылок в шапке и подвале сайта. Убедитесь, что в хэдере указаны контактные данные, а в футере — служебные страницы (пользовательское соглашение, контакты).
3. Функциональность
Проверка функциональности направлена на то, чтобы удостовериться, что все формы, поп-апы, корзина, фильтры, теги и категории работают корректно и соответствуют требованиям.
- Формы и поп-апы
Заполните формы на сайте, проверьте отправку и получение сообщения об успешной отправке. Убедитесь, что обязательные поля не могут быть пропущены, и проверьте наличие маски для телефона. - Корзина и оформление заказа
Добавьте несколько товаров в корзину, измените их количество, проверьте общую сумму. Пройдите процесс оформления заказа и убедитесь в его корректной работе. - Фильтры и теги
Проверьте работу всех фильтров, теги и категории на соответствие логике и требованиям. - Файлы и медиа-контент
Проверьте загрузку изображений, видео и других файлов, чтобы они отображались и воспроизводились без искажений и ошибок.
4. Адаптивность
Адаптивное тестирование проверяет, насколько корректно сайт отображается на различных устройствах и экранах.
- Проверка различных разрешений экрана
Протестируйте сайт на устройствах с разными экранами (десктоп, планшет, смартфон) и убедитесь, что контент не выходит за пределы экрана. - Меню и элементы управления
Проверьте доступность и читабельность меню, кнопок, выпадающих списков и других элементов на экранах разного размера. - Качество изображений и текста
Проверьте, чтобы изображения и текст адаптировались без потери качества и горизонтальной прокрутки. - Формы и поля ввода
Убедитесь, что все формы и поля корректно работают на всех устройствах и подстраиваются под экран.
5. Кросс-браузерность
Кросс-браузерное тестирование проверяет, что сайт одинаково корректно отображается в различных браузерах (Chrome, Firefox, Safari, Edge и т.д.).
- Внешний вид
Проверьте, чтобы в каждом браузере элементы сайта (цвета, шрифты, изображения, отступы) выглядели одинаково и не изменялись. - Интерактивные элементы
Проверьте, чтобы ссылки, кнопки, выпадающие списки и формы работали во всех браузерах, и их функциональность не отличалась.
6. Повторное тестирование
Повторное тестирование необходимо для проверки исправленных ошибок и проблем, выявленных ранее.
- Повторная проверка
Выполните тестирование ранее исправленных ошибок, чтобы убедиться, что они не повторяются. - Результаты
Запишите все выявленные новые ошибки или некорректные исправления в техническое задание.
7. SEO
SEO-проверка важна для переноса всех данных, влияющих на видимость сайта в поисковых системах.
- Проверка мета-данных
Убедитесь, что Title, Description, файлы robots.txt и sitemap.xml перенесены на новый сайт. - Архивные данные
Если мета-данные на новом сайте были утеряны, воспользуйтесь Web Archive для восстановления старых данных.
Завершение тестирования
После завершения всех этапов:
- Оформите отчет, указав все выявленные проблемы и ошибки, прикрепите скриншоты или видео ошибок для наглядности;
- Присвойте каждому багу приоритет в зависимости от его влияния на работоспособность сайта (низкий, средний, высокий, критический);
- Отправьте отчет на согласование с командой разработки для последующего исправления ошибок.