Особенности тестирование верстки

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

• верстка может не соответствовать макету;
• верстка может по разному выглядеть в разных браузерах и ОС;
• верстка может быть не валидной;

• верстка может не соответствовать код-стайлу;
• верстка может некорректно работать в самых неожиданных местах.

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

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

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

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

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

Тестирование верстки включает в себя несколько последовательных этапов. Рассмотрим каждый из них подробнее.

Тестирование визуальной части

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

• расхождение макета и верстки в пикселях — с помощью специального софта проверяется расположение каждого элемента;
• корректность отображения верстки на разных разрешениях экрана;
• сетка — выравнивание полей и блоков по вертикали и горизонтали;
• корректность отображения текста;
• соответствие цветовой гамме.

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

Работа в разных окружениях

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

В рамках этого этапа тестируется:

• Кроссбраузерность — отображение продукта в популярных браузерах: Google Chrome, Mozilla Firefox, Safari, Internet Explorer, Opera. 
• Корректность работы на разных ОС — например в Windows, MacOS, Android, IOS.
• Корректность работы верстки на разных моделях устройств.
• Работа в условиях плохого покрытия.
• Область нажатия кнопок — на тач-устройствах кнопки будут наживаться пальцами, поэтому интерактивные элементы должны иметь оптимальный размер.
• Корректность работы при условии использования пользователем расширения AdBlock и его аналогов, поскольку он могут блокировать отображение части контента.

Проверка функциональности

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

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

Проверка надежности

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

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

Проверка форм

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

• правильность всех заголовков в формах;
• стили кнопок и полей ввода;
• наличие атрибутов, ограничивающих длину ввода каждой строки;
• наличие и корректность работы обязательных для заполнения полей;
• корректность атрибутов у разных полей ввода — мобильный телефон, email и т.д.
• корректность работы больших форм в мобильных браузерах.

В AVADA MEDIA работает выделенный QA-отдел, который занимается тестированием каждого выпускаемого продукта на разных этапах. Это дает нам возможность гарантировать корректность работы своих проектов. 

Если у вас остались вопросы, касающиеся процесса тестирования верстки — свяжитесь с нами, заполнив форму ниже.