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

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

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

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

• Обсуждение макетов до разработки
• Просить 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
  • Вечнозеленые
  • И остальные
  
• Поворот экрана на устройстве
• Расширенный тест для...
  • Неполной поддержки, префиксы
  • Формы и интерактивные элементы
  • Модальные окошки и попапы
  • Анимации
  • Другие хаки или фоллбэки
  

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

• DevTools Chrome под Android
• Мобильный Safari на macOS
• Мобильный Safari под Windows и Linux

• Ngrok — показать удаленно
• BrowserStack — для теста кроссбраузерности

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

Да

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

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

Автотесты

Почему мы не пишем тесты

• «Cложно»

Почему мы не пишем тесты

• «Cложно»
• «Дорого»

Почему мы не пишем тесты

• «Cложно»
• «Дорого»
• «Нет времени»

Почему мы не пишем тесты

• «Cложно»
• «Дорого»
• «Нет времени»
• «Нет подходящих инструментов»

Почему мы не пишем тесты

• «Cложно»
• «Дорого»
• «Нет времени»
• «Нет подходящих инструментов»
• «Для больших проектов»

Почему мы не пишем тесты

• «Cложно»
• «Дорого»
• «Нет времени»
• «Нет подходящих инструментов»
• «Для больших проектов»
• «Это не моя работа»

Автоматизированное
тестирование

1. Линтеры и статические анализаторы
2. Модульное тестирование
3. Тестирование вёрстки
4. Высокоуровневые тесты

План-капкан

1. Внедрить линтеры и статические анализаторы
   Как внедрить стандарты разработки (Youtube)
2. Найти части проекта, где чаще всего появляются баги
3. Выбрать подходящий инструмент/библиотеку
4. Встроить автотесты в процесс сборки

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

Подводя итог

• Смотри на дизайн до разработки
• Проверяй за собой после завершения работы
• Не бойся обсуждать и вносить изменения в процессе
• Будь ответственным, чёрт возьми!