Основы тестирования веб-приложений — маршрут для QA

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ

Тестировщику Аналитику

Теория данных (раздел 3)

Проверка в БД — SQL для тестировщика, Основы БД, транзакции, PostgreSQL. Карта — о разделе.

Когда сетевой процесс получает HTML-код сайта, движок отображения выполняет строгую последовательность шагов:

1. Код HTML превращается в дерево объектов (DOM), а стили CSS — в дерево стилей (CSSOM).
2. DOM и CSSOM объединяются в единое «дерево рендеринга», содержащее только видимые элементы.
3. Браузер рассчитывает точные координаты и размеры каждого элемента на экране.
4. Элементы переводятся в пиксели (растеризация) и выводятся на экран с помощью UI Backend и GPU.

Типичный курс QA по вебу охватывает пять больших блоков — основы, клиент–сервер, backend, формы и фронтенд, нефункциональные проверки. В энциклопедии эти темы разбросаны по разделам "Тестирование", "Сеть", "HTML", "Безопасность". Здесь — единый маршрут: что читать, в каком порядке и что проверять руками на стенде.

---

Как пользоваться маршрутом

Шаг	Действие
1	Пройдите блоки 1–2, если только входите в веб-QA
2	Откройте Ручное тестирование веба — практические чек-листы
3	По задаче углубляйтесь в смежные разделы по ссылкам из таблиц
4	Автоматизацию подключайте после ручной базы — Автоматизация тестирования, Playwright

Связка "теория → практика"

Прочитали про HTTP — сразу откройте DevTools → Network на любом сайте.

Прочитали про роли — войдите под двумя учётками и сравните доступ к /admin. Без такой связки материалы остаются абстракцией.

---

Блок 1 — основы веба для тестировщика

Архитектура браузера — что нужно QA

Тестировщику не обязательно знать исходники Chromium, но структура браузера объясняет, куда смотреть при баге.

Chromium — это бесплатный веб-браузер с открытым исходным кодом, разработанный компанией Google и сообществом создателей. Он служит фундаментом для создания большинства современных популярных браузеров, включая Google Chrome, Microsoft Edge, Opera, Яндекс.Браузер, Vivaldi и Brave.

Современный веб-браузер — это сложная программная система, построенная по многопроцессной архитектуре для обеспечения стабильности, безопасности и высокой скорости работы. Классическая структура браузера состоит из 7 ключевых элементов:

• пользовательский интерфейс;
• движок браузера;
• движок отображения;
• сетевой компонент;
• интерпретатор JavaScript;
• оболочка пользовательского интерфейса;
• хранилище данных.

Компонент	Зачем QA
UI браузера	Адресная строка, вкладки, закладки — навигация пользователя
Движок рендеринга (Blink, Gecko, WebKit)	Разная отрисовка CSS и шрифтов → кроссбраузерные баги
JavaScript-движок (V8, SpiderMonkey, JavaScriptCore)	Ошибки в Console, "белый экран" на SPA
Сетевой стек	Запросы HTTP/HTTPS, cookies, кэш — вкладка Network
DevTools	Elements, Console, Network — ежедневный инструмент ручного QA

В современных браузерах подсистемы изолированы друг от друга с помощью раздельных процессов операционной системы. Если падает одна вкладка, весь браузер продолжает работать.

1. Главный процесс (Browser Process): Управляет интерфейсом, адресной строкой, плагинами, открытием новых вкладок и координирует работу всех остальных процессов.
2. Процессы отображения (Renderer Processes): Создаются отдельно для каждой вкладки (или для каждого домена). Внутри них работают движок рендеринга и движок JavaScript. Они изолированы в «песочнице» (Sandbox) и не имеют прямого доступа к файловой системе компьютера.
3. Сетевой процесс (Network Process): Вынесен в отдельный поток для параллельной загрузки ресурсов и защиты сетевого трафика.
4. Процесс графического процессора (GPU Process): Обрабатывает графические вычисления и ускоряет 3D-отрисовку веб-страниц силами видеокарты.

Где углубиться

• Движки браузеров и линейки продуктов — Blink, Gecko, WebKit; почему тестируют минимум два семейства
• JavaScript-движок — связь JS и производительности
• От URL до пикселей — полный путь загрузки страницы
• DevTools в контексте веба — вкладки и закладки; Ручное тестирование веб-приложений — Network для QA

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

HTML — каркас, который видит браузер и скринридер. QA проверяет не синтаксис ради синтаксиса, а поведение элементов.

Элемент	Что проверить
Формы (form, input, select)	Отправка, валидация, обязательные поля — чек-лист форм
Ссылки (a href)	Все ли ведут куда нужно, нет ли javascript:void(0) вместо действия
Кнопки (button vs a)	Клик с клавиатуры, тип submit vs button
Семантика (nav, main, h1)	Заголовки, landmarks — база для accessibility

Где углубиться — раздел HTML.

Навигация

Проверки навигации — в Ручное тестирование веб-приложений — меню, хлебные крошки, кнопка "Назад", модальные окна, 404/500, title и favicon.

Для SPA добавьте — смена URL без перезагрузки, deep link (открытие /orders/123 напрямую), состояние после F5 — см. Playwright и SPA.

Локализация и интернационализация

Термин	Смысл	Что тестировать
i18n	Продукт готов к переводу	Смена локали не ломает логику, даты и числа
l10n	Конкретный язык и регион	Тексты, валюта, форматы, правовые формулировки

Чек-лист l10n для веба

• Переключение языка сохраняется после F5 и логина
• Длинные немецкие/финские строки не обрезают кнопки
• RTL (арабский, иврит) — порядок элементов и выравнивание
• Форматы даты, времени, валюты по региону
• Ввод на национальной раскладке в полях поиска и логина
• SEO-мета (title, description) на целевом языке

Теория i18n/l10n — Классификация видов тестирования. Мобильные сценарии — Особенности тестирования мобильных приложений.

Характеристики качества

Нефункциональные свойства веба описывают как система работает, а не что делает.

Характеристика	Примеры для веба	Материал
Функциональность	Сценарии по ТЗ	Основы тестирования программного обеспечения, Техники проектирования тестов
Производительность	Время загрузки, TTFB	Нагрузочное и стресс-тестирование производительности
Безопасность	XSS, IDOR, сессии	Тестирование информационной безопасности
Usability	Понятность интерфейса	Классификация видов тестирования, маршрут веб-дизайна
Accessibility (a11y)	Клавиатура, скринридер, контраст	Классификация видов тестирования, Ручное тестирование веб-приложений
Совместимость	Браузеры, разрешения	Ручное тестирование веб-приложений
Надёжность / availability	Uptime, деградация при сбое	Нагрузочное и стресс-тестирование производительности, DevOps-мониторинг

Стандарт ISO/IEC 25010 систематизирует эти характеристики — см. Экономика производства ПО.

---

Блок 2 — клиент–серверное взаимодействие

HTTP и REST

HTTP — язык общения браузера и API с сервером. Минимум для QA:

Тема	Минимум	Статья
Методы	GET, POST, PUT/PATCH, DELETE	Тестирование и анализ API, Дополнительные модули для тестировщика
Коды	2xx, 4xx, 5xx	Ручное тестирование веб-приложений
Заголовки	Content-Type, Authorization, Cookie, Set-Cookie	Тестирование и анализ API
Тело	JSON, application/x-www-form-urlencoded, multipart	Тестирование и анализ API
REST	Ресурсы, идемпотентность GET/PUT/DELETE	API - интерфейсы прикладного программирования

Базовый разбор протокола — HTTP как основа веб-интеграций.

DNS

DNS переводит shop.example.com в IP-адрес сервера. Для QA важно понимать:

• неверный DNS на стенде → "сайт не открывается" при рабочем backend;
• CDN и балансировщик могут отдавать разный контент по региону;
• при отладке curl/Postman иногда нужен Host-заголовок или запись в /etc/hosts.

Где углубиться — DNS — система доменных имён.

Анализ запросов и логов

Источник	Что даёт QA
DevTools → Network	Статус, тело, timing, HAR-экспорт
Логи веб-сервера (nginx, Apache)	4xx/5xx, медленные запросы, IP
Логи приложения	Stack trace, business-код ошибки, correlation id
Логи БД	Медленные запросы, блокировки

При баге с сетью приложите к отчёту — URL, метод, статус, фрагмент Request/Response, Request-Id или trace id из заголовка.

Где углубиться — Логирование и мониторинг, Ручное тестирование веб-приложений.

Перехват трафика, прокси и брандмауэр

Зачем QA перехват

• увидеть запрос "как его шлёт браузер", а не только ответ на экране;
• подменить ответ (mock) для негативных сценариев;
• проверить, не уходит ли лишнее в query string (пароль, токен);
• воспроизвести медленную сеть и обрыв соединения.

Инструмент	Когда использовать
Chrome DevTools	Ежедневно — Network, Throttling, Override
Burp Suite / OWASP ZAP	Глубокий анализ, повтор запросов, security-smoke
Charles / Fiddler	Перехват HTTPS на desktop, мобильный прокси
Postman Interceptor	Связка браузера и коллекции Postman

Прокси стоит между клиентом и сервером — корпоративный фильтр, кэш, MitM для отладки. Брандмауэр может блокировать порты — симптом "работает у разработчика, не работает у QA в офисе".

Этика и правила

Перехват HTTPS и пентest-инструменты — только на своих стендах или с письменным разрешением. На production без согласования — нарушение политики и закона.

Где углубиться

• Прокси-серверы
• Анализ и мониторинг сетевого трафика
• Burp и веб в пентestе — для security-углубления

---

Блок 3 — динамика и backend

Серверы приложений и стек

Типовая цепочка — браузер → балансировщик → веб-сервер (nginx) → приложение (Node, Java, PHP…) → БД.

QA на интеграционном стенде проверяет, что версии компонентов совпадают с релизной матрицей, а конфиг (env, feature flags) — с тест-планом.

Где углубиться — Как работают сайты, веб-серверы.

БД и SQL для проверки данных

UI может показывать "Успех", а в БД — пусто или дубль. После критичных операций (регистрация, оплата, смена статуса) сверяйте данные запросом.

Задача	Пример
Запись создалась	SELECT * FROM orders WHERE id = …
Статус сменился	payment_status = 'paid'
Нет дубля	один заказ на двойной submit
Мягкое удаление	deleted_at IS NOT NULL, UI скрывает

Где углубиться — SQL для тестировщика, раздел SQL.

Аутентификация, авторизация, cookies, OAuth

Механизм	Что проверить
Логин/пароль	Негатив, блокировка, политика пароля
Сессия (cookie / JWT)	Logout, истечение, F5, два браузера
"Запомнить меня"	Срок жизни cookie по ТЗ
Роли (RBAC)	Гость не видит /admin; user не редактит чужие данные
OAuth 2.0 / SSO	Вход через Google/GitHub; отзыв доступа; callback URL
2FA	Обязательность, резервные коды, блок после N попыток

Чек-лист прав доступа (IDOR-smoke)

• Открыть /api/users/100 под user A — только свои данные
• Подменить id в URL или теле запроса на чужой — 403/404, не чужой профиль
• Прямая ссылка на админ-раздел без роли — редирект или 403
• Действие "удалить" доступно только владельцу или admin

Сессии в UI — Ручное тестирование веб-приложений. Теория auth — Аутентификация и авторизация. OAuth в API — Публичный API и OAuth 2.0. Cookies — Cookies и хранилища.

---

Блок 4 — формы, вёрстка и интерактивность

GET и POST

Метод	Особенность	Риск для теста
GET	Параметры в URL	Утечка в логах, истории браузера, Referer
POST	Тело запроса	Повторная отправка при "Назад", CSRF

После успешной POST-формы ожидайте PRG (Post/Redirect/Get) — иначе браузер предложит повторить отправку. Проверка — Ручное тестирование веб-приложений.

Функциональное тестирование

Функциональные проверки строятся из требований и техник тест-дизайна:

• эквивалентные классы;
• границы;
• таблицы решений;
• попарное тестирование.

HTML, CSS и адаптивность

Зона	Проверки
Вёрстка	Наложения, обрезанный текст, сломанная сетка
Адаптив	320px, 768px, 1920px; бургер-меню; горизонтальный скролл
Zoom 125–200%	Читаемость, кликабельность — часть a11y
Тёмная тема	Конtrast, иконки, границы полей

CSS-теория — разделы HTML и интерфейс. Практика — Ручное тестирование веб-приложений.

JavaScript, DOM, AJAX и SPA

Технология	Симптом бага	Где смотреть
JS-ошибка	Белый экран, кнопка "мертвая"	Console
DOM	Элемент есть в Elements, но не виден	display, visibility, overlay
AJAX / fetch	Данные не обновились	Network → XHR/Fetch
SPA	URL сменился, контент старый	Network, timing, 1182 SPA

Smoke для SPA

• F5 на внутреннем маршруте не даёт 404
• Кнопка "Назад" ведёт себя предсказуемо
• Лоадер исчезает после ответа API
• Ошибка API показывает сообщение, а не вечный спиннер

JavaScript для контекста — раздел JS.

---

Блок 5 — нефункциональное тестирование и смежные темы

Производительность

Минимум для ручного QA без JMeter:

• DevTools → Performance / Lighthouse — TTFB, LCP, CLS
• Network → Throttling (Slow 3G) — usable или белый экран
• Список из 100+ элементов — пагинация, виртуализация, время отклика

Системная нагрузка — 122 Нагрузочное тестирование, практика — Проверка надежности под нагрузкой.

Защищённость

Базовый security-smoke для QA (не замена пентest):

• HTTPS везде, нет mixed content
• Cookie с HttpOnly, Secure, SameSite где нужно
• Нет секретов в URL и в ответах API
• Ошибка 500 не показывает stack trace пользователю
• Заголовки X-Frame-Options / CSP — clickjacking

Углубление — Тестирование информационной безопасности, пентest веба.

Usability и accessibility

Usability — наблюдение за пользователем или экспертный обход: "где кнопка?", "понятна ли ошибка?".

Accessibility (a11y) — WCAG 2.x — клавиатура, контраст, alt у картинок, labels у полей. Инструменты — axe DevTools, Lighthouse, NVDA/VoiceOver.

Краткий a11y-smoke — Ручное тестирование веб-приложений. Классификация — Классификация видов тестирования.

Автоматизация

Уровень	Инструмент	Статья
API	Postman, pytest, REST Assured	Тестирование и анализ API, Подготовка среды и создание первого теста, Практикум Java — JUnit и REST Assured
E2E UI	Playwright, Selenium	Playwright, Selenium
Стратегия	Пирамида, CI	Автоматизация тестирования

Автотесты дополняют ручные чек-листы из Ручное тестирование веб-приложений, не заменяют исследовательское тестирование новых фич.

SEO и мониторинг — что проверяет QA

SEO-smoke (если продукт зависит от поиска):

• Уникальные title и meta description на ключевых страницах
• robots.txt и sitemap.xml доступны на стенде
• Канонический URL (link rel="canonical") без дублей
• Open Graph / Twitter Card для шаринга
• Core Web Vitals в норме — пересекается с performance

Мониторинг — зона DevOps/SRE, но QA должен знать:

• алерт "5xx > порога" блокирует релиз;
• дашборды uptime, latency, error rate;
• после деплоя — smoke + сверка метрик.

Где углубиться — SEO-оптимизация, мониторинг в DevOps.

---

Сводная таблица — покрытие syllabus

Тема курса	Статус	Главные материалы
Архитектура браузера, HTML, навигация	Покрыто	этот маршрут, Движки браузеров и линейки продуктов, HTML, Ручное тестирование веб-приложений
Локализация, характеристики качества	Покрыто	Классификация видов тестирования, Ручное тестирование веб-приложений, Особенности тестирования мобильных приложений
HTTP, DNS, логи, прокси, перехват	Покрыто	Тестирование и анализ API, Дополнительные модули для тестировщика, DNS - система доменных имён и её работа, 614–615
Backend, SQL, auth, OAuth, права	Покрыто	SQL для тестировщика, Ручное тестирование веб-приложений, 111 auth
GET/POST, формы, CSS, JS, DOM, AJAX, SPA	Покрыто	Ручное тестирование веб-приложений, Playwright
Perf, security, usability, a11y, авто, SEO, мониторинг	Покрыто	Нагрузочное и стресс-тестирование производительности, Тестирование информационной безопасности, Классификация видов тестирования, Автоматизация тестирования, SEO-оптимизация, DevOps 19

Чего пока нет отдельной статьёй

Нет одного длинного учебника "веб-QA от А до Я" — зато есть этот маршрут и практика в Ручное тестирование веб-приложений.

Отдельный глубокий курс по Burp для функционального QA (не пентest) и развёрнутый l10n-чек-лист для веб-магазинов — кандидаты на следующие статьи раздела.

---

Рекомендуемый порядок чтения

1. Основы тестирования → Классификация
2. Этот маршрут (132) — обзор веб-стека
3. От URL до пикселей — как грузится страница
4. Ручное тестирование веба — ежедневные чек-листы
5. Тестирование API → SQL для тестировщика
6. Дополнительные модули — Git, HTTP, soft skills
7. По роли: Автоматизация тестирования + Playwright или Нагрузочное и стресс-тестирование производительности / Тестирование информационной безопасности

---

Навигация по разделу "Тестирование"

• Маршрут: О разделе · Основы веба для QA · Ручное веб · Резюме раздела
• Практика QA: Документация · Тест-дизайн · SQL · API
• Автоматизация: Автоматизация тестирования · 1182 Playwright · 1181 Selenium
• NFR: 122 Нагрузка · 123 Безопасность · 111 Классификация NFR