Основы тестирования веб-приложений — маршрут для QA
Зачем эта статья. Типичный курс QA по вебу охватывает пять больших блоков: основы, клиент–сервер, backend, формы и фронтенд, нефункциональные проверки. В энциклопедии эти темы разбросаны по разделам «Тестирование», «Сеть», «HTML», «Безопасность». Здесь — единый маршрут: что читать, в каком порядке и что проверять руками на стенде.
Как пользоваться маршрутом
| Шаг | Действие |
|---|---|
| 1 | Пройдите блоки 1–2, если только входите в веб-QA |
| 2 | Откройте Ручное тестирование веба — практические чек-листы |
| 3 | По задаче углубляйтесь в смежные разделы по ссылкам из таблиц |
| 4 | Автоматизацию подключайте после ручной базы — 115, 1182 |
Прочитали про HTTP — сразу откройте DevTools → Network на любом сайте. Прочитали про роли — войдите под двумя учётками и сравните доступ к /admin. Без такой связки материалы остаются абстракцией.
Блок 1 — основы веба для тестировщика
Архитектура браузера — что нужно QA
Тестировщику не обязательно знать исходники Chromium, но структура браузера объясняет, куда смотреть при баге.
| Компонент | Зачем QA |
|---|---|
| UI браузера | Адресная строка, вкладки, закладки — навигация пользователя |
| Движок рендеринга (Blink, Gecko, WebKit) | Разная отрисовка CSS и шрифтов → кроссбраузерные баги |
| JavaScript-движок (V8, SpiderMonkey, JavaScriptCore) | Ошибки в Console, «белый экран» на SPA |
| Сетевой стек | Запросы HTTP/HTTPS, cookies, кэш — вкладка Network |
| DevTools | Elements, Console, Network — ежедневный инструмент ручного QA |
Где углубиться
- Движки браузеров и линейки продуктов — Blink, Gecko, WebKit; почему тестируют минимум два семейства
- JavaScript-движок — связь JS и производительности
- От URL до пикселей — полный путь загрузки страницы
- DevTools в контексте веба — вкладки и закладки; 128 — 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.
Навигация
Проверки навигации — в 128: меню, хлебные крошки, кнопка «Назад», модальные окна, 404/500, title и favicon.
Для SPA добавьте: смена URL без перезагрузки, deep link (открытие /orders/123 напрямую), состояние после F5 — см. Playwright и SPA.
Локализация и интернационализация
| Термин | Смысл | Что тестировать |
|---|---|---|
| i18n | Продукт готов к переводу | Смена локали не ломает логику, даты и числа |
| l10n | Конкретный язык и регион | Тексты, валюта, форматы, правовые формулировки |
Чек-лист l10n для веба
- Переключение языка сохраняется после F5 и логина
- Длинные немецкие/финские строки не обрезают кнопки
- RTL (арабский, иврит) — порядок элементов и выравнивание
- Форматы даты, времени, валюты по региону
- Ввод на национальной раскладке в полях поиска и логина
- SEO-мета (
title,description) на целевом языке
Теория i18n/l10n — Классификация видов тестирования. Мобильные сценарии — 124.
Характеристики качества
Нефункциональные свойства веба описывают как система работает, а не что делает.
| Характеристика | Примеры для веба | Материал |
|---|---|---|
| Функциональность | Сценарии по ТЗ | 1, 127 |
| Производительность | Время загрузки, TTFB | 122 |
| Безопасность | XSS, IDOR, сессии | 123 |
| Usability | Понятность интерфейса | 111, маршрут веб-дизайна |
| Accessibility (a11y) | Клавиатура, скринридер, контраст | 111, 128 |
| Совместимость | Браузеры, разрешения | 128 |
| Надёжность / availability | Uptime, деградация при сбое | 122, DevOps-мониторинг |
Стандарт ISO/IEC 25010 систематизирует эти характеристики — см. Экономика производства ПО.
Блок 2 — клиент–серверное взаимодействие
HTTP и REST
HTTP — язык общения браузера и API с сервером. Минимум для QA:
| Тема | Минимум | Статья |
|---|---|---|
| Методы | GET, POST, PUT/PATCH, DELETE | 2, 1274 |
| Коды | 2xx, 4xx, 5xx | 128 |
| Заголовки | Content-Type, Authorization, Cookie, Set-Cookie | 2 |
| Тело | JSON, application/x-www-form-urlencoded, multipart | 2 |
| REST | Ресурсы, идемпотентность GET/PUT/DELETE | 117 |
Базовый разбор протокола — 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 из заголовка.
Где углубиться — Логирование и мониторинг, 128.
Перехват трафика, прокси и брандмауэр
Зачем 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 — 128. Теория auth — Аутентификация и авторизация. OAuth в API — Публичный API и OAuth 2.0. Cookies — Cookies и хранилища.
Блок 4 — формы, вёрстка и интерактивность
GET и POST
| Метод | Особенность | Риск для теста |
|---|---|---|
| GET | Параметры в URL | Утечка в логах, истории браузера, Referer |
| POST | Тело запроса | Повторная отправка при «Назад», CSRF |
После успешной POST-формы ожидайте PRG (Post/Redirect/Get) — иначе браузер предложит повторить отправку. Проверка — 128.
Функциональное тестирование
Функциональные проверки строятся из требований и техник тест-дизайна: эквивалентные классы, границы, таблицы решений, попарное тестирование.
HTML, CSS и адаптивность
| Зона | Проверки |
|---|---|
| Вёрстка | Наложения, обрезанный текст, сломанная сетка |
| Адаптив | 320px, 768px, 1920px; бургер-меню; горизонтальный скролл |
| Zoom 125–200% | Читаемость, кликабельность — часть a11y |
| Тёмная тема | Конtrast, иконки, границы полей |
CSS-теория — разделы HTML и интерфейс. Практика — 128.
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 Нагрузочное тестирование, практика — 1014.
Защищённость
Базовый security-smoke для QA (не замена пентest):
- HTTPS везде, нет mixed content
- Cookie с
HttpOnly,Secure,SameSiteгде нужно - Нет секретов в URL и в ответах API
- Ошибка 500 не показывает stack trace пользователю
- Заголовки
X-Frame-Options/ CSP — clickjacking
Углубление — 123, пентest веба.
Usability и accessibility
Usability — наблюдение за пользователем или экспертный обход: «где кнопка?», «понятна ли ошибка?».
Accessibility (a11y) — WCAG 2.x: клавиатура, контраст, alt у картинок, labels у полей. Инструменты: axe DevTools, Lighthouse, NVDA/VoiceOver.
Краткий a11y-smoke — 128. Классификация — 111.
Автоматизация
| Уровень | Инструмент | Статья |
|---|---|---|
| API | Postman, pytest, REST Assured | 2, 1011, 1015 |
| E2E UI | Playwright, Selenium | 1182, 1181 |
| Стратегия | Пирамида, CI | 115 |
Автотесты дополняют ручные чек-листы из 128, не заменяют исследовательское тестирование новых фич.
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, навигация | Покрыто | этот маршрут, 127, HTML, 128 |
| Локализация, характеристики качества | Покрыто | 111, 128, 124 |
| HTTP, DNS, логи, прокси, перехват | Покрыто | 2, 1274, 6, 614–615 |
| Backend, SQL, auth, OAuth, права | Покрыто | 129, 128, 111 auth |
| GET/POST, формы, CSS, JS, DOM, AJAX, SPA | Покрыто | 128, 1182 |
| Perf, security, usability, a11y, авто, SEO, мониторинг | Покрыто | 122, 123, 111, 115, 118, DevOps 19 |
Нет одного длинного учебника «веб-QA от А до Я» — зато есть этот маршрут и практика в 128. Отдельный глубокий курс по Burp для функционального QA (не пентest) и развёрнутый l10n-чек-лист для веб-магазинов — кандидаты на следующие статьи раздела.
Рекомендуемый порядок чтения
- Основы тестирования → Классификация
- Этот маршрут (132) — обзор веб-стека
- От URL до пикселей — как грузится страница
- Ручное тестирование веба — ежедневные чек-листы
- Тестирование API → SQL для тестировщика
- Дополнительные модули — Git, HTTP, soft skills
- По роли: 115 + 1182 или 122 / 123
Навигация по разделу «Тестирование»
- Маршрут: О разделе · Основы веба для QA · Ручное веб · Резюме раздела
- Практика QA: Документация · Тест-дизайн · SQL · API
- Автоматизация: 115 · 1182 Playwright · 1181 Selenium
- NFR: 122 Нагрузка · 123 Безопасность · 111 Классификация NFR
См. также
Другие статьи этого же раздела в боковом меню (как на странице "О разделе"). Что такое тестирование, чем оно отличается от QA, цепочка ошибка→дефект→сбой, верификация и валидация, виды проверок и роли в команде. Юнит-тест представляет собой автоматизированную проверку отдельной единицы программного кода. Практическое занятие и реализация интеграционного теста. Практическое занятие и реализация ручного тестирования. Практическое занятие и реализация нагрузочного тестирования. Первый автотест на Java для QA: JUnit 5, REST Assured и проверка HTTP API без браузера. Первый автотест на JavaScript для QA: Jest для unit-проверок и Playwright для E2E в браузере. Тестирование разных признаков - доступ к коду, модульное, интеграционное, системное, приёмочное и прочие. Основные фазы - планирование и контроль, анализ и проектирование, реализация и выполнение, оценка критериев, отчетность. Что такое артефакты, каким целям и принципам они служат. Системное тестирование, в чём суть и чем отличается E2E. Использование программных средств для выполнения проверок без вмешательства человека.Основы тестирования программного обеспечения
Подготовка среды и создание первого теста
Проверка взаимодействия компонентов
Проверка пользовательского сценария
Проверка надежности под нагрузкой
Практикум Java — JUnit и REST Assured
Практикум JavaScript — Playwright и Jest
Классификация видов тестирования
Жизненный цикл тестирования
Артефакты качества в проекте
End-to-End и системное тестирование
Автоматизация тестирования