Тестирование фронтенда для разработчиков

Очевидные очевидности

• Требования к макетам и прототипам
• Виды тестирования фронтенда
• Как тестировать
• Чем тестировать

Перед началом работы

• Обсуждение макетов ДО разработки
• Просить UI Kit
  • (!) Элементы отрисованы для всех версий
  • Шрифты и типографика
  • Цвета, гадиенты, тени и скругления блоков
  • Кнопки и элементы форм
  • Иконки

Плохой дизайн в коде

П****Ц

Хороший UI Kit в коде

Хороший дизайн

• Типографика для всех версий
• Используются стили текста, цвета и т.д. только из UI Kit
• Нет диких перестроений при RWD
• Интерфейс делится на компоненты

Системный, продуманный, логичный

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

Ручное тестирование

1. Визуальное соответствие макету
2. Поведение (UX)
3. Responsive
4. Кроссбраузерность и кроссплатформенность
   • Пункты 1-3 в других браузерах и на других устройствах
   

1. Верстка: чек-лист

• Выглядит как на макете во всех разрешениях
• Не ломается при изменении ширины И ВЫСОТЫ
• Проверить ВСЕ вхождения
• Тянется/обрезается при разном контенте

1. Верстка: чем проверять

• Глазами
  • Сравнить макеты и реальность
  
• Расширения в браузере
  • PerfectPixel накладывает картинку на страницу
  • Grid Ruler удобно проверять выравнивание
  

2. Тестирование UX: чек-лист

• Работает как задумано
• Интерактивность на ховеры
• Не ломается/обрезается ВНЕЗАПНО
• Нет ошибок в DevTools
• Интерфейс не зависает и не тормозит

2. Тестирование UX: чем проверять

• Глазами
  • Все должно работать по ТЗ (не по ТЗ тоже должно работать)
  
• Руками
  • Кликать, водить курсором, тыкать пальцем
  • Все возможные и невозможные сценарии
  • Даже есть кажется, что так не будут делать (БУДУТ!)
  
• Доступность
  • Перемещение по табам
  

2. Тестирование форм: чек-лист

• Успешная отправка без ошибок
• Валидация и сообщения об ошибках
• Прелоадеры, debounce, не отправить дважды и т.д.
• Если пошаговая — проверять все

4. Кроссплатформенность и кроссбраузерность

• Windows и MacOS/iOS
  • Вечнозеленые
  • И остальные
  
• Поворот экрана на устройстве
• Расширенный тест для...
  • Неполной поддержки, префиксы
  • Формы и интерактивные элементы
  • Модальные окошки и попапы
  • Анимации
  • Другие хаки или фоллбэки
  

Как отлаживать на девайсах

• Ngrok - показать удаленно
• DevTools Chrome под Android
• Мобильный Safari на macOS
• Мобильный Safari под Windows и Linux
• BrowserStack для теста кроссбраузерности
• Ghost Lab - мультиплатформенная отладка

И это каждый раз проверять?!

Да

Минимальный набор тестов

• Картинка соответствует макету на всех разрешениях
• Ожидаемое поведение по ТЗ
• Изменение ширины и высоты не ломает ничего
• Нет ошибок в консоли и DevTools
• Проверено в вечнозеленых мобильных и десктопах

А если нашел баг не там, где сейчас делаешь?

Подводя итог

• Смотри на дизайн ПЕРЕД работой
• Проверяй за собой ПОСЛЕ работы
• Не бойся обсуждать и вносить изменения в процессе
• Будь ответственным, черт возьми!