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

Layout Testing

Верстка — это визуальное оформление страницы сайта. Верстка любой страницы включает:

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

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

Кратко про HTML, CSS и JS

Предположим, мы решили написать веб-калькулятор.

1. Первым шагом подготовим содержимое нашей страницы — текст, который будет отображаться на кнопках.

2. Превратим простой текст в HTML страницу при помощи HTML (HyperText Markup Language) разметки. Логически сгруппируем содержимое и опишем элементы в зависимости от их типа, используя специальные HTML тэги:

<button> (кнопка)
<input> (элемент для ввод данных)
и другие

3. Воспользуемся CSS (Cascading Style Sheets) — каскадными таблицами стилей: зададим шрифт, размеры элементов, цветовую схему и всю визуальную составляющую в зависимости от полёта фантазии или дизайн макета.

4. JS (JavaScript) — это язык программирования, который позволяет добавлять динамику — анимации, логику обработки действий пользователя на странице. С JavaScript наш калькулятор сможет обрабатывать действия пользователя и производить вычисления.

1. TEXT

C / X - 7 8 9 + 4 5 6 = 1 2 3 0

2. TEXT + HTML

3. TEXT + HTML + CSS

4. TEXT + HTML + CSS + JS

HTML структуру и CSS стили каждого из четырех прототипов калькулятора можно посмотреть через DevTools Elements, а дополнительно загружаемые файлы с JavaScript кодом — в DevTools Sources.

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

Валидность кода

Проверьте HTML, CSS и JavaScript на наличие синтаксических ошибок.
Убедитесь, что код соответствует стандартам W3C.

Инструменты: W3C Markup Validator, W3C CSS Validator, DevTools Console для просмотра ошибок JS.

Отображение контента

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

Соответствие дизайну

Сравните расположение элементов, размеры, цвета, отступы и шрифты с дизайн-макетом.

Инструменты: PerfectPixel.

Навигация

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

Скорость загрузки

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

Инструменты: PageSpeed Insights, DevTools Lighthouse.

Анимация и интерактивные элементы

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

Поддержка различных языков и локализация

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

Кроссбраузерность

Проверьте отображение верстки в различных веб-браузерах (Chrome, Firefox, Safari, Edge и т.д.).
Убедитесь, что верстка корректно отображается в различных версиях браузеров.

Инструменты: Browserling, LambdaTest.

Отзывчивость (Responsive Design)

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

Инструменты: DevTools Toggle Device Toolbar (значок устройств слева от Elements) позволяет выбирать различные девайсы и разрешения экрана.

Задача