Проект по тестированию веб-сайтов с использованием Chrome DevTools, анализом клиент-серверного взаимодействия и UI/UX проверками
В проекте изучены принципы клиент-серверной архитектуры, работа средств разработчика Chrome DevTools, особенности браузерных движков, протоколы HTTP/HTTPS, механизмы cookies. Освоено тестирование UI/UX с использованием Figma, валидация HTML через W3C Validator и кроссбраузерное тестирование.
🏗️ Задание 1. Клиент-серверная архитектура
Изучена трехзвенная и многозвенная архитектура. Для веб-приложения (интернет-банк) создана блок-схема с выделением 4 ключевых компонентов (клиент, веб-сервер, сервер БД, API-шлюз) с описанием назначения каждого. Заполнена таблица сбоев для компонентов (клиент и сервер БД) с указанием типов тестирования. Сравнены подходы горячего и холодного резерва по критериям готовности, синхронизации, времени переключения и стоимости. Написан сценарий теста отказоустойчивости для веб-сервера с горячим резервом.
🛠️ Задание 2. Chrome DevTools
Через DevTools изменен раздел в хедере сайта Школы 21 (скриншот). Найдены неиспользуемые CSS и JS элементы с указанием количества (скриншот). Выполнены замеры скорости загрузки на трех скоростях: Fast 4G (1.2 сек), Slow 4G (2.8 сек), 300 kbit/s (7.4 сек). Заблокировано изображение top-main-bg-2.webp, проверен внешний вид сайта без него.
🧠 Задание 3. Движки браузеров
Выбраны 6 ключевых элементов интерфейса сайта Школы 21. Проведено кросс-браузерное тестирование в Chrome (Blink), Firefox (Gecko), Edge (Blink). Выявлены различия в отображении шрифтов, отступов и hover-эффектов. Для каждого отличия указана предполагаемая техническая причина. Написаны 4 рекомендации разработчикам по обеспечению кросс-браузерной совместимости.
🔐 Задание 4. Протоколы HTTP и HTTPS
Описан каждый шаг установления HTTPS-соединения (от запроса сертификата до шифрования сессии) с целями и устраняемыми рисками. Проанализирован сертификат сайта github.com: TLS 1.3, Let's Encrypt, действителен. Создана шпаргалка по кодам HTTP (100-599) с колонками: что видит пользователь, что происходит технически, как тестировать, куда эскалировать. Выполнены запросы к публичному API (JSONPlaceholder) с кодами 200, 201, 404, 500.
🍪 Задание 5. Cookies
Проанализированы 5 cookies на сайте интернет-магазина с указанием имени, типа и предполагаемого назначения. Проверены флаги безопасности (Secure, HttpOnly, SameSite) для cookies с критичными данными. Добавлен товар в корзину, найден и описан cookie, отвечающий за корзину (имя, флаги, изменение значения). Удален cookie сессии через DevTools, описаны изменения поведения сайта (выход из аккаунта).
🎨 Задание 6. Тестирование UI веб-сайта
Сравнен локальный сайт с макетом в Figma. Найдены 3 отличия: несовпадение отступов в хедере, другой цвет кнопки, отсутствие hover-эффекта. Для каждого отличия оформлен баг-репорт со скриншотами и ссылкой на макет.
✅ Задание 7. Валидация HTML
Выполнена валидация сайта через validator.w3.org. Составлен отчет: общее количество ошибок (14), критические (3), частые типы (отсутствие alt у картинок, вложенные формы). Ошибки распределены по приоритетам: высокий (отсутствие alt), средний (дублирование id), низкий (лишние пробелы в коде).
| Тема | Что освоено |
|---|---|
| Chrome DevTools | Редактирование HTML/CSS на лету, анализ покрытия кода, симуляция скорости, блокировка ресурсов |
| Браузерные движки | Blink, Gecko, WebKit — различия в рендеринге и влияние на тестирование |
| HTTP/HTTPS | Коды состояния, TLS-сертификаты, SSL-рукопожатие |
| Cookies | Типы, флаги безопасности (Secure, HttpOnly, SameSite), управление через DevTools |
| UI/UX тестирование | Сравнение с макетом в Figma, баг-репорты на визуальные отличия |
| Валидация HTML | W3C Validator, критичность ошибок, приоритизация |
| Клиент-сервер | Трехзвенная архитектура, отказоустойчивость, горячий/холодный резерв |
| Файл | Содержание |
|---|---|
| src/task_1.md | Блок-схема архитектуры, таблица сбоев, сравнение горячего/холодного резерва |
| src/task_2.md | Скриншоты DevTools, замеры скорости загрузки |
| src/task_3.md | Таблица кросс-браузерных отличий, рекомендации разработчикам |
| src/task_4.md | Описание HTTPS, шпаргалка по кодам HTTP, скриншоты API-запросов |
| src/task_5.md | Анализ cookies, проверка безопасности, удаление сессии |
| src/task_6.md | Баг-репорты по отличиям от макета Figma |
| src/task_7.md | Отчет валидации HTML с приоритезацией ошибок |