Важные советы по тестированию frontend (HTML-верстки)
Чтобы правильно протестировать HTML-верстку, важно учесть четыре основных аспекта:
1. Метод: ручной и автоматизированный
Проверить верстку сайта можно сразу двумя способами – вручную или с помощью автоматических тестов. Главное преимущество ручного тестирования – гибкость и детальность. В процессе работы тестировщик может увидеть даже не указанные в скрипте сценарии и проверить и их. Но отсюда вытекает и главный минус – значительные временные затраты.
Автоматическое тестирование заметно сокращает время на проверку. Оно проводится через специальные тесты, которые создают разработчики для повторения одних и тех же действий по поиску ошибок. То есть в этом случае разработчик только однажды тратит время на написание теста, а затем использует его много раз для разных страниц.
Методики автоматического тестирования:
- юнит-тесты (самый простой вариант, который тестирует части кода)
- приемочные тесты (тестируют основные функции компонентов)
- интеграционные тесты (тестируются целые компоненты и их совместная работа).
К автоматическим действиям можно отнести также мониторинг сайта и логирование ошибок, которые обнаружены в ходе работы с сайтом.
2. Поэтапный список для тестирования HTML-верстки
Что проверяем и на что обращаем внимание.
- Схожесть с макетом (сходится ли макет с версткой, нет ли элементов другой цветовой гаммы).
- Правильная работа в разных условиях (в разных браузерах, устройствах, операционных системах и при разной скорости интернета).
- Тестирование десктопной и мобильных версий на экранах с разным разрешением (отображение кнопок, страниц, плавающих элементов и т.д.)
- HTML (валидность, наличие мета-тегов, корректная колировка, отсутствие пустых тегов).
- Javascript (отсутствие ошибок, корректная работа плагинов, объединение скриптов в один файл и др.)
- CSS (валоидация, корректное подключение файлов стилей, одинаковые цвета и шрифтов, корректная работа анимации и т.д.).
- Фавиконки (корректный список и фавиконки больших размеров).
- Шрифты (подключение и предзагрузка шрифтов, отсутствие неисправных шрифтов, засечки).
- Навигация (правильная верстка меню, битые ссылки, правильное отображение меню, ссылки для текущих страниц).
- Заголовки (тег Н1 на странице, семантика заголовков, правильный размер заголовков).
- Контент (прописанные стили для контентных элементов, одинаковый размер блоков, корректное отображение блоков, проверка орфографии и пунктуации и т.д.).
- Изображения (правильное подключение и распределение, корректные размеры и стили, адаптация изображений и др.).
- Ссылки и кнопки (выделение, стилизация кнопок, пустые ссылки, ссылки на опасные ресурсы, неактивные кнопки и т.д.).
- Футер (постоянная высота футера, отступы с разных сторон).
- Формы (заголовки полей, уведомлений, некорректная отправка форм, правильная отправка формы и т.д.).
3. Браузеры для тестирования сайта
На разных ресурсах и устройствах могут возникать разные ошибки, поэтому важно протестировать все возможные варианты. Список браузеров и устройств заранее согласовывается с заказчиком. Самые распространенные десктопные браузеры: Chrome, Safari, Firefox, Edge, Internet Explorer 11 (Yandex и Opera сделаны на одном движке с Chrome, поэтому тестировать их отдельно нет необходимости). Основных мобильных браузеров намного меньше: Chrome и Safari.
4. План разработки и тестирования
Сколько этапов тестирования необходимо проводить?
Front-end
Первый: HTML-верстка, тестирование и правка обнаруженных ошибок.
Второй: разработчик и дизайнер составляют списки недочетов (каждый свой) и вносят нужные корректировки.
Третий: проверка сайта по чек-листу (ищите его выше), выписка ошибок и передача их разработчику.
Backend
HTML-верстка интегрируется в CMS и заполняется реальным контентом. Тестировщик проходит по чек-листу и передает ошибки разработчику, который исправляет код. Затем тестировщик повторно проверяет его работу.
На финальном этапе особенно важно найти и устранить все ошибки, чтобы они не мешали полноценной работе сайта. На этом тестирование можно считать завершенным.