Тестирование верстки. Чеклист.

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

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

Тестируем в каком-то адекватном браузере (например, в Firefox).

1. нет ли заметных глазу косяков: поломанные блоки, не состыковки цвета и т.п.;
2. точность соответствия макета: делаем накладку в photoshop или используем pixel perfect;
3. проверяем сетку (вертикальные/горизонтальные выравнивания). Часто это упускается в формах. Если сетка кривая, но верстка соответствует дизайну, это вопрос можно обсудить с дизайнером/заказчиком;
4. проверяем в разных разрешениях:
   — не должно ничего ломаться;
   — не должна появляться горизонтальная прокрутка для оговоренных в ТЗ разрешениях;
   — не должны резко обрываться фоны при больших разрешениях.
   Можно переводить экран в разные разрешения или можно использовать инструменты тестирования (например, в Firefox Меню -> Инструменты -> Веб-разработка -> Адаптивный дизайн;
5. уменьшаем размер окна меньше минимального по ТЗ — не должно ничего ломаться, фоны не должны «плыть»;
6. проверяем масштабирование страницы. В разумных масштабах (мы ограничиваемся диапазоном 75-150%) страница должна выглядеть без визуальных косяков;
7. ресайз textarea не должен ломать вёрстку;
8. нормально ли подсвечиваются поля в фокусе;
9. нормально ли подсвечиваются поля с ошибками.

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

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

1. выделяется ли текст в текстовых блоках;
2. кликаются ли кликабильные элементы (ссылки/кнопки);
3. устанавливается ли фокус в поля форм;
4. кликабильные элементы должны иметь указатель «курсор», перетаскивающиеся — «лапка» или «ресайз», активные/недоступные — курсор default;
5. в идеале все активные элементы должны реагировать на наведение, не доступные/неактивные — не должны;
6. клик по label должен переводить фокус в связанное поле;
7. кликабильные элементы, назначение которых не очевидно должны быть снабжены подсказками (title);
8. лого на главной ссылкой быть не должно, на всех внутренних должно;
9. проверка печати страницы (если было в ТЗ).

Этап 3. Расширяемость.

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

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

Этап 4. Соответствие стандартам.

Для проверки надежней использовать валидаторы на W3C (HTML и CSS).

1. HTML не должен содержать ошибок/предупреждений. В качестве исключений можно оставить обоснованные ошибки (например, target=_blank);
2. в CSS обращаем внимание только на синтаксические ошибки;
3. в CSS не должны присутствовать правила и хаки для IE (такие должны быть вынесены в отдельные стилевые файлы);
4. микроразметка должна быть корректной (проверяем в Rich Snippets Testing Tool от Google и Валидатор микроразметки от Яндекса). В Google должны срабатывать rich snippets (для поддерживаемых схем).

Этап 5. 404-е запросы.

Нет ли в верстке 404-х запросов (firebug).

Этап 6. Javascript.

1. не содержит ли Javascript ошибок (firebug);
2. работает ли Javascript функционал согласно ТЗ;
3. не остались ли в коде console.log().

Этап 6. Код.

1. кодировка должна совпадать с указанной в ТЗ;
2. не должно остаться закомментированных участков в HTML, CSS, Javascript.

Этап 7. Кроссплатформенность/кроссбраузерность.

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

1. визуальная часть;
2. доступность;
3. функциональность.

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

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

Для планшетников дополнительно:

1. портретный/альбомный режимы;
2. особое внимание доступности и функциональности.

Заметка

Это базовое тестирование, которое может быть расширено техническим заданием (например, тут не учтено удобство работы с клавиатуры, или тестирование с отключенными картинками и/или скриптами).