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

Layout Testing

Adaptive design

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

  • 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) позволяет выбирать различные девайсы и разрешения экрана.

Задача
Задача доступна премиум пользователям!

ВВЕДЕНИЕ

БАЗОВЫЕ ЗНАНИЯ

УРОВНИ ТЕСТИРОВАНИЯ

UI ТЕСТИРОВАНИЕ

МЕТОДЫ ТЕСТИРОВАНИЯ

ТЕСТОВАЯ ДОКУМЕНТАЦИЯ

АУТЕНТИФИКАЦИЯ И АВТОРИЗАЦИЯ

POSTMAN

БАЗЫ ДАННЫХ

ТЕСТИРОВАНИЕ РЕЛИЗА

АНАЛИЗ РАБОТЫ ПРИЛОЖЕНИЯ

ПОДГОТОВКА К СОБЕСЕДОВАНИЮ

Как составить резюме Топ вопросов Собеседование