1.1.

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

Этап 1. Визуальная часть.

 нет ли заметных глазу несоответствий: поломанные блоки,

несостыковки цвета, некорректное отображение текста вокруг изображений;
 точность соответствия макета (накладка слоев в Photoshop);
 проверка сетки (вертикальные/горизонтальные выравнивания);
 при уменьшении размера окна меньше минимального по ТЗ - не
должно ничего ломаться,
 фоны не должны «плыть»;
 проверяем масштабирование страницы. В разумных масштабах
(диапазон 75-150%) страница должна выглядеть без визуальных недочетов;
 изменение размера текстового поля не должно ломать вёрстку;
 выделение полей в фокусе, выделение полей с ошибками;
 должен быть favicon.ico.

• проверка в разных разрешениях

(1024x600, 1024x768, 1152x864, 1280x800, 1280x1024, 1440x900, 1680x1050,
1920x1080):
 не должно ничего ломаться;
 не должна появляться горизонтальная прокрутка для оговоренных в ТЗ
разрешениях;
 не должны резко обрываться фоны при больших разрешениях
используем:
Firefox Меню ->Инструменты -> Web-разработка -> Адаптивный дизайн
или
Window Resizer в Chrome.

Этап 2. Доступность.

Продолжаем тестировать в том же браузере.

 выделяется ли текст в текстовых блоках;

 нажимаются ли кликабельные элементы (ссылки/кнопки);
  нажимается ли иконка логотипа;
 при наведении на кликабельные элементы курсор мышки должен
приобретать форму «pointer» или «resize», на недоступные - курсор
«default»;
 в идеале все активные элементы должны реагировать на наведение,
недоступные/неактивные - не должны;
 кликабельные элементы, назначение которых неочевидно, должны
быть снабжены подсказками (tooltip);

Этап 3. Корректная работа при занесении в поля реального текста,

надёжность вёрстки

 увеличиваем/уменьшаем количество контента для блоков где это

предусмотрено
 (блоки с описанием, статьи, меню, списки чего-либо и т.п.);
 проверка печати страницы (если было в ТЗ);
 при отключенных изображениях надписи (особенно логотип и главное меню
сайта) должны оставаться читабельными, у всех информационных картинок
должны быть подписи (атрибут alt)
 проверяется в FF через плагин Web Developer → Images → Replace Images
With Alt Attributes;
 работоспособность при выключенном JavaScript. Весь критически важный
функционал сайта должен быть доступен без JS.
 Проверяется в FF через плагин Web Developer →Disable → Disable JavaScript
→ All JavaScript.
 Проверка ввода и удаления данных. Вводится много и мало текста в
текстовые поля форм.
 Проверка корректности работы стилей. Вводится текст с абзацами и без
абзацев, со списками и картинками, таблицами и заголовками разных
уровней.
Правки содержимого страницы делаются в:
‒ FF через Firefox DevTools,
‒ GChrome через Developer Tools,
‒ ІЕ через средства разработчика F12.
Этап 4.

404-е ошибки

Нет ли 404-х ошибок. Проверяется c помощью различных онлайн сервисов и

программ, например:

W3C Link Checker https://validator.w3.org/checklink,

Xenu https://xenus-link-sleuth.en.softonic.com/.

1.2. Кросс-браузерность.

До этого этапа мы проверяли только в одном браузере на одной платформе.

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

 визуальная часть;
 доступность;
 функциональность.
Точный список браузеров уточняется у менеджера или заказчика.

Для линейки IE дополнительно:

 масштаб страницы;
 расширяемость;
 рамки у элементов в фокусе;
 не должно быть Javascript ошибок (левый нижний угол).

Проверка в IE7 делается переключением IE8 в режим IE7 (F12→Режим

обозревателя→Internet Explorer 7). Можно в IE Tester десктопной программе, но
качество проверки и достоверности хуже, или в реальных браузерах на
виртуальной машине.