Тестирование веб-приложений
HTML и CSS для тестировщика: теги, атрибуты, стили и DevTools
HTML – язык разметки, который сообщает браузеру, какие элементы есть на странице: заголовки, текст, ссылки, картинки, поля ввода. CSS описывает, как эти элементы выглядят, то есть шрифты, цвета, размеры и отступы. Верстать тестировщику не нужно. Ему достаточно читать теги и атрибуты, знать, откуда элемент берёт стили, и сверять их с макетом во вкладке Elements в DevTools.
- Язык разметки
- HTML не называют, когда спрашивают о языках программирования
- Elements и Styles
- вкладки DevTools, где читают код и стили элемента
- Бесплатно
- урок с заданиями в моём базовом курсе
Что такое HTML и из чего состоит страница
HTML (HyperText Markup Language) – язык гипертекстовой разметки. На нём верстают страницу: описывают, какие на ней текстовые блоки, ссылки, картинки и поля и как они расположены. Простые стили HTML задавать тоже умеет, но внешний вид страницы почти всегда описывают отдельно, на CSS.
На собеседовании здесь часто ошибаются. HTML не язык программирования, и на вопрос, какие языки программирования вы знаете, его не называют. Родственный ему XML (eXtensible Markup Language) тоже язык разметки с похожими тегами, и тестировщик встречает его в запросах и ответах SOAP-сервисов.
Документ HTML начинается со строки <!DOCTYPE html>, которая сообщает браузеру тип документа. Всё остальное обрамляет тег <html>, и внутри него два главных тега. Я показываю их в DevTools на сайте onliner.by: в head там кодировка, ссылки и скрипты, а body тоже занят в основном скриптами, потому что страницу этого сайта рисует JavaScript.
<head>
Служебная информация для браузера и поисковиков: кодировка, название вкладки, подключённые стили и скрипты. На странице пользователь её не видит.
<body>
Содержимое, которое видит пользователь: текст, ссылки, картинки, поля ввода, кнопки. Если страницу рисует JavaScript, в исходном коде здесь почти одни скрипты, а готовые элементы видны во вкладке Elements, где браузер показывает страницу уже собранной.
Теги и атрибуты
Единица HTML – тег, название элемента в угловых скобках. Большинство тегов парные: открывающий <b> и закрывающий </b> с косой чертой, а между ними содержимое. Запись <b>текст</b> браузер покажет жирным шрифтом.
Некоторым тегам содержимое не нужно, и закрывающей части у них нет. Тег <input> сам по себе ставит на страницу поле ввода, а <img> ставит картинку. Такие теги иногда пишут с косой чертой перед скобкой: <img />.
Атрибут уточняет, как работает тег. Его пишут внутри открывающего тега в виде имя="значение", и атрибутов у одного тега может быть несколько.
Ссылка: <a> и href
Пример: <a href="https://ya.ru">Яндекс</a>. На странице появится синее подчёркнутое слово "Яндекс", и щелчок по нему откроет ya.ru. Адрес перехода задаёт атрибут href.
Картинка: <img> и src
Атрибут src указывает, где лежит файл картинки: в папке на компьютере или по адресу в интернете. Если путь указан с ошибкой, картинка на странице не загрузится.
Поле ввода: <input> и его атрибуты
Атрибуты задают вид и правила поля. type="password" прячет символы за точками, required не даёт отправить форму с пустым полем, maxlength="20" ограничивает длину ввода. При тестировании формы их стоит прочитать: maxlength подсказывает, где искать граничные значения.
Пример: maxlength и проверка на сервере
В форме доставки у поля "Имя получателя" стоит maxlength="50", и больше 50 символов в браузере не набрать. Атрибут ограничивает только ввод с клавиатуры, поэтому тестировщик убирает его во вкладке Elements или отправляет тот же запрос из Postman с именем из 51 символа. Если сервер принял такое имя и оно сломало вёрстку накладной, это дефект проверки на сервере.
id и class
Эти атрибуты есть почти у любого тега. По ним CSS находит, какие элементы оформить, а автотест находит элемент, на который нужно нажать.
Что такое CSS и где задают стили
CSS (Cascading Style Sheets, каскадные таблицы стилей) – формальный язык описания внешнего вида документа на HTML. Проще говоря, CSS отвечает за то, как выглядят элементы: шрифт и цвет, ширина и высота, отступы, рамки, фоновые картинки и положение на странице.
Правило CSS состоит из селектора и свойств. Селектор говорит, к каким элементам правило относится, свойства задают оформление. Запись .button { font-size: 16px; color: white; } даёт всем элементам с классом button шрифт размером 16 пикселей и белый цвет.
Задать стили можно в трёх местах, и тестировщику полезно узнавать все три.
Тег <style> в документе
Правила записаны прямо в HTML, обычно внутри head. Так делают, когда стилей немного.
Атрибут style у тега
Стиль задан одному элементу: <img style="border-radius: 8px"> скругляет углы только у этой картинки.
Отдельный файл .css
Стили лежат в файле вроде style.css, а документ подключает его тегом <link rel="stylesheet" href="style.css">. На больших сайтах стили почти всегда хранят так.
Как тестировщик смотрит HTML и CSS в DevTools
По моему опыту, HTML-документ целиком тестировщик читает редко, а теги не меняет почти никогда. Фронтенд проверяют по макетам: дизайнер задаёт размеры элементов, шрифты и расстояния между ними, а тестировщик сверяет с макетом то, что получилось на странице. Для этого служит вкладка Elements в DevTools, она открывается клавишей F12 или пунктом "Просмотреть код" в меню по правому щелчку.
Когда элемент выделен, панель Styles показывает все правила CSS, которые к нему относятся, вместе с файлом, откуда пришло каждое. Если на элемент действуют несколько правил, проигравшее свойство показано зачёркнутым. На вкладке Computed собраны значения, которые браузер применил в итоге: ширина и высота, шрифт, отступы. С макетом удобнее всего сверять их.
HTML пригодится и в автоматизации. Автотесту нужен локатор, то есть указание, по которому скрипт находит элемент на странице, например кнопку входа. Локаторы собирают из тегов и атрибутов, и тому, кто читает HTML, их проще составлять и понимать.
Пример: сверить кнопку с макетом
Допустим, по макету у кнопки "Войти" высота 48 пикселей и шрифт 16 пикселей, а на странице она выглядит мельче. Проверка занимает несколько минут.
1. Найти элемент
Щёлкнуть по кнопке правой кнопкой мыши и выбрать "Просмотреть код". Во вкладке Elements подсветится её тег, например <button class="login-button">Войти</button>.
2. Прочитать стили
На панели Styles найти правила для класса login-button и свойства font-size, height и padding. Зачёркнутое значение перебито другим правилом, и рядом видно, в каком файле оно записано.
3. Сверить итоговые значения
На вкладке Computed посмотреть высоту и размер шрифта. Если там 40 и 14 пикселей вместо 48 и 16 из макета, расхождение подтверждено.
4. Проверить догадку
Значение в Styles можно поменять прямо в браузере и увидеть, как кнопка выглядела бы по макету. Правка живёт до перезагрузки страницы, и на сайте ничего не меняется.
5. Завести баг
В баг-репорт пишут ожидаемое значение со ссылкой на макет и фактическое из Computed, а к нему прикладывают скриншот с кнопкой в рамке. Класс элемента и файл стилей помогут разработчику быстрее найти место.
Видеоурок, шпаргалки и задания
Я разбираю HTML и CSS в пятнадцатом уроке курса "Тестировщик с нуля" на YouTube, сразу после урока о DevTools. Учить верстать урок не берётся: он показывает, из чего состоит HTML-документ и откуда элемент берёт стили. Тем, кто хочет сверстать свою первую страницу, я оставил под роликом ссылки на каналы, по которым учился сам. В бесплатном базовом курсе по тестированию тема идёт уроком "Основы HTML и CSS для тестировщика", и после теории в нём есть задания.
Шпаргалка по HTML и CSS собирает теги, атрибуты, блочную модель и селекторы, а у селекторов там есть свой тренажёр. Ещё одна шпаргалка разбирает живую страницу, где HTML, CSS и JavaScript работают вместе, третья показывает вёрстку: Flexbox, Grid и поведение страницы при разной ширине окна. В тренажёре DevTools ответ на вопрос ищут в коде и стилях элемента.
Курсы по теме
Вопросы и ответы
Нужно ли тестировщику знать HTML и CSS?
Верстать не нужно. Нужно читать теги и атрибуты, понимать, откуда элемент берёт стили, и сверять размеры, шрифты и отступы с макетом во вкладке Elements в DevTools. Когда дело дойдёт до автоматизации, HTML понадобится для локаторов.
HTML – это язык программирования?
Нет. HTML – язык разметки: он описывает, какие элементы есть на странице, и ничего не вычисляет. Поэтому на собеседовании, когда спрашивают о языках программирования, HTML не называют.
Чем HTML отличается от CSS?
HTML описывает, что есть на странице: текст, ссылки, картинки, поля ввода. CSS описывает, как это выглядит: шрифт, цвет, размеры, отступы и положение элементов.
Что такое тег и атрибут в HTML?
Тег – название элемента в угловых скобках, например <a> для ссылки или <input> для поля ввода. Атрибут уточняет тег и пишется внутри него в виде имя="значение": href задаёт адрес ссылки, src указывает путь к картинке.
Какими способами подключают CSS?
Тремя: правилами внутри тега <style> в самом документе, атрибутом style у конкретного тега и отдельным файлом .css, который подключают тегом <link>.
Где посмотреть HTML и CSS элемента на странице?
В DevTools: F12 или правый щелчок по элементу и "Просмотреть код". Вкладка Elements покажет тег и его атрибуты, панель Styles покажет правила CSS, а на вкладке Computed видны итоговые размеры, шрифт и отступы.
Посмотреть программы курсов
Программа каждого курса открыта целиком: видны все модули, уроки и число шагов.