Инструкция по тестированию сайта // Как правильно тестировать верстку

Тестирование сайтов

1. Кроссбраузерность
   
   Кроссбраузерность – это правильная верстка сайта с помощью, которой страницы сайта одинаково отображаются в различных браузерах.
   
   Мы тестируем кроссбраузерность сайтов, в следующих браузерах:
   - Chrome
   - Яндекс Браузер
   - Safari (не обязательно, не у всех разработчиков он есть)
   - Firefox
   - Opera
   - Edge
   
   У вас как у тестировщика должны быть установлены все эти устройства
   
   Как следить за актуальностью браузеров в которых необходимо тестировать? Обращаемся к статистике популярности браузеров https://radar.yandex.ru/browsers
   
   Тестировать важно в браузерах доля которых на рынке превышает 2-3%
   
   
2. Адаптивная верстка – это корректное отображение сайта на устройствах с различным разрешением экранов.
   
   Тестируем адаптивность верстки на следующих разрешениях
   
   
   1920х1080
   1366x768
   1280x720
   1024x768
   768х1024
   360х640
   
   
   Если есть конкретные устройства, на мобильных и планшетных разрешениях, лучше тестировать напрямую с этих устройств, при публикации замечаний, не забываем указывать разрешения экрана ваших устройств.
   
   К таким разрешения относятся 768х1024 и 360х640
   Инструмент для тестирования кроме браузера - http://webmark.com.ua/mobile/
   
   
3. Соответствие макета и верстки сайта
   
   Мы не требуем соответствие макета и верстки пиксель в пиксель (pixel perfefct), т.к. мы работаем в низком ценовом сегменте в сжатые сроки, кроме авторский сайтов (АС) в этих типах сайтов, можно требовать соответствие.
   
   Что касается УС и ГС, там таких высоких требований не нужно.
   
   Как это происходит? Открываем макет дизайна и сравниваем с версткой сайта. Моменты который по Вашему требуют внимания, делаем скриншот, в дизайне и на сайте и пишем комментарий в задаче.
   
   Для скриншотов рекомендуем программу LightShot
   
   
4. Проверяем кодировку сайта
   
   Кодировка должна быть UTF-8. Проверяется в браузере: Инструменты → Информация о странице. В появившемся окне должно быть написано «Кодировка: UTF-8». Эта кодировка должна использоваться для всех файлов: html, css, js. Если файлы в разных кодировках — могут быть проблемы.
   
   
5. Логотип должен быть хорошего качества, не должен размазываться на устройствах с разным PPI, лучшим решением для логотипа это формат SVG
   
   
6. Формат копирайта. Правилом хорошего тона будет использование корректного копирайта в подвале сайта. Пример — © ООО «Рога и копыта», 2010—2019
   
   
7. Проверяем орфографию текстов сайта. Сервисы для проверки
   - https://www.artlebedev.ru/orfograf/
   - http://spell-checker.ru
   
   
8. JS-валидация форм. Проверяется в Opera/Safari/Chrome: включаем javascript, не заполняем форму, жмём кнопку Отправить (в формах она может называться по разному) — должны появится уведомления о необходимости заполнить поля.
   
   
9. Правильные ссылки=«email/tel».
   У номеров телефонов должны быть ссылки tel:+70000000000
   У email адресов должны быть ссылки вида mailto:mybox@mail.ru
   
   
10. Уведомления об ошибках. Должны быть не js-alert’ом, а текстом в дизайне сайта.
    
    
11. Использование 1 тега h1 на странице.
    
    
12. Логотип в шапке является ссылкой. Логотип должен являться ссылкой на главную страницу во всех макетах, кроме макета главной. На главной странице лого не должен являться ссылкой, т.к. страница будет ссылаться сама на себя, что отрицательно сказывается на SEO.
    
    
13. Ховер-эффекты на текстовых ссылках. Все ссылки должны как-то реагировать на :hover, :active и :focus.
    
    
14. Favicon. Желательно создавать несколько favicon с включенными внутрь неё 32×32, 48×48 и 64×64 вариациями и apple-touch-icon.
    
    
15. Ссылки на внешние ресурсы. Ссылки на чужие сайты должны быть с target=«blank», желательно выделять их иконкой «внешняя ссылка».
    
    
16. В хлебных крошках отсутствуют ссылки текущую страницу.
    
    
17. Надежность верстки. На странице с контентом, пробуем добавлять и удалять содержимое — «что будет когда текста много?», «а когда мало?».
    
    
18. Наличие удобной маски для ввода телефона. Удобная маска для ввода телефона
19. Проверяем работоспособность форм. Отправки писем на тестовую почту.
    Для проверки форм используем почту 

    ===========================
    Почта для тестирования. Вход через Яндекс (yandex.ru)
    Логин: testform@sitepro.by
    Пароль: P5N3Z3I8X6bEc6mB
    ===========================
    Параметры почты:
    
    Email сайта - testform@sitepro.by
    Способ отправки - SMTP
    SMTP-сервер - smtp.yandex.ru
    Порт SMTP сервера - 465
    Защита SMTP - SSL
    Авторизация на SMTP сервера - Да
    Имя пользователя SMTP - testform@sitepro.by
    Пароль для SMTP - P5N3Z3I8X6bEc6mB
    ===========================​

20. Чек лист для тестирования - https://waygrand.com/chek-list-htmlcss
    Сделан для удобства и отслеживания выполненных работ по тестированию.