Как тестировать верстку?

Question

[web-quest3]

Как вы тестируете верстку? Какими сервисами пользуетесь? Ну, с кроссбраузерностью понятно, но слышал, есть какие-то еще тесты на валидность. Может быть есть что-то еще?

Comments

[Ярослав Иванов]

Глазами тестирую.

[mydarck]

Ярослав Иванов: Вопрос был не чем, а как. Если есть желание съехидничать, то хотя бы делайте это правильно.

[mydarck]

Вот хорошая ссылка для тестирования

Answer 1

[Дмитрий]

1. Pixel perfect
2. Валидность кода
3. PageSpeed Insights
4. GTmetrix
5. Pingdom Website Speed Test
6. Проверка адаптивности
7. Проверка для Retina (srcset, svg, иконочные шрифты)

Comments

[zooks]

И чем вы ретина-дисплей проверяете?

[Дмитрий]

если есть устройство с ретина-дисплей то на нем, если нет в firefox увеличивая масштаб 200% и 300%. Создайте 3 изображания (1 - 100x100, 2 - 200x200, 3 - 300x300) и запишите вот таким образом и потестируйте в firefox.

[Дмитрий]

использую srcset

Answer 2

[Роман]

Статья habrahabr.ru/post/114256

1. Проверка соответствия макету.
   Допускается расхождение до 5px для текста. Разрешены и даже приветствуются правки размеров и расположения криво нарисованных блоков (разница размерах в 1-2px на разных страницах).
   В качестве инструмента можно использовать Pixel Perfect (см. статью).
   
   
2. Кроссбраузерность. Корректное отображение в браузерах, указанных в задаче на тестирование.
   
3. Проверка на всех необходимых разрешениях
   Всегда следует проверять, как страница реагирует на уменьшение масштаба, таким образом, эмулируя просмотр на устройстве с большим экраном.
   Особенно это актуально, если на странице есть фоновая картинка, которая должна быть на всю область экрана. Это позволяет проверить, что она не вставлена с обрубками.
   
   
4. Проверка на всех необходимых устройствах.
   Даже сайты, не адаптированные под мобильное устройство, должны на нем более-менее корректно смотреться. На мобильных устройствах следует проверять хотя бы в двух браузерах.
   Интересный сервис: webmark.com.ua/mobile
   Можно средствами браузера.
   Адаптивная верстка - рекомендую бутстрап, getbootstrap.com
   
   
5. Отсутствие js-ошибок. В консоли браузера не должно выдаваться ошибок.
   
6. Валидация html - validator.w3.org/. Наличие предупреждений (Warning) при проверки возможно. Ошибок не должно быть.
   
7. Валидация css.
   
8. Корректная работа при вбивании реального текста, надёжность вёрстки.
   
9. Оптимизация скорости загрузки.
   https://gtmetrix.com/
   https://developers.google.com/speed/pagespeed/insights/
   
   
10. Наличие Win/Mac/Linux-аналогов шрифтов. При использовании нестандартных шрифтов (определить подгрузку таких шрифтов - также в консоли на закладке Network), проверить, что в случае их незагрузки сайт нормально смотрится.
    Как эмулировать их незагрузку? Например, если шрифт грузится с google fonts, закрыть к нему доступ через файл hosts. Сайт будет смотреться иначе, но ничего не должно слишком сильно разваливаться.
    
    
11. Label и input/select должны быть слинкованы
    
12. Проверка корректности заполнения форм на JS. В верстке формы должны валидироваться: обязательные поля подсвечиваться, поле email проверяться на корректность и т.п. Поля для ввода телефона должны иметь маску (если телефон, скорее всего, российский), возможно маски на другие поля (дата, время).
    
    
13. Переключение между элементами форм по кнопке tab
    
14. Лого на внутренних страницах должно вести на главную страницу (должно быть ссылкой)
    
15. Интерактивность соответствующих элементов - реакция на наведение и нажатие
    
16. Skype-плагин не должен ломать вёрстку
    
17. Ресайз textarea не должен ломать вёрстку
    
18. Ссылки на сторонние сайты должны быть с target=”_blank” (открываться в новой вкладке)
    
19. Проверка орфографии, в том числе автоматизированными средствами (Word'ом)
    

Comments

[Mike]

Вы же об этом материале? :)
https://habrahabr.ru/post/114256/

... Например, если шрифт грузится с google fonts...

Шрифт из googl'а может быть установлен в системе, и такой трюк не прокатит.
Другой вариант: поочередное глобальное определение применяемых в верстке шрифтов, прямо через font-family в body, и анализ на "развал/схождение"

Answer 3

[Сергей Белов]

В Яндексе мы разработали два инструмента:
- gemini для модульного тестирования вёрстки скриншотами; сравниваются отдельные блоки с эталонными изображениями; есть отдельный удобный инструмент для снятия и обновления эталонов — gemini-gui
- hermione для функционального тестирования

Оба инструмента используют WebDriver API, при помощи которого ходят в Selenium Server или Appium. Умеют обходить проблемы стабильности (повторное выполнение тестов), запускать тесты максимально параллельно (для скорости; гибко настраивается), строить понятные отчёты.

Этими инструментами уже тестируются SERP (страница поисковой выдачи), Яндекс Картинки, Яндекс Видео, Яндекс Новости и другие сервисы.

Comments

[Андрей Швед]

Сергей, спасибо за предложенный вариант решения!

Answer 4

[Котик Антон]

https://habrahabr.ru/company/2gis/blog/277457/

Answer 5

[xmoonlight]

Список линков
1. Проверка скорости ответа сервера и правильности отображения контента:
2. Проверка соответствия стандартам W3C:
3. Проверка сжатия контента (включая изображения и т.д.):
4. Проверка кэширования контента (включая изображения и т.д.):
5. Проверка SSL
6. Проверка SEO

Comments

[zooks]

Верстка и бекенд - это разное.

Answer 6

[HamSter]

Продублирую ответ:

Проверяйте сайт по всему чему только можно:

Скорость: pagespeed + gtmetrix

Валидация как HTML так и CSS

Кроссбраузерность: browserstack
Особое внимание к mac os, iphone, ipad!

На вместимость контента, например, huifikator

Pixel Perfect - расширение для chrome

Проверка на SEO: sitechecker.pro или др. ресурсы

Answer 7

[Александр Коновалов]

В браузерах проверил, все отлично, все работает - ок
HTML на ошибки проверил - ок
CSS на ошибки проверил - ок

Comments

[Александр Коновалов]

Забыл еще адресок дать - https://developers.google.com/speed/pagespeed/insi...

[sergey]

насчет CSS валлидатора поспорил бы, при подключении элементарного slick-slidera вываливает полторы сотни ошибок и предупреждений, я уже не говорю о конфликте свойств CSS2/CCS3 - начнешь править - проект никогда не сдашь:)

[Александр Коновалов]

SM: на такое надо, конечно же, забивать. Вендорные свойства он не понимает

[sergey]

Александр Коновалов: вот этот CSS валидатор куда приятнее: https://jigsaw.w3.org/css-validator/

[HamSter]

SM: плагины не обязательно смотреть, главное, чтобы основные стили были в порядке!

[sergey]

HamSter: да это ясно, я тому кто вопрос задавал написал

Answer 8

[Вов Вов]

https://readymag.com/tehnovedro/488569/5/
А вот тесты на соответствие дизайну

Answer 9

[Тирион Ланнистер]

https://validator.w3.org/