Чек-лист тестирования landing page

Лендинг (landing page, посадочная страница) - это веб-страница конвертирующая посетителей сайта в потенциальных покупателей. Проще говоря основная цель лендинга продавать услугу или товар.

Примеры лендингов:

Как работает лендинг

Пользователь попадает на посадочную страницу через рекламу, прямую ссылку и т.п.
Пользователь жмет на кнопку "Оставить заявку", "Купить товар" и т.п.
Попадает на форму заполнения личных данных. Может включать в себя сбор информации по услуге или продукту, которые ищет пользователь. Например, пользователь делится информацией о квартире с клининговой компанией.
Заполняет форму или отказывается и уходит. Отказ это сигнал, что нужно искать проблему отказа от услуги или товара.
Сохранение данных от клиента.
Связь с клиентом.

Чтобы быть честным, нужно сказать что есть лендинги, которые работают иначе. Таких страниц много. Например, Squeeze Page предназначены для сбора адресов эл. почты у пользователей, а после на эти адреса рассылаются рекламные письма. Или страница "404 - страницы не найдена" может также служить для сбора данных или пожеланий потенциального покупателя.

Но в целом суть одна: говорим что мы можем дать посетителю то, чего он желает взамен на его персональные данные.

Чек-лист тестирования

Это общий чек-лист. Что-то может быть актуальным, а что-то можешь предложить, как фичреквест. Погнали:

Техническое задание и визуальные гайды. В первую очередь идем по требованиям. Вот чек-лист тестирования тех. задания. Тут найдешь полезные расширения для веб-тестирования. А тут можно почитать про тестирование веб-сайтов в целом.
Кроссбраузерность. Проверяем, что страница отображается и функционирует как ожидается на всех популярных браузерах.
Адаптивность. Проверяем, что лендинг отображается корректно на разных размерах экранов и на разных платформах: ПК, смартфон, планшет. Особенно отмечу проверку изменения ориентации на телефоне.
Якоря. Логические блоки должны отображаться по прямой ссылке. Например, URL#contacts ведет к блоку "Контакты", а URL#specialists к блоку с мастерами сервиса.
Поп-ап. Часто заявки собираются в сплывающих окнах. Нужно проверить, что они появляются, корректно отображаются на разных экранах, корректно отрабатывают нажатия. Часто бывает, что один и тот же поп-ап, вызванный из разных логических блоков, ведет себя по-разному (где-то не работает кнопка отправки заявки, где-то поп-ап появляется под картинками и т.п.)
UTM-метка. Проверить, что в URL зашивается информация о пользователе. Например, твой сайт santehnik.org. Пользователь нашел сайт через выдачу яндекса. В настройках яндекс директа задали рекламную кампанию "Новогодняя акция 2022", и тогда ссылка будет иметь вид: santehnik.org?utm_campaign=new_year_sale. В итоге после парсинга UTM-меток, можно узнать больше информации о своих потенциальных клиентах, в том числе о том что переход был по акции.
Полям ввода задан атрибут autocomplete. Этот атрибут помогает браузерам правильно идентифицировать поле и помочь пользователю его быстро заполнить из сохраненных персональных данных. Например, если у поля autocomplete="email", то браузер предложит подставить в него сохраненную почту.
Телефонные ссылки, почтовый агент, мессенджеры. Убедиться, что для телефона и почты использованы ссылки tel и mailto соответственно. Для мессенджеров указаны корректные аккаунты.
Заказ услуги/товара или обратная связь. Тут нужно проверять 2 части: фронт и бэк. Если обобщить то, на фронте валидацию вводимых данных (пустые поля, формат телефона и почты и т.п.) и уведомление в духе "Мы получили ваше обращение и свяжемся с вами через...", на бэке добавление заявки в базу данных (корректность отображения текста, не должно быть кракозябров, указание таймзоны клиента и т.д.), проброс в CRM и т.п.
Куки. Проверить, что в куках запоминаем выбор языка или региона пользователя и т.п.
Минификация. Важно сжать все что можно: картинки, css-стили, js-скрипты. Это нужно для того, чтобы лендинг загружался быстрее. Почитать можно, например, про минификацию css-стилей.
Ошибки в консоли. Параллельно с проверкой кликабельности, скроллинга или отправки данных на сервер, открой dev-tools (вкладка console) и смотри в консоль. Часто можно увидеть js-ошибки. Еще можно поглядывать на вкладку Networks, там найдешь проблемы с сетевыми запросами.
Смена языка, региона, шрифта, цветовой темы и т.п. Советую проверить с очисткой кэша при рефреше страницы. При обновлении настройки не должны слетать, потому что прописываются в куках.
Подключение скриптов, шрифтов, стилей и картинок. Проверить, что в html-разметке есть их подключение, что в сетевых запросах все ресурсы успешно загружены. И очень критично проверить, что подключены скрипты аналитики (яндекс метрика, гугл аналитика и т.д.).
SEO-теги. Это в зоне ответственности seo-шников, но мы то ответственные ребята и хотя бы одним глазом глянем. Например, важно в html-разметке указать тег meta с атрибутом name="description" являющейся аннотацией сайта, которая отображается в поисковой выдаче. Почитай тут про сео-теги.
Поиск битых ссылок. Также в зоне seo-шников, но проверить ссылки на лендинге прокликав их - несложно. Редко их бывает много.
Проверка переходов. Если на сайте есть переходы на блоки, анимация и прочие бродилки, то нужно убедиться, что все они доступны и имеют ожидаемые переходы.
Многократные нажатия на кнопку отправки. Очень важно проверить, что клики на кнопку "Отправить заявку" не посылает кучу запросов без завершения предыдущих. Самое лучшее решение блокировать кнопку после клика и до выполнения запроса.
Убедиться, что переключились на продовый сервер. Нередко бывает, что во время разработки и тестирования лендинг отсылает заявки на тестовый сервер, а после раскатки в прод забывают переключить сбор заявок на прод.
Перфоманс тестирование. Чаще всего проводят для лендингов крупных сервисов, куда потенциально может заходить миллионы пользователей.

Как работает лендинг

Чек-лист тестирования

Полезные ссылки