QUALITY ASSURANCE

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

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

QUALITY ASSURANCE

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

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

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

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

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

Виды тестирования верстки

QUALITY ASSURANCE

Виды тестирования верстки QUALITY ASSURANCE

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

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

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

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

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

Этапы тестирования верстки

QUALITY ASSURANCE

Этапы тестирования верстки QUALITY ASSURANCE

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

Тестирование верстки в AVADA MEDIA

Профессиональная разработка

Тестирование верстки в AVADA MEDIA Профессиональная разработка

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

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

Свежие работы

Создаем космические проекты

Свежие работы

Лучшим подтверждением нашей квалификации и профессионализма являются истории успеха наших клиентов и различия в их бизнесе до и после сотрудничества с нами.

Наши клиенты

Что о нас говорят

Наши клиенты Что о нас говорят

Успешные проекты создаются только командой

Наша команда

Успешные проекты
создаются только командой Наша команда

Photo 11
Photo 10
Photo 9
Photo 8
Photo 7
Photo 6
Photo 5
Photo 4
Photo 3
Photo 2
Photo 1
Photo 12

Свяжитесь с экспертами

Появились вопросы?

Свяжитесь с экспертами Появились вопросы?

+
@
Согласие на обработку персональных данных

Пользователь, оформляя заявку на сайте https://avada-media.ua/ (далее – Сайт), соглашается с условиями настоящего Согласия на обработку персональных данных (далее — Согласие) в соответствии с Законом Украины «Про захист персональних даних». Принятием (акцептом) оферты Согласия является отправка заявки с Сайта или заказ у Оператора по телефонам Сайта.

Пользователь дает свое согласие на обработку своих персональных данных со следующими условиями:

  1. Данное Согласие дается на обработку персональных данных как без, так и с использованием средств автоматизации.
  2. Согласие распространяется на следующую информацию: ФИО, телефон, электронная почта.
  3. Согласие на обработку персональных данных дается в целях предоставления Пользователю ответа на заявку, дальнейшего заключения и выполнения обязательств по договорам, осуществления клиентской поддержки, информирования об услугах, которые, по мнению Оператора, могут представлять интерес для Пользователя, проведения опросов и маркетинговых исследований.
  4. Пользователь, предоставляет Оператору право осуществлять следующие действия (операции) с персональными данными: сбор, запись, систематизация, накопление, хранение, уточнение (обновление, изменение), использование, обезличивание, блокирование, удаление и уничтожение, передача третьим лицам, с согласия субъекта персональных данных и соблюдением мер, обеспечивающих защиту персональных данных от несанкционированного доступа.
  5. Персональные данные обрабатываются Оператором до завершения всех необходимых процедур. Также обработка может быть прекращена по запросу Пользователя на электронную почту: info@avada-media.com.ua
  6. Пользователь подтверждает, что, давая Согласие, он действует свободно, своей волей и в своем интересе.
  7. Настоящее Согласие действует бессрочно до момента прекращения обработки персональных данных по причинам, указанным в п.5 данного документа.

Присоединяйся к нам

Отправить резюме

+
@

Свяжитесь с нами любым удобным для Вас способом:

+ 38 (097) 036 29 32
Файлы cookies
Пожалуйста, разрешите использование cookies для более эффективной работы с сайтом