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

Любая веб-страница стоит на трёх технологиях: HTML задаёт структуру, CSS — внешний вид, JavaScript — поведение. А то, что реально живёт в браузере и меняется на глазах, называется 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 кнопка может «уехать» за край на телефоне или текст налезть на картинку — это классические баги вёрстки, которые ловит глаз тестировщика.

Зачем тестировщику: понимать, что «криво отображается» — это обычно проблема CSS, а не логики. И что на разных экранах CSS может вести себя по-разному.

JavaScript — поведение

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

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

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

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

Разница важна, потому что JavaScript меняет именно DOM: добавляет строки в таблицу, показывает ошибку, скрывает блок. Поэтому если вы посмотрите исходный HTML (правой кнопкой → «Просмотр кода страницы»), там может не быть того, что видно на экране, — а во вкладке Elements (это как раз DOM) будет.

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

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

Эти основы всплывают каждый раз, когда вы тестируете веб. Кнопка съехала — думаете про CSS. Форма не реагирует — смотрите, нет ли ошибки JavaScript в консоли. Нужно проверить, что реально на странице, — открываете DOM во вкладке Elements. Понимая устройство страницы, вы точнее описываете баги («поле не помечено обязательным в разметке», «в консоли ошибка JS при отправке») и увереннее пользуетесь DevTools.

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

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

Что учить дальше. Страница — это половина картины. Вторая половина — как она общается с сервером: клиент-сервер и HTTP, а затем практика в DevTools и Postman.