Практический чек-лист для кроссбраузерного тестирования

Макет может выглядеть идеально в Chrome, но ломаться на бюджетном Android-смартфоне или на старом ноутбуке с масштабом 125%.

Не относитесь к тестированию как к расплывчатому финальному этапу. Относитесь к нему как к повторяемому чек-листу.

Тестирование каждого устройства и каждого браузера отнимает слишком много времени. Вам нужна компактная матрица.

Выберите самое необходимое:

  • Один Chromium-браузер на десктопе
  • Одну среду Safari
  • Одну среду Firefox
  • Один Android-смартфон
  • Один iPhone

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

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

Начните со структуры:

  • Проверьте главную страницу, контентные страницы и формы.
  • Изменяйте размер окна от широкого десктопа до узких мобильных разрешений.
  • Увеличивайте масштаб, чтобы проверить, не переносятся ли кнопки и не обрезаются ли заголовки.
  • Следите за появлением горизонтальной прокрутки или липких хедеров, которые перекрывают контент.

Затем протестируйте взаимодействия:

  • Прокрутите страницу сверху вниз.
  • Открывайте меню и вызывайте модальные окна.
  • Перемещайтесь по странице с помощью клавиши Tab.
  • Протестируйте формы с текстовыми полями, выбором даты и загрузкой файлов.
  • Проверьте, не ломает ли автозаполнение ваш макет.

Протестируйте JavaScript-компоненты:

  • Проверьте аккордеоны, вкладки и подсказки поиска.
  • Следите за проблемами с таймингами, когда скрипт не успевает прикрепиться к кнопке.
  • Протестируйте перезагрузку страницы и поведение кнопки «Назад».

Наконец, проведите стресс-тестирование пределов:

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

Лучший чек-лист — скучный. Он должен легко вписываться в процесс релиза в виде простых полей «пройдено» или «не пройдено».

Каждый раз, когда баг просачивается в продакшн, добавляйте его в свой список. Ценность чек-листа проявляется тогда, когда он помнит то, что забыла ваша команда.

Source: https://dev.to/graceholloway_/a-practical-cross-browser-testing-checklist-1p6a