Создаем план тестирования сайта

Итак, ваши дизайнеры и программисты создали фантастически красивый сайт, клиенты в восторге и готовы уже выплатить вам премию сверх уговоренного, все что вам остаётся — проверить проект перед сдачей на руки. И вот тут-то вам резко становится плохо: вы вспоминаете что на неделе вышел ещё один браузер, мобильный зоопарк пополнился тремя разрешениями, и вообще на сайте за всеми красивостями могут скрываться жуткие баги. Чтобы слегка отдышаться и взять себя в руки вы тянитесь к плану тестирования сайтов…

Преимущество чек-листа (или плана) в тестировании сайтов:

Ясность в рамках проекта
Знание о том, какие браузеры и устройства соответствуют спецификации проекта позволит сосредоточиться и сократить время и стоимость разработки.

Позволяет снизить недовольство клиента
Если вы покажете отчёт о тестировании клиенту с полным соответствием ТЗ, то сможете избежать большой головной боли.

Уверенность в развёртывании проекта
При тщательном тестировании вероятность ошибок при переносе сайта на боевые сервера снижается.

Если у вас такого плана ещё нет, то настало время отложить все остальные дела и составить себе свой собственный чек-лист для проверки сайтов.

Инструменты.

Прежде чем начать, нам понадобятся такие вещи как:

  • Баг-трекер, таблицы или блокнот, куда будем записывать все выявленные проблем;
  • Chrome DevTool или Firefox DevTool, либо firebug;
  • Что-нибудь для быстрого съёма скриншотов. PrintScreen в убунто-подобных системах по умолчанию кладёт скриншоты в папку Изображения и вполне нам подходит;
  • Какой-либо сервис для тестирования под различными браузерами. Либо множество виртуалок с необходимым зоопарком;
  • Идеально было бы иметь в наличии несколько мобильных девайсов для тестирования, либо пользоваться эмуляциями. Множество решений рассмотрено в этой статье;
  • GooglePage Speed Insights;
  • Pingdom Website Speed Test;
  • Screenr инструмент для записи действий в браузере. Записали появившийся «глюк» и сразу же отправили программистам.

Что стоит тестировать?

Образно говоря — тестировать стоит только ключевые страницы:

  • Главную;
  • Различные регистрации и ввод данных;
  • Пару внутренних страниц с различным содержанием;
  • Поиск;
  • Прочие страницы с нестандартным функционалом.

Ключевая аудитория

К сожалению, с этим вопросом тоже придётся слегка разобраться. Но сугубо для выявления технической стороны вопроса. Было б неплохо знать следующее:

  • с каких девайсов будут заходить на сайт;
  • какие операционные системы и браузеры будут у большинства;
  • какая скорость соединения ожидается (может вообще 3G, и приоритет с мобильным трафиком);
  • насколько технически подкованной будет аудитория.

Заранее обдумайте лимиты на тестирование

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

  • Заложите расходы на тестирование в бюджет проекта;
  • Заложите время на тестирование в проект;
  • Разумно оцените объёмы работы, и не делайте то, чего не требуется.

Инструмент для ловли жуков:

Не важно, каким инструментом для баг-трекинга вы пользуетесь, хоть excell таблицей. Главное чтоб вы могли в нем делать следующее:

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

Как описывать найденные ошибки

Будьте конкретны
Не надо много слов, чётко описывайте проблему. Если ошибок несколько — то для каждой новый отчёт.

Покажите что вы делали
Шаг за шагом опишите свои действия. Если не можете описать, запишите видео, используя Screenr

Ограничьте местоимения.
Вместо «Я нажал её и окно не появилось» используйте: «Я нажал на кнопку «отправить» и окно с надписью «регистрация» не загрузилось» —

Прочитайте что вы написали
Это имеет смысл? Вы думаете что понятно описали проблему? Вы сможете повторить ошибку из своего описания?

Составим свой первый план

Итак, вы уже многое знаете и начинаете понимать что к чему, но так и не увидели ни одного рабочего плана в этой статье. Настала пора написать его самому! Берём чистый лист бумаги и начинаем творить:

Бюджет: 

  • 10 дней отводим на тестирование;
  • для тестирования главной отводим полтора дня.

Время:

  • Полное первоначальное тестирование в течение одного дня, результаты которого отдаём программистам в тот же день;
  • три дня на исправление ошибок;
  • полдня на повторное тестирование найденного.

Объем работы:

  1. Полная поддержка:
    • Windows 8: IE 10+, Chrome (latest), Firefox (latest), Safari (latest),
    • Mac OS X Mavericks: Chrome (latest), Firefox (latest), Safari (latest)
    • iPhone 4 / 5, iPad 2, Asus VivoTab Smart
  2. Частичная поддержка
    • Windows 7: IE 9+, Chrome (latest), Firefox (latest), Safari (latest),
    • Windows XP: IE 8, Chrome (latest), Firefox (latest), Safari (latest)
  3. Полная поддержка адаптивного дизайна
  4. 85-100 на счётчиках Google’s PageSpeed Insights и Pingdom’s Website Speed Test

Что такое полная и частичная поддержка?

Полная поддержка

  • весь контент читабелен;
  • все функции работают;
  • отклонения от утверждённого дизайна минимальны.

Частичная поддержка

  • Весь контент читабелен;
  • навигация работает;
  • прочая функциональность не мешает нормальной работе;
  • при ухудшении дизайна, содержание не страдает.

Продолжаем дальше заполнять наш план тестирования. Своего рода вторая страница:

  • Дизайн в Windows 8: IE 10+ не изменился, или отклонения от утверждённого шаблона минимальны;
  • Дизайн в Windows 8: Chrome (latest) не изменился, или отклонения от утверждённого шаблона минимальны.

И так все необходимые браузеры перечисляем. Лучше мы потом полюбуемся на ровные вычеркнутые ряды, чем что-то пропустим.

На главной странице обычно находится много разных функциональных элементов: меню, поиск, слайдеры и прочее. И все их стоит занести в план тестирования.

Поиск

  • нажатие или касание на форму поиска, заполнение её и нажатие на иконку поиска отправляет данные в форму

Навигация

  • наведение курсора на пункт меню подсвечивается белым цветом
  • нажатие на пункт меню переходит на соответствующую пункту страницу

Карусель

  • Нажатие на стрелки влево/вправо переводит на следующий/предыдущий слайды
  • нажатие на элементы пагинации переводит на соответствующий элементу слайдеры
  • проверка слайдов на мобильных устройствах

Тексты:

  • нажатие на кнопку «далее» переводит на новую страницу с соответствующим текстом.

Таким же образом описываем все остальные элементы функционала на главной странице. При наведении курсора текст меняет цвет? В чек-лист. Иконки меняют прозрачность? В чек-лист. Есть трансформация объектов? В чек-лист. Трудно? А вы как хотели?!

Кстати, все функциональные элементы придётся проверить для каждого браузера из списка «полная поддержка», и для каждого из «частичная поддержка». И все найденные баги придётся устранить в соответствии со списками. А есть ещё тестирование на адаптивность

В конце не забудьте проверить PageSpeed Insights и Pingdom’s Website Speed Test. Оценки больше 85? Отлично! Если нет, то добавьте в чек-лист полученные от pagespeed советы.

Как оценить степень регрессии дизайна от браузера к браузеру

Можно на глаз. Но так вы никогда не узнаете что очередной браузер переименовал ваш CSS класс или дописал с десяток новых свойств. К счастью хорошие люди сделали тесты для выявления визуальных различий между двух версий, которые подчёркивают потенциальные проблемы. Вот несколько таких ресурсов:

В заключение

Тестирование, это важный процесс, который зачастую остаётся в стороне, хотя должен учитываться ещё на этапе проектирования. На тестирование сайта должны быть заложены время и деньги. В ТЗ должны быть указаны формальные критерии, в соответствие с которыми оно будет проводиться. Да, это нелёгкий и весьма нудный процесс, и правильно подобранные инструменты способны сделать вашу жизнь немножечко легче. Зато результаты вас поразят буквально с первого же проекта, а клиенты перестанут звонить в воскресенье с воплем: «Почему оно не работает?!»