Xiper

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

Автор: Евгений Рыжков Дата публикации:

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

Этап 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. особое внимание доступности и функциональности.

Заметка

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