1 of 35

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

И немного про то, как не быть мудаком ленивым кодером

Александра Шинкевич | @neesoglasnaja

2 of 35

О чем будем говорить

  • Требования к макетам
  • Виды тестирования фронтенда
  • Чек-листы
  • Инструменты

3 of 35

Требования

к макетам

4 of 35

Чек-лист требований к макетам

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

�См. примеры хороших UI Kit

5 of 35

Дизайнер не обязан знать возможности верстки

Он мыслит и рисует на плоскости

​

6 of 35

Дизайнер неправ, если...

  • Нет UI Kit
    • Нельзя сверстать компоненты, если в дизайне это не компоненты
  • UI Kit есть, но он хреновый*
    • См. первый пункт
  • Есть кардинальные изменения UX в responsive
    • Нельзя сделать из мухи слона или наоборот
  • Макеты не по сетке, если она есть
  • “Пляшут” отступы, размеры и вообще все не очень

7 of 35

Наглядный пример хренового дизайна в коде

​

​

​

Если такое в проекте, то ЭТО ПИЗД*Ц ПРОБЛЕМА

8 of 35

Проще и дешевле исправить дизайн, чем делать хреновую верстку

Клиенту тоже можно объяснить

​

9 of 35

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

10 of 35

Хреновую верстку больно делать�и поддерживать

Никто не любит говнокод

11 of 35

Не делай хреновую верстку

Делай хорошую

12 of 35

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

  • Типографика вынесена и дублируется для отрисованных версий
  • Используются стили текста, цвета, бордеры и т.д. только из UI Kit
  • (Хотя бы) горизонтальные отступы логичны
  • Нет диких перестроений элементов или UX на разных разрешениях
  • Интерфейс делится на компоненты

​

Основные характеристики - системный, продуманный, логичный

13 of 35

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

14 of 35

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

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

15 of 35

  1. Визуальное тестирование / Чек-лист
  • Выглядит как на макете во всех разрешениях
    • Цвета, шрифты, отступы, картинки и ВСЕ ОСТАЛЬНОЕ
  • Не ломается при изменении ширины И ВЫСОТЫ
    • Не только мобильный вид, но и изменение масштаба
    • Очень широкие экраны - растянуть на два монитора по ширине
  • Компонент на нескольких страницах - проверить ВСЕ вхождения
  • Контент правильно тянется/обрезается при разном контенте

16 of 35

  1. Визуальное тестирование / Как смотреть
  1. Глазами
    • Сравнить макеты и реальность
  2. Инструментами

17 of 35

Увидел проблему в макете -

к дизайнеру и менеджеру

Пусть они знают, как ты страдаешь�Обсудить решение

18 of 35

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

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

19 of 35

2. Тестирование UX / Как смотреть

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

20 of 35

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

​

21 of 35

Во время теста ты -�злоумышленник

Делай сайту больно!

22 of 35

3. Тестирование responsive / Чек-лист

  • На всех разрешениях
    • На маленьких (320х300)
    • На больших (два монитора)
    • При зуме + и -
    • В мобильном фрейме DevTools и без
  • На реальных девайсах в основных браузерах
    • Safari для iPhone/iPad

23 of 35

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

  • Надо проверять
    • Минимум Safari для iPhone/iPad и macOS
    • Если есть сомнения, то и Chrome на яблоке
    • И Chrome под Android
  • Поворот экрана на устройстве
  • Расширенный тест при использовании “современных” свойств
    • Все, у чего неполная или частичная поддержка
    • Все под префиксами
    • Формы и интерактивные элементы
    • Модальные окошки и попапы
    • Анимации
    • Другие хаки или фоллбэки

24 of 35

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

25 of 35

Ни один DevTools не заменит реальный девайс

26 of 35

Обязательный тест перед ПР

27 of 35

Смоки-тесты для каждого ПР

  • Картинка соответствует макету на всех разрешениях
    • Если баг специфический, то и там, где он есть
    • Если есть подозрение, что где-то может не работать, то проверить
  • Ожидаемое поведение по ТЗ
    • Ховеры, транзишены и т.д.
    • Все нажимается, кликается, всплывает, вызывается, появляется и т.д.
  • Изменение ширины и высоты не ломает ничего
    • Даже если мы одновременно меняем обе оси одновременно
  • Нет ошибок в консоли
  • Доки / README исправлены

28 of 35

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

29 of 35

Видишь баг - исправь

Даже если делал не ты

30 of 35

Видишь баг - исправь

Даже если это другой блок

31 of 35

Видишь баг - исправь

Даже если кажется, что “и так сойдет”

32 of 35

Исправить долго -

баг в багтрекер и TODO в код

И говори менеджеру

33 of 35

О любой непонятной ситуации говори менеджеру

Нет, я не устану это повторять

34 of 35

Итоги

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

35 of 35

Не будь мудаком

Будь котиком!