Проверить отправку данных в базу данных через DevTools

Проверка отправки данных в БД через DevTools

1. Как проверить отправку данных через DevTools (вкладка Network)

Шаг 1: Открытие DevTools

1. Откройте браузер (Chrome, Firefox, Edge)
2. Нажмите F12 или Ctrl+Shift+I (Cmd+Option+I на Mac)
3. Перейдите на вкладку Network
4. Убедитесь, что запись активна (красная кнопка запуска)

Шаг 2: Заполнение формы и отправка

1. В окне браузера заполните форму данными:
   • Например, регистрация: Name, Email, Password
2. Нажмите кнопку "Submit" или "Отправить"
3. В Network панели вы увидите список всех HTTP запросов

Шаг 3: Поиск нужного запроса

1. Отфильтруйте по типу запроса:

   • Выберите XHR (XMLHttpRequest) или Fetch для современных приложений
   • Это исключит изображения, стили, скрипты

2. Найдите запрос, отправляющий данные формы:

   • Обычно имеет название: submit, api/register, login, /users, /form-data
   • Метод: POST (редко PUT или PATCH)

Шаг 4: Анализ запроса

В панели Network нажмите на запрос, вы увидите:

• General — общая информация (URL, метод, IP адрес сервера)
• Request Headers — заголовки запроса
• Request Body — отправленные данные (ВАЖНО!)
• Response — ответ от сервера
• Response Headers — заголовки ответа
• Timing — время выполнения

---

2. Какую информацию вы будете искать в запросе?

A. В Request Body (самое важное)

Что смотреть:

{
  "name": "Иван Петров",
  "email": "ivan@example.com",
  "password": "hash_or_plain",
  "phone": "+7-900-123-45-67"
}

Проверки:

B. В Request Headers

Обратите внимание:

C. Размер и скорость запроса

• Request Size: должен быть разумного размера (не 10+ MB)
• Time: от 100ms до 5000ms в зависимости от сложности операции

---

3. Как интерпретировать коды ответа сервера?

Успешные коды (2xx)

Проверка при 200/201:

1. Response Body: содержит ли подтверждение?

   {
     "success": true,
     "user_id": "12345",
     "message": "User created successfully"
   }
   

2. Повторная загрузка страницы: исчезла ли форма? Появилось ли сообщение спасибо?

3. Проверка базы: если есть доступ, убедитесь, что пользователь добавлен

---

Ошибки клиента (4xx)

Пример ошибки:

{
  "error": "Email already exists",
  "field": "email",
  "code": 409
}

---

Ошибки сервера (5xx) — КРИТИЧНЫ

Действие: Это баги, требуют инвестигации разработчиков.

---

4. Альтернативные способы проверки

Способ 1: Проверка Response (если возвращается ID)

В Network → выберите запрос → вкладка Response

Ищите:

• "id": "12345" — пользователь создан
• "success": true — операция завершена
• "data": {...} — возвращены сохраненные данные

Проверка: Скопируйте ID, перейдите на профиль /users/12345, проверьте данные.

---

Способ 2: Проверка через Local Storage / Session Storage

DevTools → Application (или Storage) → Local Storage → ваш домен

Что ищем:

• user_id, token, user_data — система сохранила данные локально
• Если здесь есть ID, значит фронт получил ответ от сервера

---

Способ 3: Проверка Cookies

DevTools → Application → Cookies → ваш домен

Проверьте:

• session_id или auth_token — появилась ли новая куки?
• HttpOnly флаг — защищена ли от XSS?
• Secure флаг — отправляется ли только через HTTPS?

---

Способ 4: Проверка Console (вкладка Console)

Если приложение выводит логи:

console.log('User created:', userData);

В консоли можете увидеть объект с данными пользователя.

---

Способ 5: API запрос в терминале (curl)

Если знаете API endpoint:

curl -X GET https://api.example.com/users/12345 \\
  -H "Authorization: Bearer YOUR_TOKEN"

Результат: JSON с данными пользователя подтверждает, что данные в БД.

---

Способ 6: Повторная загрузка страницы

1. Заполните форму
2. Отправьте
3. Перезагрузите страницу (F5)
4. Проверьте:
   • Если данные все еще там → они сохранены в БД
   • Если исчезли → возможно, ошибка

---

Способ 7: Проверка email / SMS (если применимо)

Для форм регистрации:

1. Проверьте почту на письмо подтверждения
2. Проверьте SMS на код активации
3. Если пришло → данные точно в БД

---

Матрица проверок

---

Частые ошибки и как их выявить

---

Итоговый чек-лист для QA Engineer

• Запрос отправлен (есть в Network)
• Метод правильный (POST для создания)
• Статус код 200-201 (успешно)
• Response содержит ID или подтверждение
• Данные совпадают с тем, что ввели
• Пароль/чувствительные данные защищены
• Проверена база данных (если доступ есть)
• Email подтверждение пришло (если требуется)
• Повторная загрузка страницы показывает сохраненные данные