← назад к разделу

Тестировщик веб-приложений каждый день работает со страницами в браузере. Чтобы понимать, что именно проверяешь, полезно знать, из чего страница собрана — не на уровне программиста, а чтобы не бояться слов «вёрстка», «элемент», «скрипт» и уверенно пользоваться инструментами разработчика.

Любая веб-страница стоит на трёх технологиях: HTML задаёт структуру, CSS — внешний вид, JavaScript — поведение. А то, что живёт в браузере и меняется на глазах, — это DOM.

адрес введён — дальше страницу собирает браузер код страницы: с сервера DOM — дерево в браузере сервер данных <table id="orders"><tr>Заказ 41</tr></table> разборhtmlbodytableЗаказ 41 разметка без стилейВойти Войтиstyles.css:вид, не структура скриптGET /api/orders200 · заказ 42 данныеЗаказ 42«Заказ 42» в коде нет где тестировщик это видитElementsстрока «Заказ 42» естьConsoleошибки скриптаNetworkGET /api/orders · 200

Браузер получил разметку и дальше собирает страницу сам: HTML разбирается в дерево DOM, стили меняют вид кнопки, но не структуру, скрипт идёт за данными и дорисовывает вторую строку. В коде страницы её нет — она живёт только в DOM. Внизу три вкладки инструментов разработчика: по одной на каждый шаг.

HTML — структура страницы

HTML (HyperText Markup Language) — это разметка, которая говорит браузеру, из чего состоит страница: где заголовок, где абзац, где кнопка, где картинка. Он описывает содержание и структуру, но не внешний вид.

HTML состоит из тегов — команд в угловых скобках. Например:

<h1>Заголовок</h1>
<p>Абзац текста.</p>
<button>Войти</button>
<input type="email" placeholder="Ваша почта">

Здесь <h1> — заголовок, <p> — абзац, <button> — кнопка, <input> — поле ввода: каждый видимый кусочек страницы — какой-то тег. У тегов бывают атрибуты (type="email", placeholder="...") — дополнительные свойства.

Зачем тестировщику: во вкладке Elements вы видите именно HTML-структуру и проверяете, что там на самом деле — помечено ли поле обязательным, совпадает ли текст с макетом.

CSS — оформление

CSS (Cascading Style Sheets) отвечает за внешний вид: цвета, шрифты, отступы, размеры, расположение. Один и тот же HTML с разным CSS выглядит совершенно по-разному.

Правила CSS выглядят так:

button {
  background: green;
  color: white;
  padding: 10px 20px;
}

«Кнопки — зелёные, текст белый, с такими-то отступами». Именно из-за CSS кнопка может «уехать» за край на телефоне или текст налезть на картинку — это классические баги вёрстки.

JavaScript — поведение

JavaScript (JS) добавляет странице поведение: что происходит, когда вы нажимаете кнопку, вводите текст, прокручиваете. Без JS страница статична; с ним она реагирует на действия — показывает подсказки, проверяет форму, подгружает данные без перезагрузки.

Писать JavaScript тестировщику не нужно, но полезно знать, что за «динамику» отвечает именно он: если кнопка не срабатывает, форма молча зависает или данные не появляются — причина часто в ошибке JavaScript. Такие ошибки видно красным в консоли, и их скриншот — золото для баг-репорта.

DOM — живое дерево страницы

Когда браузер загружает HTML, он строит из него DOM (Document Object Model) — «живое» дерево элементов страницы в памяти. Важное отличие: HTML — это то, что пришло с сервера, а DOM — то, что реально сейчас на странице.

Разница важна, потому что JavaScript меняет именно DOM: добавляет строки в таблицу, показывает ошибку, скрывает блок. Вот та же подмена в коде: с сервера пришла одна строка, скрипт дорисовал вторую.

живой пример

const source = '<table id="orders"><tr><td>Заказ 41</td></tr></table>';
const rows = ['Заказ 41'];
rows.push('Заказ 42');
const dom = '<table id="orders">' + rows.map(r => `<tr><td>${r}</td></tr>`).join('') + '</table>';
console.log('код страницы:', source);
console.log('DOM сейчас:  ', dom);
Запустить

Запуск примеров доступен в платном доступе. Там этот же код выполняется прямо в статье: редактор, запуск и проверка рядом с абзацем. Три дня бесплатно →

Первая строчка вывода — то, что покажет «Просмотр кода страницы», вторая — Elements. Поэтому «в коде страницы этого нет» ничего не доказывает: если что-то появилось без перезагрузки, его добавил скрипт — и смотреть надо в DOM.

Где это применяется

Кнопка съехала — думаете про CSS. Форма не реагирует — смотрите, нет ли ошибки JavaScript в консоли. Нужно проверить, что реально на странице, — открываете Elements. А описывая баг, называете часть: «поле не помечено обязательным в разметке», «в консоли ошибка JS при отправке».

Где спотыкаются начинающие:

  • Путают исходный HTML и DOM. «В коде страницы этого нет» — потому что элемент добавил JavaScript; смотрите во вкладке Elements.
  • Боятся вёрстки и пишут баги «всё сломалось». Полезнее: «на экране 375px кнопка уходит за край» — это про CSS и адаптивность.
  • Думают, что нужно уметь программировать. Нет — достаточно понимать роли: структура, вид, поведение, живое состояние.

Коротко

  • HTML отвечает за структуру, CSS — за вид, JS — за поведение; по симптому обычно видно, чья это часть.
  • Тег — видимый кусок страницы, атрибут — его свойство: «поле обязательное» видно в разметке, а не на глаз.
  • «Криво отображается» — почти всегда CSS, а не логика, и на другом экране тот же CSS ведёт себя иначе.
  • Исходный HTML — то, что пришло с сервера; DOM — то, что на странице сейчас. Расходятся они там, где поработал скрипт.
  • Состояние страницы смотрят во вкладке Elements, ошибки скрипта — в консоли, запросы за данными — во вкладке Network.

Что почитать дальше