Тестирование веб-приложений_25_09

1.

Тестирование веб-приложений
Клиент-серверная архитектура · Тестирование · UR L · HTTP · DevTools
Кл иент
HTTP запросы
UR L · Headers
Сервер
2025-09-26
Респонсы
Статусы
База данных

2.

Клиент-серверная архитектура
Определение
Типы архитектур
Клиент-серверная архитектура — это модель взаимодействия в сети,
Двухуровневая архитектура
где задачи распределяются между двумя основными компонентами:
клиентами и серверами.
→
Клиент
данные в памяти)
Риск потери данных при перезагрузке
Компоненты
Клиент
Сервер (хранит все
Трехуровневая архитектура
Устройство или приложение с стороны пользователя, которое
отправляет запросы
Сервер
Клиент
→
Сервер
→
приложений
БД
Система, которая обрабатывает запросы, хранит данные и
предоставляет необходимые ресурсы
Более надежная архитектура
Многоуровневая архитектура
Клиент
↓
Сервис 1
Сервис 2
↑

3.

Роль тестировщика в веб-приложениях
В модели клиент-сервер, тестировщик играет роль, обеспечивающую качество и надежность веб-приложения.
Интерф ейс и UX
Обмен данными
Безопасность
Проверка корректности интерф ейса клиента и
Валидация корректности обмена данными
Проверка безопасности передачи данных и
качества пользовательского опыта
между клиентом и сервером
защиты от уязвимостей
Логика сервера
Производительность
Функциональное тестирование
Тестирование обработки запросов сервером и
Оценка производительности системы под
Повторная проверка существующих ф ункций
бизнес-логики
различными нагрузками
после изменений кода
В клиент-серверной модели тестировщик должен сначала проверить клиента, так как "тестировщик сначала проверяет клиента!"
3 / 16

4.

Виды тестирования веб-приложений
Функциональное тестирование
Тест модуля
Тест интеграции
Тест системы
Тест приемки
Unit Testing
Integration Testing
System Testing
Acceptance Testing
Модульное
Интеграционное
Системное
Приёмочное тестирование
Регрессионное
тестирование
тестирование
тестирование
Подтверждение, что
тестирование
Верификация маленьких
Верификация
Оценка веб-приложения в
приложение соответствует
Повторная верификация
существующих функций
изолированных областей
функционирования модулей,
целом, чтобы убедиться, что
нуждам и ожиданиям
приложения на ранней стадии
работающих вместе.
все компоненты работают
конечного пользователя или
после модификации кода,
вместе гармонично.
клиента.
чтобы убедиться, что они не
разработки.
Например, проверка
перенаправления после
были негативно затронуты.
успешной регистрации.
Пример: Проверка отдельной
функции валидации формы
Пример: Тестирование
взаимодействия между
клиентом и сервером
Пример: Тестирование всей
цепочки регистрации и
авторизации
Пример: Проверка, что
приложение выполняет все
требуемые функции
Пример: Тестирование старых
функций после добавления
новых

5.

Нефункциональ ное тестирование веб-приложений
Неф ункциональное тестирование оценивает характеристики качества приложения, такие как производительность, безопасность и удобство
использования.
Тестирование производительности
Тестирование безопасности
Выявление уязвимостей и слабостей для защиты данных и
Проверка поведения системы под нагрузками стандартной и
предотвращения несанкционированного доступа.
пиковой загрузки, включая тестирование нагрузки и стресстестирование.
Оценка скорости отклика, времени загрузки и пропускной
Поиск и исправление уязвимостей, которые могут быть
использованы злоумышленниками
способности
Тестирование совместимости
Тестирование юзабил ити (UX)
Убедитесь, что приложение работает правильно на разных
Оценка удобства использования и интуитивной友好ности
браузерах, операционных системах и устройствах.
пользовательского интерф ейса.
Оценка эф ф ективности и приятного опыта пользователя
Тестирование на различных устройствах и в разных браузерах
5 / 16

6.

Анатомия UR L
Сх ема
://
Хост
Protocol
Host
:
Порт
Port
/
Путь
Path
?
Параметры
Query
https ://www.ex ample.com:80/us ers /profile?id=1 23&s ort=as c #s ection-1
Сх ема (Protocol)
Указывает протокол, используемый для доступа к
ресурсу. Например: http
#
Фрагмент
Fragment

7.

HTTP методы
GET
POS T
PUT
PATCH
DELETE
Получение ресурса
Создание ресурса
Замена ресурса
Частичное изменение
Удаление ресурса
Безопасный
Создает новый ресурс
Полная замена
Кэшируемый
Не изменяет сервер
Частичные изменения
Может содержать тело
Может содержать тело
Может содержать тело
Может содержать тело
Идемпотентен
Не идемпотентен
Удаляет ресурс
Идемпотентен
Не идемпотентен
Особенности испол ьзования:
GET и HEAD — безопасные методы, не изменяющие ресурсы
POS T, PUT, PATCH и DELETE — могут изменять состояние ресурсов
PUT — идемпотентен, поэтому его можно вызывать несколько раз
PATCH — не идемпотентен, поэтому используется для частичных изменений
7 / 16

8.

Коды состояния HTTP
Коды состояния HTTP — это тризначные числа, возвращаемые сервером в ответ на HTTP-запрос, указывающие результат обработки запроса. Они
группируются в пять категорий по первой цифре.
1xx
2xx
3xx
4xx
5xx
Информационные
Успешные
Перенаправления
Клиентские ошибки
Серверные ошибки
Временные ответы,
Запрос успешно обработан и
Требуется дополнительное
Ошибка на стороне клиента,
Ошибка на стороне сервера,
требующие дополнительной
выполнен.
действие для завершения
неверный запрос.
неожиданная ситуация.
информации от клиента.
100 Continue
запроса.
200 OK
301 Moved Permanently
404 Not Found
500 Internal Server Error
8 / 16

9.

HTTP заголов ки
Структ ура HTTP-загол ов ков
Запрос
Ответ
GET /res ource HTTP/1.1
Hos t: example.com
Us er-Agent: Mozilla/5.0
Accept: tex t/html
Content-Type:
application/js on
Authorization: B earer
token1 23
Кл ючев ые загол ов ки дл я тестирования
HTTP/1.1 200 OK
HTTP -запрос
Content-Type: tex t/html;
chars et=utf-8
Content-Length: 1 024
Date: Mon, 25 Sep 2025
12: 00: 00 GMT
Accept
Типы содержимого, которы е клиент готов получить
В лияние на тестирование: Позволяет тестировать, как сервер
обрабатывает различные типы запросов
Content-Type
Тип содержимого тел а запроса/ответ а
Типы загол ов ков
В лияние на тестирование: Критически важно для API-тестов —
необходимо проверять, как сервер обрабатывает различные ф орматы
Загол ов ки запроса
Отправ л яются клиентом к серв еру
Загол ов ки ответа
данных
Отправ л яются сервером клиенту
Authorization
Данны е для аутентификации поль зовател я
В лияние на тестирование: В ажен для тестирования аутентиф икации и
авторизации — необходимо проверять различные сценarios входа
Подсказка: При тестировании API полезно использовать инструменты,
которые позволяют легко изменять и тестировать различные комбинации
заголовков.

10.

Компоненты клиент-серверной архитектуры
Frontend
Backend
База данных
Интерфейс пользователя
Логика и данные
Хранение данных
CDN
Proxy
Распределенная сеть
Промежуточный сервер
Frontend (Клиент)
Backend (Сервер)
База данных
Интерфейс пользователя, выполняющийся в
Управляет бизнес-логикой, обработкой данных,
Система хранения данных, позволяющая эффективно
браузере. Включает HTML, CSS и JavaScript.
аутентификацией и взаимодействием с базой.
хранить, извлекать и управлять информацией.
CDN (Сеть доставки)
Proxy-сервер
Взаимодействие
Распределенная сеть серверов, хранящих копии
Средний сервер, действующий как мост между
Клиент → Proxy → Сервер → БД; CDN кэширует
статического контента для быстрой доставки.
клиентом и другим сервером.
статический контент для улучшения скорости.
10 / 16

11.

Журнал ирование (Logging)
Журналирование — это механизм, fundamental для отладки, мониторинга и тестирования веб-приложений. Оно состоит в записи событий, ошибок,
предупреждений и инф ормации о поведении приложения.
Места логирования
Использование логов в тестировании
Отл адка
Логи позволяют идентиф ицировать и диагностировать ошибки, проследить
выполнение кода и понять, в каком месте произошла проблема.
Логи клиента
Браузерные логи (через консоль DevTools ) содержат информацию об ошибках
JavaScript, сетевых запросах и рендеринге интерфейса.
Анал из производительности
В ремя выполнения запросов, количество обращений к серверу и другая метрика
помогают выявить узкие места и оптимизировать производительность.
Логи сервера
Логи бэкенда записывают полученные запросы, ошибки обработки,
взаимодейств ия с базой данных и бизнес -логику.
Безопасность
Логи безопасности и ошибок аутентиф икации помогают выявить уязвимости и
предотвратить несанкционированный доступ.
Логи базы данных
Логи базы данных отс л еживают выполненные запросы SQL , транзакции и
возможные ошибки манипул яции данными.
Пользовательский опы т
Логи интерф ейса и взаимодействия пользователей позволяют понять, как
пользователи взаимодействуют с приложением, и улучшить UX.
11 / 16

12.

Заголов ки кэширования
Cache-Control
Основной заголовок для управления кэшированием. Может содержать несколько
Механизм кэширования
директив:
max-age— время жизни кэша в секундах
no-cache— требует проверки ресурса при каждом запросе
no-s tore— запрещает кэшировать ресурс
Cache-Control: max-age=3600, no-cache
Отв ет: 200 OK или 304 Not Modified
Кл иент
Запрос с заголовками кэширования
Browser Cache
Сервер
HTTP Headers
ETag / If-None-Match
Механизм проверки актуальности ресурса:
ETag— уникальный идентиф икатор версии ресурса
If-None-Match— клиент отправляет E Tag при последующих запросах
Если ресурс не изменился, сервер возвращает304 Not Modified
ETag: "123456789"
Expires
Устаревший, но все еще используемый заголовок, указывающий дату и время,
после которых ресурс считается устаревшим.
Expires: Wed, 21 Oct 2025 07:28:00 GMT
If-None-Match: "123456789"
В лияние на производител ьнос ть: Правильное использование заголовков
кэширования значительно улучшает время загрузки страниц и снижает
нагрузку на сервер, экономя траф ика.
12 / 16

13.

Cookies и сессии
Сессии
Cookies
HTTP-cookies — это небольшие фрагменты данных, которые сервер
Сессии позволяют сохранять информацию о пользователе и его
отправляет в браузер пользователя, и которые браузер может хранить
взаимодействии с приложением на протяжении нескольких запросов.
и возвращать с последующими запросами к тому же серверу.
Они часто реализованы с использованием идентификаторов сессии,
хранящихся в cookies.
Структура cookie
Клиент
Name=Value
Domain
Основная пара ключ-значение
Домен, для которого предназначен
Path
Expires/Max-Age
Путь внутри домена
Время жизни
Браузер
↓
Запрос с cookie
URL
Secure
Cookie: sessionId=123
Сервер
Атрибуты безопасности
HttpOnly
Headers
Проверка идентификатора сессии
SameSite
Запрещает доступ к
Cookie
Контролирует,
cookie из
отправляется
отправляются ли
клиентских скриптов
только по HTTPS-
cookies с кросс-
соединениям
сайтовыми
↓
Хранилище сессий
sessionId: 123 Пользователь: user42
Статус: активна

14.

DevTools: основные панели
Инструменты разработчика для тестирования веб-приложений
Elements
Console
Инспектор DOM
Консоль JavaScript
Инспектировать и модифицировать HTML и CSS в реальном времени
Отображать ошибки JavaScript и предупреждения
Выполнять JavaScript-код для взаимодействия со страницей
Находить селекторы (XPath, CSS) для тест-кейсов
Проверять соответствие интерфейса макетам
Использовать для отладки и тестирования функционала
Network
Application
Сетевые запросы
Клиентские данные
Отслеживать все сетевые запросы страницы
Управлять данными, сохраненными клиентом
Анализировать коды статуса HTTP и заголовки
Просматривать, изменять или удалять cookies
Оценивать время загрузки и размер ресурсов
Работать с localStorage и sessionStorage
Имитировать медленные сети (3G, 4G, offline)
Тестировать различные сценарии пользователя
Подсказка:Откройте DevTools, нажав F12 или Ctrl+ Shift+I (Cmd+ Shift+I на macOS)
14 / 16

15.

DevTools: практические сценарии
Анализ сетевых запросов
Симуляция мобильных устройств
Панель Network позволяет:
Функции эмуляции устройств:
Визуализировать коды ответов HTTP (4xx/5xx)
Тестирование отображения на разных размерах экрана
Определить причину неуспешных запросов
Анализировать время загрузки и размер ресурсов
Симуляция различных устройств (телефоны, планшеты)
Проверка адаптивного дизайна и отзывчивости
Полезно для выявления и диагностики проблем с API и сервером
Основано на функции "Toggle device toolbar" в DevTools
Проверка безопасности cookies
Симуляция медленных сетей
В панели Application можно:
Ограничение скорости сети:
Инспектировать cookies и их атрибуты
Симуляция подключений 3G/4G/Offline
Проверить наличие атрибутов HttpOnly и Secure
Оценка производительности в реальных условиях
Убедиться, что SameSite установлен правильно
Выявление узких мест в загрузке ресурсов
Критично для предотвращения уязвимостей и краж cookies
Полезно для тестирования пользовательского опыта в условиях

16.

В ыводы и рекомендации
Кл ючев ые аспекты тестирования
Рекомендации по тестированию
Архитект ура кл иент -сервер
Стратегия тестирования
Понимание взаимодействия между клиентом и сервером, а также компонентов
Разработка стратегии, сочетающей различные виды тестов на разных стадиях
(ф ронтенд, бэкенд, БД, CDN, прокси) и журналов (клиентских, серверных, базы
разработки: от юнит-тестов до системных и验收-тестов.
данных).
UR L и прот окол HTTP
Инструменты разработчика
Знание структуры UR L и HTTP-методов (GET, POS T, PUT, PATCH, DELETE )
Полное овладение DevTools и другими инструментами разработчика для
необходимо для тестирования сетевых запросов и понимания потоков данных.
анализа, отладки и тестирования веб-приложений.
Ф ункциональ ное и неф ункциональное тестирование
Ав томатизация тестиров ания
Интеграция автоматизированных тестов в процесс CI/CD для быстрого и
Различие между тестами: юнит, интеграции, системы, приёмки, регрессии,
надёжного выявления деф ектов.
производительности, безопасности, совместимости и UX.
Безопасное тестирование
Регулярное тестирование безопасности, включая проверку уязвимостей, кросс-
Cookies , сессии и кэширование
Понимание механизмов поддержания состояния между запросами и
оптимизации производительности через заголовки кэширования.
сайтовых скриптов и неправильной обработки данных.