База для QA
К списку уроков
Блок 2 · Клиент-серверная архитектура

Урок 4. Клиент-серверная архитектура

Как работает интернет

Темы урока

Клиент и сервер, HTTP/HTTPS, структура запроса/ответа (методы/заголовки/статус-коды), что происходит при вводе URL

Видео урока

Пройти тест по уроку

Конспект урока

Главное за урок

Без понимания клиент-серверной архитектуры тестирование веба превращается в «что-то нажал — что-то увидел». Этот урок открывает блок 2: разбираем, как браузер «разговаривает» с сервером по HTTP, что значат статус-коды и где их смотреть в DevTools.

После урока ты должен уметь не просто говорить «запрос ушёл», а конкретно: метод, URL, заголовки, тело, статус-код.

Аналогия ресторана

  • Клиент — ты за столиком: знаешь, что хочешь, не знаешь, как готовят.
  • Официант (HTTP-протокол) — передаёт заказ на кухню и приносит результат.
  • Кухня (сервер) — обрабатывает запрос, готовит ответ, не знает, кто заказал.

Это ровно то, что происходит при загрузке любого сайта: браузер (клиент) шлёт запрос, сервер обрабатывает и возвращает ответ.

Что происходит при вводе URL

  1. Браузер спрашивает у DNS-сервера: какой IP у этого домена?
  2. DNS возвращает IP → браузер устанавливает TCP/TLS-соединение с сервером.
  3. Браузер отправляет HTTP-запрос → сервер обрабатывает → возвращает HTTP-ответ.
  4. Браузер рендерит страницу или JSON.

DNS = Domain Name System — «телефонная книга интернета»: переводит google.com в IP-адрес. Медленный DNS-ответ — нефункциональный баг, видно в DevTools → Network в первой строке.

HTTP vs HTTPS

Что HTTP HTTPS
Шифр Открытый текст TLS/SSL — данные шифруются
Сертиф. Нет Аутентификация сервера через сертификат
Замок Нет Иконка замочка в адресной строке

Для QA: на проде должен быть только HTTPS, редиректы HTTP → HTTPS работают, срок жизни сертификата отслеживается.

Структура HTTP-запроса

  1. Стартовая строка: метод (GET), путь (/api/users), версия HTTP.
  2. Заголовки (Headers): тип контента, авторизация, хост, кэш-директивы.
  3. Тело (Body): полезная нагрузка — только в POST/PUT/PATCH. В GET тела нет.

HTTP-методы

Метод Для чего Тело
GET Получить ресурс. Параметры в URL. нет
POST Создать новый ресурс. да
PUT Обновить ресурс полностью. да
PATCH Обновить ресурс частично. да
DELETE Удалить ресурс. UI-кнопки часто нет — но API есть. иногда
HEAD Как GET, но без тела ответа — проверка «живости». нет
OPTIONS Что поддерживает сервер; CORS-preflight. нет

Статус-коды

Класс Семейство Что означает Примеры
1xx Информационные Промежуточные 100 Continue
2xx Успех Запрос обработан 200 OK, 201 Created, 204 No Content
3xx Редирект Ресурс перенесён 301 Permanent, 302 Found
4xx Ошибка клиента Запрос невалидный 400, 401, 403, 404, 422
5xx Ошибка сервера Сервер не справился 500, 502, 503

5xx в проде = критический баг. Видишь — сразу собирай Network, Console, заголовки в баг-репорт.

404 — не всегда баг. Может быть правильным ответом «ресурс не найден»; контекст и требования решают.

200 — не значит «всё ок». Сервер ответил, но в теле может быть ошибка вида {"error": "user not found"}. Проверять нужно и статус-код, и тело ответа.

DevTools → Network

Что смотрит QA при тестировании:

  • Status — статус-коды; красные 4xx/5xx = разбираться.
  • Time — медленные запросы.
  • Headers — запрос и ответ.
  • Payload — тело запроса.
  • Preview/Response — тело ответа.
  • Фильтры XHR/Fetch — API-вызовы; Doc — HTML; Img/Media — статика.

Ключевые тезисы для теста

  • Клиент-серверная модель: клиент шлёт запрос — сервер возвращает ответ. Между ними — HTTP.
  • DNS переводит домен в IP. Это первое, что делает браузер при вводе URL.
  • HTTPS = HTTP + шифрование TLS/SSL + сертификат сервера.
  • HTTP-запрос = стартовая строка + заголовки + (опционально) тело.
  • Основные методы: GET, POST, PUT, PATCH, DELETE. Тело — только в POST/PUT/PATCH.
  • Статус-коды: 2xx — успех, 3xx — редирект, 4xx — ошибка клиента, 5xx — ошибка сервера.
  • 200 OK не значит «всё работает» — проверяй и код, и тело ответа.
  • Главный инструмент QA — DevTools → Network: метод, URL, статус, заголовки, тело.

Полезные ссылки