Функциональная карта тестирования

страниц сайта Fondy & Frisbee

Этот документ рассказывает, на какие основные моменты стоит обращать внимание при
тестировании страниц сайтов компании и какие важные нюансы стоит учитывать в
процессе.

Содержание
Браузеры

Разрешения экрана

Устройства

Текст

Ссылки в тексте

Картинки и анимации

Кнопки

Видео

Формы

Важные нюансы
Браузеры

Браузер Тип устройства

Chrome Desktop

Firefox Desktop

Safari Desktop

Chrome Mobile, Android

Safari Mobile, iOS

Используй браузеры последних стабильных версий.

Все тесты стоит проводить только в режиме инкогнито чтобы избежать влияния кэша и
cookies на процесс тестирования.

Разрешения экрана
В этом списке учитывается только ширина экрана в пикселях, без высоты.

Разрешение Тип устройства

320 Mobile

375 Mobile

768 Tablet

1024 Laptop

1280 Laptop

1366 Laptop

1920 Desktop

2560 Desktop

Устройства
Базовый набор, который всегда должен быть под рукой.
Устройство Задача

Ноутбук/ПК на Windows/Linux с Тестирование в браузерах Chrome и

подключенным монитором с разрешением Firefox, а также эмуляция мобильных
1920x1080 или выше. устройств.

MacBook или iMac Тестирование верстки в десктопном Safari

iPhone XR или новее Тестирование верстки в мобильном Safari

Google Pixel 3a или аналогичный Тестирование верстки в мобильном

смартфон Chrome

Текст
В текстовых блоках обязательно проверяй следующие моменты.
1. На странице есть только один заголовок Н1 и логичная структура подзаголовков.
2. Подзаголовки разных разделов стилизованы похожим образом.

3. Тип шрифта соответствует макету.

4. Размер шрифта соответствует макету.
5. Цвет шрифта соответствует макету.
6. Параметр font-weight для текста соответствует макету.

7. Размеры шрифта корректны на десктопе и на мобильных устройствах.

8. В отдельных кейсах предусмотрено пошаговое уменьшение размеров шрифтов по
мере уменьшения ширины страницы.

9. Много текста. Попробуй ввести большое количество текста в блок. В этом поможет
Dummy Text Generator. Убедись, что верстка не сломалась и текст не выходит за
границу блока.
10. Мало текста. Попробуй ввести минимальное количество текста в блок (1-2
символа). Убедись, что верстка не сломалась.
11. Переносы текста работают корректно. Как обычный переход на новую строку, так и
отступ по Enter и двум Enter`ам.

Ссылки в тексте
Для ссылок характерны те же проверки, что и для обычного текста, но есть и свои
нюансы.

1. Повтори все текстовые проверки для ссылки на десктопе и мобилке.

2. Убедись, что при наведении курсора на ссылку срабатывает эффект hover.
Например, ссылка становится другого цвета или подчеркнутой.
 3. Убедись, что при клике по ссылке срабатывает эффект active. Например, ссылка
становится другого цвета или срабатывает короткая анимация.

4. В админке предусмотрена и работает функция открытия ссылки в новой вкладке.

5. В админке предусмотрена и работает функция rel="nofollow" в новой вкладке.

6. Структура ссылки. Если проверяешь уже наполненную страницу, то все ссылки на

внутренние страницы сайта должны быть формата /ru/page а не
ua.wp.fondy.dev/ru/page. Потому что если в ссылке будет присутствовать часть до
языкового слага, то при переносе на прод ссылка сломается и будет направлять
пользователя на dev-среду.
7. Логика работы ссылок. Убедись, что ссылки ведущие на другие страницы наших
сайтов открываются в той же вкладке, а внешние ведущие на другие ресурсы – в
новой вкладке.

Картинки и анимации
На эту тему есть неплохой материал на Яндекс Дзене. Также не забудь убедиться, что:
1. Визуальный размер картинки соответствует макету.
2. Картинка отображается корректно.
3. Картинка не растянута по ширине или высоте.
4. Картинка постепенно/пошагово уменьшается по мере уменьшения ширины
страницы.

5. Если вокруг картинки есть левитирующие элементы, то они не налазят на картинку

и имеют более низкий приоритет в отображении.
6. Если рядом с картинкой/иконкой есть текст, попробуй ввести большое количество
текста. Убедись, что при этом картинка не вытесняется текстом и не начинает
сжиматься.

7. Картинка имеет размер 2 мегабайта или ниже. Чем меньше – тем лучше.
Разработчики должны использовать TinyPNG или аналогичный сервис для сжатия
картинок перед заливкой на сайт.
8. Обязательно попробуй вставить картинку большого разрешения, например
2000х2000 точек, чтобы убедиться, что разработчик задал максимальные ширину и
высоту для блока с картинкой.

9. Анимация работает плавно во всех браузерах.

10. Анимированный элемент корректно накладывается на тексты/видео/картинки,
расположенные по соседству и не перекрывает их, если это не предусмотрено
макетом.

11. Анимация работает корректно после перезагрузки страницы.

 12. Анимация работает корректно при медленной прокрутке страницы (мышкой,
тачпадом, стрелками, клавишами PgUp и PgDown).
13. Анимация работает корректно при быстрой прокрутке страницы.

Кнопки
Для кнопок можно применять смесь тестов, описанных выше, так как кнопка может быть
картинкой и при этом содержит в себе текст и ссылку. Дополнительно можно рассмотреть
поведение кнопки в случае когда она привязана к форме ввода данных. В таком случае,
добавляй следующие проверки.

1. По умолчанию кнопка неактивна.

2. Кнопка становится активной только тогда, когда заполнены все обязательные поля.
3. Если после этого убрать данные из какого-то из обязательных пунктов или сделать
их невалидными, кнопка снова станет неактивной.

4. При нажатии на неактивную кнопку выводится сообщение-подсказка.

5. При нажатии на неактивную кнопку незаполненные обязательные поля
подсвечиваются красным.
6. При нажатии на неактивную кнопку некорректно заполненные обязательные поля
подсвечиваются красным и содержат подсказку.

7. Если кнопка служит для отправки формы, должна быть предусмотрена валидация
и на стороне клиента (HTML, JS) и на стороне сервера (PHP).
8. После заполнения формы в консоли нет ошибок.
9. После нажатия на кнопку в консоли не возникают ошибки.

10. Для кнопки предусмотрены эффекты hover и active.

11. Обязательно проверяй кнопки при большом количестве текста внутри. Минимум
3-5 слов.

Видео
Видеоролики обычно используются двух видов: классическое – с кнопками
воспроизведения и ползунком перемотки, встроенное – видеоролик с которым
пользователь не может никак взаимодействовать.

1. Ролик отображается корректно и не обрезан по бокам.

2. Ролик не искажается при изменении размера окна браузера.
 3. Выполняется правило автоматического воспроизведения. Например, ролик:
автоматически стартует при загрузке страницы / стартует когда появляется в
фокусе экрана / не стартует пока не нажата кнопка воспроизведения. Уточняй в ТЗ.
4. Выполняется правило цикличного воспроизведения ролика. Уточняй в ТЗ, должен
ли ролик воспроизводиться по кругу.

5. Проверяй поведение ролика при скроллинге страницы всеми доступными

способами (мышкой, тачпадом, стрелками, клавишами PgUp и PgDown).
6. Ролик должен воспроизводиться плавно, без потери кадров.

7. Если ролик имеет кнопки воспроизведения: проверь работоспособность всех

кнопок.
8. Проверь работоспособность кнопок после взаимодействия с роликом (ховер, клики,
изменение размера окна).

9. Видео корректно отображается и воспроизводится на iPhone в энергосберегающем

режиме. Важный и довольно часто встречающийся момент (!).

Формы
Самый сложный элемент для тестирования, так как состоит из множества составляющих.
При тестировании нужно проверять фронт и бэк части. Возьмем для примера форму
подписки на email-рассылку на сайте Fondy, расположенную под блогом.

Для фронт-части:
1. Используй проверки для текста.
2. Используй проверки для ссылок.
3. Используй проверки для кнопок.

Для бэк-части:
1. После подписки имейл попадает в базу данных сервиса Esputnik или CRM-систему
2. Если такого имейла в базе данных не было, то появляется новый
3. Если имейл был в базе, то по нему обновляется информация
4. Корректно передается поле "язык сайта"
5. После подписки юзер получает письмо с подтверждением на почту
6. Письмо выглядит корректно в Gmail
7. После подтверждения подписки юзер перемещается в соответствующую колонку в
Esputnik или CRM`ке.

Полезные ссылки по тестированию разных видов форм и полей:

● Логина и пароль + безопасность

● Еще про логины и пароли
 ● Числовые поля
● Еще про числа и спецсимволы

● Поиск
● Ввод даты и времени + безопасность

● О тестировании верстки в целом

Важные нюансы
Моменты, про которые лучше не забывать.

1. Обязательно проверяй консоль во время тестирования страницы или формы. В

ней не должно быть критических ошибок (красных).

2. Всегда проверяй у элементов параметр z-index. Он определяет, приоритет в

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

3. Обращай внимание на то, как проверяемый элемент взаимодействует с соседними.

Не конфликтуют ли они друг с другом.

4. Не забывай, что у большинства активных элементов (кнопки, ссылки) зачастую

предусмотрены эффекты клика и ховера. А разработчики про них забывают ;-)

5. Верстка не обязательно должна быть pixel-perfect, но и строгие расхождения с

макетом недопустимы. Старайся соблюдать баланс при проверке.

6. Не тестируй разные разрешения “в лоб”, потихоньку изменяй ширину страницы,

чтобы оценить в том числе переходные состояния верстки.

7. На больших текстовых страницах и в блоге используются якоря — текстовые

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

8. Обращай внимание на то, как элемент реализован в админке:

a. Насколько удобно его наполнять?
b. Насколько удобно идентифицировать поля внутри этого блока при большом
количестве контента внутри?
c. Понятно ли названы элементы и пресеты?
d. Есть ли подсказки по размеры картинок или максимальному количеству
текста в полях, кодам стран?
Выполнение пункта 8 даст тебе плюсик в карму со стороны копирайтеров и контентщиков,
которые будут наполнять страницы наших сайтов.

Changelog
Автор документа / Тестировщик сайтов: Александр Тоболин

Разработчики на проекте: Родион Виноградов, Андрей Сидоренко

Версия Изменения Автор

0.1 Initial Александр Тоболин