Чеклист по тестированию сайтов

test-checklist.md

Дизайн

Проверка на соответствие макету

Результат верстки должен соответствовать макету.

Проверка осуществляется с помощью расширения PerfectPixel.

Допустимы незначительные отличия (в пределах 1-5px), связанные с различием в рендеринге шрифтов.

Допустимы незначительные отличия, связанные с ошибками в макете (различные отступы или размеры у однотипных элементов, погрешности в цветах).

Допустимы отличия, связанные с заменой контента (изображения, текст).

Иные отличия недопустимы.

Если верстка по тем или иным причинам расходится с макетом, то об этом следует сообщить менеджеру проекта.

Контент

Проверка контента

На сайте должен быть актуальный контент:

• Текст.
• Изображения.
• Видео.
• Аудио.
• Внешние ссылки.

Запросить актуальный контент можно у менеджера проекта.

При наличии ошибок в тексте (орфографических, пунктуационных, логических) следует сообщить об этом менеджеру проекта.

При наличии недоступных ресурсов (недоступные изображения, видео или аудио, 404 ошибки) следует сообщить об этом менеджеру проекта.

При выявлении несоответствия контента (перепутан текст, изображение, видео или аудио) следует сообщить об этом менеджеру проекта.

Проверка на типографирование

Текст на сайте должен быть типографирован, т.е. прогнан через Типограф.

Если какой-либо текст намеренно не обрабатывался Типографом, то об этом следует указать либо в комментариях к коду, либо в README.md.

Проверка иконок и изображений

Иконки на сайте должны быть сделаны с помощью SVG, либо PNG + @2x PNG (если иконка имеет сложные растровые эффекты).

Если иконка простая, но SVG отсутствует, либо ее невозможно экспортировать из макета, то следует сообщить об этом менеджеру проекта.

Для контентных изображений должна быть указана @2x-версия.

Если для каких-либо иконок нет и не будет SVG-версий, то об этом следует указать в README.md.

Если для каких-либо контентных изображений нет и не будет @2x-версий, то об этом следует указать в README.md.

Шрифты

На сайте должны использоваться корректные шрифты.

Обязательный формат - woff. Опциональный формат - woff2.

Недопустимо использовать woff2, без использования woff.

Допустимо использовать только woff.

Крайне желательно использовать и woff и woff2.

На сайте должна быть страница для проверки используемых шрифтов (кириллица, латиница и прочие используемые символы).

В используемом шрифте не должно быть битых символов.

Общее тестирование

Проверка сайта с включенным блокировщиком рекламы

Сайт должен проверяться с включенным блокировщиком рекламы.

Элементы сайта не должны блокироваться.

Проверка кода валидатором

Следует проверять код валидатором.

Проверка кода линтером

Следует проверять код линтером.

Если при проверке кода линтером выявлены ошибки, то их следует исправить, либо сообщить об этом разработчику, ответственному за данный код.

Если при работе с линтером появляются подозрения на некорреткную настройку или баги, то об этом следует сообщить разработчику, ответственному за настройку линтера (@beliarh).

Проверка верстки стресстестом

TODO

Метатеги

Проверка метатегов

На сайте должны быть указаны метатеги (title, description, image).

Если сайт многостраничный, то метатеги должны быть указаны на каждой странице.

Если сайт одностраничный и использует share.php для шаринга, то метатеги должны быть указаны и в share.php и в Pug (HTML).

Проверка фавиконок

На сайте должна быть фавиконки.

При отсутствии фавиконки следует запросить ее у менеджера проекта.

Если клиент намеренно отказался от использования фавиконок на сайте, то это следует указать в README.md.

Функционал

Проверка шаринга

На сайте должен работать шаринг (при наличии).

Если сайт многостраничный, то должна шариться ссылка на страницу с основными параметрами (при наличии таковых).

Если сайт многостраничный, то должна шариться ссылка на share.php с требуемыми параметрами.

При шаринге в ссылку не должны попасть лишние параметры (например, UTM-метки).

Проверка и отладка шаринга осуществляется с помощью следующих инструментов:

• https://developers.facebook.com/tools/debug/
• https://cards-dev.twitter.com/validator
• https://vk.com/dev/pages.clearCache
• https://search.google.com/structured-data/testing-tool
• https://telegram.me/webpagebot

При шаринге сайта в соц. сети должны корректно отобразиться:

• Заголовок (соответствующий заданному метатегу, необрезанный, без искажений кодировки и битых символов).
• Описание (соответствующее заданному метатегу, необрезанное, без искажений кодировки и битых символов).
• Изображение (соответствующее заданному метатегу).

Ссылка шаринга должна вести на ту же страницу, которую шарили, либо на страницу, соответствующую заданной логике. В случае использования share.php ссылка должна перенаправлять на нужную страницу.

Если расшариваемая страница недоступна по прямой ссылке (т.е. переход на нее происходит по внутренней логике сайта), то следует шарить главную страницу.

Проверка переходов на страницы по прямой ссылке

Следует проверять корректность загрузки всех страниц сайта.

Также следует проверять корректность загрузки страницы с дополнительными GET-параметрами и хешем. Заданные GET-параметры и хеш при этом не должны пропадать.

Проверка переходов между страницами

Следует проверять корректность перехода между всеми страницами сайта.

Например, если на сайте несколько страниц:

• /a
• /b
• /c

То следует проверять переходы:

• /a => /a
• /a => /b
• /a => /c
• /b => /a
• /b => /b
• /b => /c
• /c => /a
• /c => /b
• /c => /c

Если какой-либо переход невозможен, то его следует игнорировать.

Также следует проверять корректность перехода по несуществующему адресу. На сайте должна быть предусмотрена страница с 404 ошибкой, либо должен срабатывать редирект на главную.

Проверка навигации с помощью истории браузера

На сайте должны корректно работать переходы между страницами с помощью истории браузера (стрелки влево и вправо рядом с адресной строкой).

Проверка интерактивных элементов

Следует проверять корректность работы интерактивных элементов:

• Слайдеры.
• Всплывающие окна.
• Аудио и видеоплееры.
• Табы.
• Тесты и опросы.
• Элементы форм.
• Валидация полей.
• Отправка форм.
• Прочие элементы, обладающие сложной логикой и неуказанные в данном списке.

Проверка свайпа и drag'n'drop

Если в каком либо блоке сайта допустимо и логично реагировать на свайп или drag'n'drop, и это поведение не реализовано, то об этом следует сообщить менеджеру проекта и разработчику.

Свайп можно использоват в мобильной и планшетной версии для перехода между слайдами или для постраничной навигации (если таковая имеется).

Drag'n'drop можно использовать в слайдерах и элементах, поведение которых предполагает (или допускает) перетаскивание.

Эффекты

Проверка анимаций

Любая анимация на сайте (переходы, смена слайдов, ховеры) должна работать плавно, без рывков и мерцаний.

Не должно быть зависаний или долгих пауз во время анимации.

Анимация однотипных элементов должна быть одинаковой на всех блоках и страницах.

На всех элементах должен быть плавный ховер.

Кроссбраузерность и кроссплатформенность

На проектах поддерживаются 2 последние версии браузеров (если не указано иного).

Сайт следует проверять в следующих системах:

• Windows
  • Chrome
  • Firefox
  • Edge
  • IE 11
• macOS
  • Safari
  • Chrome
• Android
  • Chrome
• iOS
  • Safari
  • Chrome

Адаптивность

Проверка адаптивности (десктоп)

Основные размеры мониторов:

• 1366x768
• 1280x1024
• 1440x900
• 1600x900
• 1920x1080
• 1920x1200
• 2560x1080
• 2560x1440

При проверке адаптивности следует проверять не только указанные размеры, но также и промежуточные. Причина в том, что размер окна сайта не равен разрешению монитора (за исключением полноэкранного режима). Часть пространства занимает системная панель, часть - верхняя панель браузера. К тому же иногда пользователи открывают окно браузера не на весь экран.

Проверка осуществляется в панели разработчика в режиме Responsive и начинается с наибольшего экрана (2560x1440).

Минимальные размеры до которых стоит проверять адаптивность десктопной версии - 1024px по ширине, и 550px по высоте.

Проверка адаптивности проходит по следующему алгоритму:

1. Задается размер окна 2560x1440.
2. Путем перетаскивания и постепенного уменьшения высоты (до минимальной - 550px) проверяется корректность отображения сайта.
3. Далее ширина окна немного уменьшается (на 25-50px).
4. Пункты 2 и 3 повторяются до тех пор, пока ширина окна не достигнет минимальной - 1024px.

Проверка адаптивности (планшеты и мобильные устройства)

Для начала сайт нужно проверить в мобильном эмуляторе браузера.

Как и в случае с десктопной версией проверяются не только размеры, соответствующие разрешению экрана, но также и промежуточные.

Минимальная ширина экрана до которой следует проверять адаптивность - 320px.

Проверять следует как портретную, так и альбомную ориентацию.

В альбомной ориентации размер элементов не должен сильно отличаться от портретной. Не должно быть такого, что в альбомной ориентации элементы слишком мелкие или большие.

Обязательно проверять сайт на реальных устройствах (либо в BrowserStack):

• Android
  • Любое мобильное устройство и планшет с актуальной версией системы (6+)
    • Chrome
• iOS
  • iPhone SE/7/8/X и iPad Mini/Air/Pro
    • Safari
    • Chrome

При проверке сайта на реальных устройствах страница должна корректно отображаться и скроллиться.

Доступность

Проверка кликабельной области элементов

Если у кнопки или отдельностоящей ссылки нет явно ограниченной кликабельной области, то за такую следует принять размер элемента плюс поля 5-15px.

Кликабельная область должна иметь размер минимум 20-30px по высоте и ширине (если нет явной границы).

Содержимое кнопки или ссылки должно быть по центру кликабельной области.

Для ссылок в тексте размер кликабельной области не контролируется.

Проверка навигации по сайту с помощью клавиатуры

На сайте должна корректно работать навигация с помощью клавиатуры. В частности следует проверять работу следующих клавиш (и комбинаций клавиш):

• Стрелки влево, вправо, вверх и вниз.
• Tab.
• Shift + Tab.
• Enter.
• Esc.
• Пробел.
• Shift + Пробел.
• Page Up.
• Page Down.
• Home.
• End.

Проверка выделения текста

Содержимое текстовых блоков должно корректно выделяться.

Семантика

Проверка ссылок

Ссылки - интерактивные элементы, при клике на которые происходит переход на другую страницу.

Ссылки-якоря - интерактивные элементы, при клике на которые происходит скролл к нужному месту страницы.

Все ссылки должны быть сделаны тегом <a>.

У всех ссылок должен быть указан атрибут href.

У внутренних ссылок атрибут href должен начинаться с /.

У внешних ссылок должен быть указан атрибут target="_blank".

У ссылок-якорей в атрибуте href должен быть указан хеш.

Ссылки должны быть корректными и вести на соответствующие страницы.

Проверка кнопок

Кнопки, клик по которым не ведет на другую страницу, а лишь выполняет какое-либо действие, должны быть сделаны тегом <button>.

У тега <button> должен быть указан атрибут type.

Производительность

Проверка размера загружаемых ресурсов

На сайте не должно быть чрезмерно больших файлов.

Размер изображений должен соответствовать размеру на сайте (например, для элемента размером 300x300 не должно использоваться изображение размером 2000x2000).

Не должно быть мегабайтных JPG. Такие файлы следует оптимизировать вручную с ограничением максимального качества.

Размер видео не должен быть больше 100 мегабайт (за исключением продолжительных видео и адаптивного стриминга).

Проверка производительности сайта

TODO

SEO

Проверка аналитики

Для проверки аналитики используется расширение Google Analytics Debugger.

После установки в панели расширений появится иконка GA Debug (в виде письма).

На проверяемом сайте следует открыть панель разработчика и включить GA Debug. На иконке появится надпись ON.

После чего страница перезагрузится и в консоли появится множество сообщений от расширения.

Избавиться от лишних сообщений можно, если вписать в поле Filter консоли значение Running command (все сообщения от данного расширения помещается данным префиксом). При фильтрации сообщений консоли следует быть внимательным, так как фильтруются абсолютно все сообщения, в том числе ошибки и собственные вызовы console.log.

После этого следует поочередно проверить указанные в ТЗ события.