Общее руководство для тестирования верстки сайтов у нас в студии. По умолчанию считаем, что все пункты данного руководства действительны, если для проекта не указано иное.
🔬 Полное тестирование
Полное тестирование следует проводить для всех новых сверстанных страниц. Например, для верстки страницы, которую никогда до этого не верстали. Или же её структура претерпела изменения: поменялся лейаут, добавился функционал.
В среднем, такое тестирование занимает от 15 до 30 минут на одну страницу.
Что проверять
Дизайн
Картинка в браузере должна соответствовать макету.
Проверка может быть сделана с помощью расширения PerfectPixel для Chrome:
Допустимое расхождение с макетом расстояний между объектами на странице — 1pt. Допустимы незначительные отличия, связанные с ошибками в макете (различные отступы или размеры у однотипных элементов, погрешности в цветах).
Проверка сайта с включенным блокировщиком рекламы
Сайт должен проверяться с включенным блокировщиком рекламы. Элементы сайта не должны блокироваться.
Подмена текстов
Проверка осуществляется внутренним продуктом студии Stress Test. Работа продукта заключается в подмене всех видимых текстов на случайные:
Шеринг
Страница должна быть готова для отправки в соц. сети: должны быть правильно прописаны все элементы Opengraph: заголовок, описание, изображение, ссылка и прочее.
Для проверки можно использовать дебагер Meta:
Навигация с помощью истории браузера
На сайте должны корректно работать переходы между страницами с помощью истории браузера (стрелки влево и вправо рядом с адресной строкой).
Навигация по сайту с помощью клавиатуры
На сайте должна корректно работать навигация с помощью клавиатуры. В частности следует проверять работу следующих клавиш (и комбинаций клавиш):
- Стрелки влево, вправо, вверх и вниз.
- Tab (переход к следующему элементу).
- Enter (отправка формы или перевод на следующую строку).
- Esc (закрытие всплывающих окон или отмена).
- Пробел (переход к следующей видимой части страницы или к концу сайта).
- Page Up.
- Page Down.
Где проверять
Платформы для проверки
- Android
- Windows 10 и 11
- iOS текущая и предыдущая версии
- macOS текущая и предыдущая версии
Браузеры для проверки
Текущая и предыдущая версия следующих браузеров:
- Google Chrome
- Mozilla Firefox
- Safari
- Opera
- Microsoft Edge
Устройства для проверки
- Ноутбук с Windows или macOS (разрешение 1366px по ширине)
- Стационарный компьютер с разрешением от 1440px
- iPhone X или новее
- iPad Air или новее
- Смартфон Android
- Планшет Android
⏱️ Краткое тестирование
⚠️ Пользоваться с осторожностью. Использовать в случае незначительных обновлений в ранее сверстанных страницах.
В среднем, такое тестирование занимает от 5 до 10 минут на одну страницу.
Что проверять
Дизайн
Картинка в браузере должна соответствовать макету.
Проверка может быть сделана с помощью расширения PerfectPixel для Chrome:
Допустимое расхождение с макетом расстояний между объектами на странице — 1pt. Допустимы незначительные отличия, связанные с ошибками в макете (различные отступы или размеры у однотипных элементов, погрешности в цветах).
Где проверять
Платформы для проверки
- Android
- Windows 11
- iOS текущая версия
Браузеры для проверки
Текущая и предыдущая версия следующих браузеров:
- Google Chrome
- Safari
Устройства для проверки
- Ноутбук с Windows или macOS (разрешение 1366px по ширине)
- iPad
- Смартфон Android