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

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.


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