Тестирование сайта: найти поломки раньше, чем их найдут клиенты

Как работаем

Что на руках

• Ключевые сценарии работают на всех заявленных устройствах
• Заявки доходят во все каналы, и это проверено, а не предполагается
• После выкладок проводится регрессия, а не выборочный взгляд

• 01
  Список сценариев, которые проверяем
• 02
  Отчёт о находках с приоритетами и шагами воспроизведения
• 03
  Результаты по устройствам и браузерам
• 04
  Замеры скорости по типам страниц
• 05
  Повторная проверка после исправлений

Что именно проверяем

Список сценариев составляется под ваш сайт, но костяк одинаков: это всё, что приносит деньги или теряет их.

• Заявка с формы: заполнение, проверка полей, отправка, страница благодарности, письмо на почту, сообщение в мессенджер или CRM, срабатывание цели в аналитике. Семь точек, и ломается чаще всего последняя.
• Корзина и заказ: добавление, изменение количества, удаление, промокод, расчёт доставки, оформление без регистрации, подтверждение.
• Оплата в тестовом режиме: успешная, отменённая, прерванная на полпути. Последние два сценария проверяют редко, а ломаются они чаще всего.
• Регистрация и вход: восстановление пароля, вход через соцсети, личный кабинет.
• Поиск и фильтры: пустая выдача, сброс, сочетания фильтров.
• Телефон, мессенджеры и карта — кликабельность на мобильном.
• Страница 404 и ошибки: что видит человек, попавший на несуществующий адрес.

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

Браузеры, устройства и то, что видно только на них

Набор устройств подбирается по вашей аналитике, а не по общему списку: проверять нужно то, чем реально пользуются посетители.

• Реальные телефоны, а не только режим эмуляции. Часть проблем — залипание прокрутки, поведение клавиатуры, автозаполнение, работа камеры при загрузке фото — воспроизводится только на устройстве.
• Медленная связь. Проверка на ограниченной скорости показывает, что видит человек в первые секунды: часто это пустой экран.
• Разные браузеры, включая встроенные в приложения: переход из мессенджера открывает сайт в его собственном браузере, и там ломается своё.
• Ориентация экрана и крупный системный шрифт — частая причина разъехавшейся вёрстки у пожилой аудитории.
• Старые устройства, если они заметны в аналитике: современная вёрстка на них может не работать вовсе.

По итогам вы получаете не «всё хорошо», а таблицу: сценарий, устройство, браузер, результат. С такой таблицей разработчик чинит адресно, а не ищет проблему заново.

Проверка перед запуском: отдельный чек-лист

Запуск — единственный момент, когда ошибку видно сразу всем. Поэтому перед ним прогон полный и по списку.

• Все сценарии целиком, включая редкие ветки: отменённая оплата, повторная отправка формы, заказ из другого региона.
• Коды ответов по всем страницам: ни одного случайного 404 и 500, переадресации ведут куда задумано.
• Содержимое в ответе сервера: текст и заголовки приходят роботу, а не появляются после скриптов.
• Настройки индексации: тестовый запрет снят, карта сайта актуальна, служебные разделы закрыты. Забытый запрет индексации после переноса с тестовой площадки — классика, стоящая месяцев.
• Формы и уведомления проверяются тестовой отправкой во все каналы.
• Аналитика: счётчик стоит, цели настроены и срабатывают.
• Скорость и мобильная версия на реальных устройствах.
• Сертификат, почта, переадресация с версии без www и с http на https.

Отчёт отдаётся до запуска, а не после: смысл проверки в том, чтобы исправления успели войти в релиз.

Регрессия: проверка того, что не трогали

Самые дорогие поломки происходят не в том блоке, который меняли, а в соседнем. Регрессия — это короткий повторяемый прогон после каждой выкладки.

• Короткий список из ключевых сценариев: заявка, корзина, оплата, вход. Десять минут работы, которые ловят большинство последствий.
• Одинаковый порядок каждый раз: так сравнимы результаты и видно, когда именно что-то сломалось.
• Проверка на мобильном обязательно: именно там чаще всего и проявляется последствие правки вёрстки.
• Коды ответов и скорость на нескольких типовых страницах.
• Фиксация результата с датой и версией — чтобы при проблеме можно было точно сказать, после какой выкладки она появилась.

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

Как выглядит отчёт и что с ним делать

Отчёт, по которому нельзя работать, бесполезен. Поэтому каждая находка описывается так, чтобы разработчик мог её воспроизвести, не задавая вопросов.

• Шаги воспроизведения по пунктам, от открытия страницы до момента поломки.
• Что ожидалось и что получилось — две строки, из которых понятна суть.
• Где именно: адрес страницы, устройство, браузер, версия, размер экрана.
• Доказательство: снимок экрана или запись, при ошибке в коде — сообщение из консоли.
• Приоритет по влиянию на деньги: блокирующее оформление заказа выше, чем съехавший отступ в подвале.
• Предполагаемая причина, если она видна — это экономит время разработчика.

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

Доступность интерфейса: проверка, которую обычно пропускают

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

• Навигация с клавиатуры: можно ли дойти до кнопки заказа без мыши и видно ли, где сейчас фокус.
• Контраст текста — светло-серый на белом нечитаем не только людям со слабым зрением, но и всем на солнце.
• Подписи к полям форм, а не только подсказка внутри поля, исчезающая при вводе.
• Альтернативный текст у изображений, несущих смысл: он же помогает поиску.
• Увеличение шрифта в системе на 150% — вёрстка не должна разъезжаться.
• Понятные сообщения об ошибках в формах, а не красная рамка без объяснения.

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

Вопросы