Хорошо написанный баг-репорт — это мост между QA и разработкой. Плохие баг-репорты приводят к переписке туда-сюда, потере времени и фрустрации. Отличные баг-репорты обеспечивают быстрое исправление багов, улучшают командную работу и завоевывают уважение к команде QA. В этом всеобъемлющем руководстве мы рассмотрим, как писать баг-репорты, которые разработчики действительно любят.
Введение: Почему Баг-Репорты Важны
Цена Плохих Баг-Репортов
Плохие баг-репорты вызывают:
- Потерю времени: Разработчики тратят часы, пытаясь воспроизвести проблемы
- Задержки исправлений: Баги возвращаются в QA за дополнительной информацией
- Трение в команде: Фрустрация между QA и разработкой
- Потерянные баги: Неясные репорты деприоритизируются или закрываются
- Снижение доверия: Команда QA теряет доверие
Ценность Отличных Баг-Репортов
Отличные баг-репорты обеспечивают:
- Быстрые исправления: Разработчики могут немедленно понять и исправить проблему
- Точные оценки: Четкие репорты позволяют лучше планировать
- Командная работа: Взаимное уважение между QA и разработкой
- Улучшение качества: Понимание паттернов и корневых причин
- Профессиональная репутация: QA воспринимаются как партнеры по качеству, а не стражи
Перспектива Разработчика
Что разработчики хотят видеть в баг-репорте:
- “Могу ли я воспроизвести это?”
- “Что именно не так?”
- “Что должно происходить вместо этого?”
- “Это критично или может подождать?”
- “Есть ли у меня вся необходимая информация?”
Что раздражает разработчиков:
- “Не работает” (Что не работает? Где? Как?)
- “Страница сломана” (Какая страница? Что в ней сломано?)
- “Иногда кнопка не срабатывает” (Когда? При каких условиях?)
- Отсутствуют шаги воспроизведения
- Нет скриншотов или доказательств
- Не могу воспроизвести в своем окружении
Анатомия Идеального Баг-Репорта
Обязательные Компоненты
Каждый баг-репорт должен включать:
- Резюме/Заголовок — Описание в одну строку
- Окружение — Где происходит баг
- Предусловия — Необходимая настройка
- Шаги Воспроизведения — Точные действия для активации бага
- Ожидаемый Результат — Что должно происходить
- Фактический Результат — Что происходит на самом деле
- Серьезность/Приоритет — Оценка воздействия
- Приложения — Скриншоты, видео, логи
Необязательные Но Ценные Компоненты
- Частота — Как часто происходит
- Обходной Путь — Временное решение, если существует
- Дополнительные Заметки — Контекст, связанные баги
- Тестовые Данные — Использованные конкретные данные
- Влияние на Пользователя — Кто затронут и как
Компонент 1: Резюме/Заголовок
Плохие Заголовки
- ❌ "Проблема с логином"
- ❌ "Баг в чекауте"
- ❌ "Ошибка на странице"
- ❌ "Не работает"
- ❌ "Проблема с поиском"
Почему они плохие:
- Слишком расплывчаты
- Не указывают серьезность
- Несколько багов могут совпадать
- Не указано действие
Хорошие Заголовки
- ✅ "Кнопка входа не реагирует после ввода неверного формата email"
- ✅ "Чекаут падает с ошибкой 500 при применении истекшего промокода"
- ✅ "Поиск товаров не возвращает результаты для запросов со спецсимволами"
- ✅ "Страница профиля пользователя отображает неверное количество заказов для премиум-пользователей"
Что делает их хорошими:
- Конкретность: Затронутый компонент/функция
- Ориентация на действие: Описывает, что падает
- Условие: Когда падает
- Сканируемость: Разработчик может быстро понять проблему
Формула Заголовка
[Компонент/Страница] + [Действие/Поведение] + [Условие/Контекст]
Примеры:
"Корзина" + "удаляет товары" + "когда пользователь выходит из системы"
"Сброс пароля" + "email не отправляется" + "для пользователей со спецсимволами в email"
"Дашборд" + "показывает неверные метрики" + "после смены часового пояса"
Лучшие Практики Заголовка
- Держите его короче 80 символов (если возможно)
- Начинайте с затронутого компонента (легко сканировать в списках)
- Используйте активный залог (“Кнопка не реагирует”, а не “Кнопка не реагирующая”)
- Избегайте избыточных слов (“баг”, “проблема”, “issue” — это подразумевается)
- Включайте коды ошибок если применимо (“API возвращает ошибку 404”)
Примеры До/После:
- ❌ До: "Проблема с оплатой"
- ✅ После: "Обработка платежа падает с ошибкой таймаута для заказов >$1000"
- ❌ До: "Поиск сломан"
- ✅ После: "Автозаполнение поиска не показывает подсказки для запросов <3 символов"
- ❌ До: "Проблема с email"
- ✅ После: "Email подтверждения заказа содержит неверные названия товаров"
Компонент 2: Детали Окружения
Что Включать
Информация о Приложении:
- Версия приложения/номер сборки
- Окружение (dev, staging, production)
- URL или endpoint
Браузер/Устройство:
- Название браузера и версия
- Операционная Система и версия
- Разрешение экрана (для багов UI)
- Модель устройства (для мобильных)
Учетная Запись Пользователя:
- Роль/права пользователя
- Тип аккаунта (бесплатный/премиум/админ)
- Возраст аккаунта или специальные состояния
Сеть/Соединение:
- Тип сети (WiFi, 4G, 3G)
- Статус VPN (если релевантно)
Шаблон Окружения
Окружение:
- Приложение: E-commerce Web App v3.5.2 (Build #456)
- URL: https://staging.example.com
- Браузер: Chrome 120.0.6099.109
- ОС: macOS Sonoma 14.2.1
- Разрешение Экрана: 1920x1080
- Учетная Запись: test-premium@example.com (Премиум-пользователь, создан 2025-09-01)
- Сеть: WiFi
Окружение Мобильного Баг-Репорта:
Окружение:
- Приложение: Mobile Banking App v2.3.0 (Build #234)
- Устройство: iPhone 14 Pro
- Версия iOS: 17.2
- Размер Экрана: 6.1" (2556×1179)
- Учетная Запись: testuser@bank.com (Счета Checking + Savings)
- Сеть: 4G LTE
- Дополнительно: Face ID включен, Touch ID отключен
Окружение API Баг-Репорта:
Окружение:
- API: Payment Gateway API v2.1
- Endpoint: POST /api/v2/payments
- Окружение: Staging (https://api-staging.example.com)
- API Key: pk_test_xxx (тестовый режим)
- Инструмент Запроса: Postman v10.19
- Временная метка: 2025-10-01 14:35:22 UTC
Почему Окружение Важно
Различное поведение происходит в разных окружениях:
Пример: Баг появляется только в:
- Safari (не в Chrome/Firefox) → Специфично для браузера
- Production (не в staging) → Проблема данных или конфигурации
- Мобильном (не на десктопе) → Проблема адаптивного дизайна
- Премиум-аккаунтах (не в бесплатных) → Проблема прав или feature flag
Компонент 3: Предусловия
Что Такое Предусловия?
Предусловия — это необходимое состояние системы/данных перед воспроизведением бага.
Когда Включать Предусловия
Включайте, когда баг требует:
- Специфическое состояние пользователя (залогинен, определенная роль)
- Специфические данные (товары в корзине, сохраненные способы оплаты)
- Специфические настройки (уведомления включены, темная тема)
- Специфическое время (в рабочие часы, после полуночи)
Примеры Предусловий
Пример 1: Баг Чекаута E-commerce
Предусловия:
- Пользователь залогинен с премиум-аккаунтом
- Корзина содержит 3 товара (общая сумма >$100)
- У пользователя 2 сохраненных способа оплаты
- Активный промокод "SAVE20" в системе
- Адрес доставки пользователя в Калифорнии, США
Пример 2: Баг Банковской Транзакции
Предусловия:
- У пользователя есть счет Checking с балансом $500
- У пользователя есть счет Savings с балансом $1,000
- У пользователя есть активная дебетовая карта, привязанная к Checking
- Нет ожидающих транзакций
- Аккаунт в хорошем состоянии (без holds/freezes)
Пример 3: Баг Уведомлений
Предусловия:
- Пользователь зарегистрирован >30 дней назад
- У пользователя включены email-уведомления
- Пользователь подписался на рекламные emails
- Пользователь не открывал приложение последние 7 дней
- Система запланировала пакетную отправку email на 9 AM UTC
Распространенная Ошибка: Смешивание Предусловий с Шагами
❌ Неправильно:
Предусловия: Нажать на кнопку входа
✅ Правильно:
Предусловия: Существует учетная запись с email test@example.com
Шаги Воспроизведения:
1. Нажать на кнопку входа
2. ...
Помните: Предусловия = состояние до начала теста; Шаги = действия для активации бага.
Компонент 4: Шаги Воспроизведения
Золотое Правило
Если разработчик не может воспроизвести баг по вашим шагам, баг не будет исправлен.
Шаблон Шагов Воспроизведения
Шаги Воспроизведения:
1. [Первое действие с точными деталями]
2. [Второе действие с точными деталями]
3. [Третье действие с точными деталями]
...
N. [Финальное действие, активирующее баг]
Лучшие Практики для Шагов
1. Будьте Точны и Конкретны
- ❌ Плохо: "Перейти в чекаут"
- ✅ Хорошо: "Нажать на кнопку 'Перейти к Оформлению' внизу страницы корзины"
- ❌ Плохо: "Ввести email"
- ✅ Хорошо: "Ввести email: 'test@example.com' в поле 'Адрес Email'"
- ❌ Плохо: "Поискать что-нибудь"
- ✅ Хорошо: "Ввести 'беспроводные наушники' в строке поиска и нажать Enter"
2. Нумеруйте Ваши Шаги
✅ Хорошо:
1. Перейти на https://example.com/login
2. Ввести email: "user@test.com"
3. Ввести пароль: "Test123!"
4. Нажать на кнопку "Войти"
5. Наблюдать сообщение об ошибке
3. Включайте Точные Данные
- ❌ Плохо: "Ввести большую сумму"
- ✅ Хорошо: "Ввести сумму: 999999.99"
- ❌ Плохо: "Загрузить изображение"
- ✅ Хорошо: "Загрузить изображение: 'test-image.png' (5MB, 3000x2000px)"
- ❌ Плохо: "Выбрать дату"
- ✅ Хорошо: "Выбрать дату: 29 февраля 2024 из датапикера"
4. Одно Действие на Шаг
❌ Плохо:
1. Войти и перейти в настройки и сменить email
✅ Хорошо:
1. Нажать на кнопку "Войти"
2. Ввести учетные данные и отправить
3. Перейти на страницу Настроек
4. Нажать на опцию "Сменить Email"
5. Указывайте Тайминг/Ожидания Когда Релевантно
Пример:
3. Нажать на кнопку "Отправить Заказ"
4. Дождаться загрузки страницы подтверждения (обычно 2-3 секунды)
5. Наблюдать: Сообщение об ошибке появляется вместо подтверждения
6. Включайте Детали Навигации
- ❌ Плохо: "Перейти в профиль"
- ✅ Хорошо: "Нажать на аватар пользователя в правом верхнем углу → Выбрать 'Мой Профиль' из выпадающего меню"
- ❌ Плохо: "Открыть настройки"
- ✅ Хорошо: "Перейти в Настройки через боковое меню (3-й пункт сверху)"
Примеры из Реального Мира
Пример 1: Баг Чекаута
Шаги Воспроизведения:
1. Перейти на https://store.example.com
2. Добавить "Беспроводная Мышь" в корзину (Product ID: WM-001)
3. Добавить "USB Кабель" в корзину (Product ID: USB-C-003)
4. Нажать на иконку корзины (правый верхний угол)
5. Проверить, что корзина показывает 2 товара
6. Нажать "Перейти к Оформлению"
7. На странице чекаута ввести промокод: "SAVE20" в поле кода скидки
8. Нажать кнопку "Применить" рядом с полем промокода
9. Наблюдать применение скидки: Сумма корзины меняется с $45.00 на $36.00
10. Нажать "Продолжить к Оплате"
11. Выбрать "Кредитная Карта" как способ оплаты
12. Ввести данные тестовой карты:
- Номер Карты: 4242 4242 4242 4242
- Срок: 12/25
- CVV: 123
13. Нажать кнопку "Оформить Заказ"
14. Наблюдать появление ошибки
Пример 2: Баг Поиска
Шаги Воспроизведения:
1. Перейти на https://example.com
2. Убедиться, что не залогинен (использовать режим инкогнито)
3. Нажать на строку поиска вверху страницы
4. Ввести: "O'Reilly" (включить апостроф)
5. Нажать Enter или кликнуть на иконку Поиска
6. Наблюдать: Результаты не найдены (Ожидалось: Книги O'Reilly)
Альтернативные поисковые запросы, которые также падают:
- "Jack & Jill"
- "AT&T"
- Любой запрос, содержащий спецсимволы: ' " & < >
Пример 3: Баг, Зависящий от Времени
Шаги Воспроизведения:
1. Войти как пользователь: admin@example.com
2. Перейти в Отчеты → Сформировать Месячный Отчет
3. Выбрать диапазон дат: 1-30 сентября, 2025
4. Нажать кнопку "Сформировать Отчет"
5. НЕМЕДЛЕННО (в течение 2 секунд) нажать кнопку "Назад" в браузере
6. Снова перейти вперед на страницу Отчетов
7. Наблюдать: Отчет показывается как "В Процессе", но никогда не завершается
Примечание: Баг НЕ происходит, если подождать 5+ секунд перед нажатием назад.
Минимальные Шаги Воспроизведения
После написания шагов попытайтесь минимизировать их:
Начальные шаги (10 шагов):
1. Войти
2. Перейти в дашборд
3. Нажать на профиль
4. Редактировать профиль
5. Добавить номер телефона
6. Сохранить
7. Перейти в настройки
8. Нажать на уведомления
9. Включить SMS уведомления
10. Наблюдать ошибку
Минимизированные (4 шага):
1. Войти как пользователь с сохраненным номером телефона
2. Перейти в Настройки → Уведомления
3. Переключить "Включить SMS Уведомления" в ON
4. Наблюдать ошибку: "Неверный номер телефона"
→ Шаги 1-6 были ненужными, если использовать предусловие "У пользователя сохранен номер телефона"
Преимущества минимальных шагов:
- Быстрее для разработчиков воспроизвести
- Яснее корневая причина
- Легче тестировать исправление
Компонент 5: Ожидаемый vs Фактический Результат
Ожидаемый Результат
Что должно происходить согласно требованиям/здравому смыслу.
Ожидаемый Результат:
- Отображается страница подтверждения заказа
- Email подтверждения отправлен на user@example.com
- Заказ появляется в "Мои Заказы" со статусом "Обрабатывается"
- Платеж списан с кредитной карты
- Инвентарь уменьшен для купленных товаров
Фактический Результат
Что происходит на самом деле, включая точные сообщения об ошибках.
Фактический Результат:
- Страница показывает ошибку: "Обработка платежа не удалась"
- Отображается код ошибки: ERR_PAYMENT_TIMEOUT_500
- Email подтверждения не получен
- Заказ НЕ появляется в "Мои Заказы"
- Кредитная карта НЕ списана
- Инвентарь НЕ уменьшен
- Консоль браузера показывает: "TypeError: Cannot read property 'transactionId' of undefined"
Лучшие Практики
1. Будьте Конкретны О Том, Что Не Так
❌ Плохо:
Фактический Результат: Не работает
✅ Хорошо:
Фактический Результат:
- Кнопка "Отправить" серая (не нажимается)
- Форма показывает ошибку: "Неверный формат email" под полем email
- Поле email показывает значение: "test@example.com" (который является верным форматом)
2. Включайте Точные Сообщения об Ошибках
❌ Плохо:
Фактический Результат: Появляется сообщение об ошибке
✅ Хорошо:
Фактический Результат: Отображается сообщение об ошибке:
"Ошибка 500: Internal Server Error
Невозможно обработать платеж в данный момент. Пожалуйста, попробуйте позже.
Transaction ID: TXN-2025-10-01-1234"
3. Цитируйте Сообщения об Ошибках Точно
Используйте кавычки для точного текста:
Фактический Результат:
Баннер ошибки отображает: "Oops! Something went wrong. Error code: 404"
(Примечание: "Oops" с заглавной O, "went wrong" без запятой)
4. Включайте Все Видимые Изменения
Ожидаемый Результат:
- Кнопка "Добавить в Корзину" меняется на "Добавлено!"
- Иконка корзины показывает значок с "1"
- Уведомление об успехе появляется ненадолго
Фактический Результат:
- Кнопка "Добавить в Корзину" МЕНЯЕТСЯ на "Добавлено!" ✅
- Значок иконки корзины ОБНОВЛЯЕТСЯ на "1" ✅
- Уведомление об успехе НЕ появляется ❌ (Это баг)
Ожидаемый vs Фактический: Примеры
Пример 1: Визуальный Баг
Ожидаемый Результат:
- Изображение товара отображается 300x300px
- Изображение центрировано в карточке товара
- Изображение имеет 10px border radius (скругленные углы)
- Изображение загружается за 1 секунду
Фактический Результат:
- Изображение товара отображается 150x300px (неверное соотношение сторон, растянуто)
- Изображение выровнено слева (не центрировано)
- Изображение имеет 0px border radius (острые углы)
- Изображение загружается корректно за 1 секунду ✅
Пример 2: Баг Вычисления
Ожидаемый Результат:
Расчет суммы корзины:
- Промежуточный итог: $100.00 (2 товара @ $50 каждый)
- Скидка (20%): -$20.00
- Доставка: $5.00
- Налог (10%): $8.50 (рассчитано на $100 - $20 + $5 = $85)
- Итого: $93.50
Фактический Результат:
- Промежуточный итог: $100.00 ✅
- Скидка (20%): -$20.00 ✅
- Доставка: $5.00 ✅
- Налог (10%): $10.00 ❌ (рассчитано на $100 вместо $85)
- Итого: $95.00 ❌ (должно быть $93.50)
→ Баг: Налог рассчитан на промежуточный итог до применения скидки
Пример 3: Баг Производительности
Ожидаемый Результат:
- Время загрузки страницы: <3 секунд
- Результаты поиска появляются: <1 секунды после запроса
- Страница остается отзывчивой во время поиска
Фактический Результат:
- Время загрузки страницы: 12 секунд ❌
- Результаты поиска появляются: 8 секунд после запроса ❌
- Страница зависает (не отзывается) во время поиска ❌
- Консоль браузера показывает предупреждение: "Long task took 6234ms"
Компонент 6: Серьезность и Приоритет
Серьезность: Воздействие на Систему
Серьезность = Насколько плох баг?
Серьезность | Определение | Пример |
---|---|---|
Критическая (S1) | Крах системы, потеря данных, брешь в безопасности | Платежная система упала, данные пользователей раскрыты |
Высокая (S2) | Основная функция сломана, нет обходного пути | Невозможно завершить чекаут, невозможно войти |
Средняя (S3) | Функция частично сломана, есть обходной путь | Фильтр не работает, можно прокручивать вручную |
Низкая (S4) | Незначительная проблема, косметическая | Кнопка не выровнена, опечатка в тексте |
Приоритет: Срочность Исправления
Приоритет = Как скоро должно быть исправлено?
Приоритет | Определение | Пример |
---|---|---|
P1 (Срочный) | Исправить немедленно (хотфикс) | Сбой платежей в продакшене |
P2 (Высокий) | Исправить в текущем спринте | Основная функция сломана в бете |
P3 (Средний) | Исправить в следующем спринте | Проблема второстепенной функции |
P4 (Низкий) | Исправить когда возможно | Косметические проблемы |
Матрица Серьезность vs Приоритет
│ P1 │ P2 │ P3 │ P4
│ Срочно │ Высокий│ Средний│ Низкий
───────────────┼────────┼────────┼────────┼────────
S1 Критическая │ 🔴 │ 🟠 │ ⚪ │ ⚪
───────────────┼────────┼────────┼────────┼────────
S2 Высокая │ 🟠 │ 🟠 │ 🟡 │ ⚪
───────────────┼────────┼────────┼────────┼────────
S3 Средняя │ 🟡 │ 🟡 │ 🟢 │ ⚪
───────────────┼────────┼────────┼────────┼────────
S4 Низкая │ ⚪ │ 🟢 │ 🟢 │ 🔵
🔴 Критический - Исправить немедленно
🟠 Высокий - Исправить в течение 24 часов
🟡 Средний - Исправить в течение спринта
🟢 Нормальный - Исправить в следующем спринте
🔵 Низкий - Бэклог
⚪ Маловероятная комбинация
Примеры из Реального Мира
Пример 1: Критическая Серьезность, Срочный Приоритет (S1/P1)
Баг: Payment gateway возвращает ошибку 500 для ВСЕХ транзакций
Воздействие:
- 100% клиентов не могут завершить покупки
- Доход полностью остановлен
- Большой объем обращений в поддержку
- Потенциальная потеря дохода: $10,000/час
Серьезность: S1 Критическая
Приоритет: P1 Срочный (Требуется немедленный хотфикс)
Пример 2: Высокая Серьезность, Средний Приоритет (S2/P3)
Баг: Функция экспорта в PDF сломана в админ-панели
Воздействие:
- Админы не могут генерировать PDF отчеты
- Обходной путь: Использовать экспорт в CSV вместо этого
- Затрагивает: 5 пользователей-админов
- Продакшен: Не блокирует клиентские функции
Серьезность: S2 Высокая (основная функция сломана)
Приоритет: P3 Средний (исправить в следующем спринте; есть обходной путь)
Пример 3: Низкая Серьезность, Высокий Приоритет (S4/P2)
Баг: Логотип компании отображается неправильно на главной странице
Воздействие:
- Только визуальная/брендинговая проблема
- Нет функционального воздействия
- Очень заметно (главная страница)
- CEO заметил и эскалировал
- Маркетинговая кампания запускается завтра
Серьезность: S4 Низкая (косметическая)
Приоритет: P2 Высокий (высокая заметность, запрос руководства)
Оценка Влияния на Пользователя
Включайте кто затронут и сколько:
Влияние на Пользователя:
- Затронутые Пользователи: Все премиум-пользователи (прим. 5,000 пользователей)
- Заблокированный Поток Пользователя: Не могут получить доступ к премиум-контенту
- Обходной Путь: Нет
- Тикеты Поддержки Клиентов: 23 тикета за последние 2 часа
- Бизнес-Воздействие: Премиум-функция недоступна, возможные отмены
→ Обосновывает Высокую Серьезность, Срочный Приоритет
Компонент 7: Приложения (Скриншоты, Видео, Логи)
Скриншоты: Лучшие Практики
1. Аннотируйте Ваши Скриншоты
- ❌ Плохо: Чистый скриншот без аннотаций
- ✅ Хорошо: Скриншот с:
- Красной стрелкой, указывающей на баг
- Красным кругом, выделяющим проблему
- Текстовой аннотацией, объясняющей проблему
Инструменты для аннотации:
- Snagit
- Greenshot (Windows, бесплатно)
- Skitch (Mac, бесплатно)
- CloudApp
- Встроенные инструменты ОС (macOS: Cmd+Shift+4+5)
2. Захватывайте Полный Контекст
Включать:
- Всё окно браузера (показывает URL, версию браузера)
- Релевантные элементы UI вокруг бага
- Полные сообщения об ошибках
- Консоль/вкладку сети если релевантно
3. Множественные Скриншоты для Многошаговых Багов
Приложение 1: screenshot_step3_cart.png
→ Показывает корзину с 2 товарами перед нажатием на чекаут
Приложение 2: screenshot_step5_promo_applied.png
→ Показывает успешно примененную скидку
Приложение 3: screenshot_step7_error.png
→ Показывает ошибку при нажатии "Оформить Заказ"
4. Соглашение об Именовании Скриншотов
❌ Плохо: image1.png, screenshot.png, Screen Shot 2025-10-01 at 2.45.23 PM.png
✅ Хорошо:
- bug-checkout-payment-error.png
- step3-cart-before-checkout.png
- console-error-payment-timeout.png
- network-tab-500-error.png
Записи Экрана: Когда и Как
Когда Использовать Видео:
- Баг требует множественных взаимодействий
- Баги, зависящие от времени
- Баги анимации/переходов
- Состояния hover или всплывающие подсказки
- Периодические баги
- Сложные пользовательские потоки
Инструменты Записи:
- Loom (веб-базированный, бесплатный тариф)
- CloudApp
- ScreenToGif (Windows, бесплатно, создает GIF)
- QuickTime (Mac, встроенный)
- OBS Studio (бесплатно, открытый код)
Лучшие Практики Видео:
✅ Хорошая видеозапись:
1. Начать запись до воспроизведения бага
2. Показать адресную строку (показывает окружение)
3. Озвучивать шаги если возможно ("Сейчас я нажимаю на чекаут...")
4. Держать видео < 2 минут (редактировать если дольше)
5. Поставить на паузу в момент ошибки/бага (3-5 секунд)
6. Показать релевантную консоль браузера если применимо
Формат файла: MP4 или GIF (если короткое)
Макс размер: <50MB (сжать если нужно)
Пример Структуры Видео:
0:00-0:05 - Показать начальное состояние (залогинен, корзина с товарами)
0:05-0:15 - Пройти через шаги чекаута
0:15-0:20 - Применить промокод
0:20-0:30 - Ввести данные оплаты
0:30-0:35 - Нажать "Оформить Заказ"
0:35-0:45 - Ошибка появляется (поставить на паузу здесь на 5 секунд)
0:45-0:50 - Показать консоль браузера с ошибкой
Логи Консоли Браузера
Когда Включать Консоль:
- Ошибки JavaScript
- Сетевые ошибки (неудачные API вызовы)
- Проблемы производительности
- Проблемы интеграции с третьими сторонами
Как Захватить Консоль:
1. Открыть Developer Tools (F12 или Cmd+Option+I)
2. Перейти на вкладку Console
3. Воспроизвести баг
4. Правый клик в консоли → "Save as..."
ИЛИ
Сделать скриншот консоли
Включать:
- Сообщения об ошибках (красные)
- Сообщения предупреждений (желтые)
- Неудачные сетевые запросы
- Трассировки стека
Пример Лога Консоли:
Приложение: console-error-payment.txt
Содержание:
---
payment.js:142 Uncaught TypeError: Cannot read property 'transactionId' of undefined
at processPayment (payment.js:142)
at submitOrder (checkout.js:89)
at HTMLButtonElement.<anonymous> (checkout.js:45)
POST https://api.example.com/payments 500 (Internal Server Error)
Отправленная полезная нагрузка:
{
"amount": 9350,
"currency": "USD",
"promo_code": "SAVE20"
}
Ответ:
{
"error": "Internal server error",
"code": "ERR_PAYMENT_TIMEOUT_500"
}
---
Информация Вкладки Сеть
Для Багов API/Backend:
Включать:
- URL запроса
- Метод запроса (GET, POST, и т.д.)
- Заголовки запроса
- Полезную нагрузку запроса
- Код статуса ответа
- Тело ответа
Скриншот Вкладки Сеть Должен Показывать:
Приложение: network-tab-payment-500-error.png
Видимо на скриншоте:
- Запрос: POST /api/v2/payments
- Статус: 500 Internal Server Error
- Время ответа: 5.2s (таймаут)
- Видна полезная нагрузка запроса
- Видно тело ответа
HAR Файлы (HTTP Archive)
Для сложных сетевых проблем:
Как экспортировать HAR файл:
1. Открыть Developer Tools
2. Перейти на вкладку Network
3. Поставить галочку "Preserve log"
4. Воспроизвести баг
5. Правый клик на вкладке Network → "Save all as HAR with content"
Приложение: checkout-payment-failure.har
⚠️ Предупреждение: Очистить чувствительные данные (пароли, токены, кредитные карты) перед отправкой!
Логи из Приложения
Для серверных или мобильных багов:
Приложение: application-error.log
Содержание:
---
[2025-10-01 14:35:22] ERROR: Payment processing failed
[2025-10-01 14:35:22] User ID: 12345
[2025-10-01 14:35:22] Order ID: ORD-2025-10-001234
[2025-10-01 14:35:22] Payment Gateway Response: TIMEOUT
[2025-10-01 14:35:22] Stack trace:
at PaymentService.processPayment (PaymentService.java:142)
at CheckoutController.submitOrder (CheckoutController.java:89)
---
Компонент 8: Дополнительная Информация
Частота
Как часто происходит баг?
Частота: Всегда (100%) — Происходит каждый раз при следовании шагам
Частота: Часто (75%) — Происходит 3 из 4 раз
Частота: Иногда (25-50%) — Периодически, произошло 3 раза из 10 попыток
Частота: Редко (<10%) — Произошло дважды за 30 попыток
Частота: Однажды — Наблюдалось только один раз, не могу воспроизвести
Частота влияет на приоритет:
- Всегда → Более высокий приоритет (надежное воспроизведение)
- Периодически → Может потребоваться больше исследования
- Однажды → Может быть сложно исправить (сложно воспроизвести)
Обходной Путь
Если существует временное решение:
Обходной Путь:
- Использовать "Экспресс-Чекаут" вместо "Стандартного Чекаута"
- ИЛИ вручную перейти на /checkout/express
- Это обходит шаг с промокодом и позволяет завершить заказ
- Ограничение: Пользователь не может применить промокод с этим обходным путем
Воздействие: Снижает серьезность с S1 до S2 (серьезный, но есть обходной путь)
Тестовые Данные
Использованные конкретные данные:
Тестовые Данные:
- Учетная Запись: test-premium@example.com / Test123!
- Кредитная Карта: 4242 4242 4242 4242 (тестовая карта Stripe)
- Промокод: SAVE20 (20% скидка, истекает 2025-12-31)
- Товары в корзине:
* Беспроводная Мышь (SKU: WM-001) - $25.00
* USB Кабель (SKU: USB-C-003) - $20.00
- Адрес Доставки: 123 Main St, San Francisco, CA 94105
Связанные Баги
Ссылка на похожие или связанные проблемы:
Связанные Баги:
- BUG-456: Похожая проблема таймаута платежа с другим промокодом
- BUG-489: Чекаут падает для заказов >$500 (может быть та же корневая причина)
Возможно Связано:
- BUG-423: Медленное время отклика payment gateway (проблема производительности)
Информация о Регрессии
Если баг является регрессией:
Регрессия: ДА
- Работало в: v3.4.1 (Build #442)
- Сломалось в: v3.5.0 (Build #455)
- Вероятная причина: Недавние изменения в модуле обработки платежей (PR #789)
Эта информация помогает разработчикам значительно сузить корневую причину.
Пример Идеального Баг-Репорта
Пример 1: Баг Веб-Приложения
**Заголовок:** Чекаут падает с ошибкой 500 при применении промокода "SAVE20" к корзине >$100
**Окружение:**
- Приложение: E-commerce Web App v3.5.2 (Build #456)
- URL: https://staging.example.com
- Браузер: Chrome 120.0.6099.109
- ОС: macOS Sonoma 14.2.1
- Учетная Запись: test-premium@example.com (Премиум, зарегистрирован 2025-09-01)
- Сеть: WiFi
**Серьезность:** S1 Критическая
**Приоритет:** P1 Срочный
**Предусловия:**
- Пользователь залогинен как премиум-участник
- Промокод "SAVE20" существует в системе (20% скидка, истекает 2025-12-31)
- Сумма корзины должна быть >$100 после добавления товаров
**Шаги Воспроизведения:**
1. Перейти на https://staging.example.com
2. Войти с test-premium@example.com / Test123!
3. Добавить "Беспроводная Мышь" (SKU: WM-001, $25) в корзину
4. Добавить "USB Кабель" (SKU: USB-C-003, $20) в корзину
5. Добавить "Клавиатура" (SKU: KB-005, $60) в корзину
6. Проверить, что сумма корзины показывает $105.00
7. Нажать "Перейти к Оформлению"
8. На странице чекаута ввести промокод: "SAVE20" в поле скидки
9. Нажать кнопку "Применить"
10. Наблюдать примененную скидку: Сумма меняется с $105.00 на $84.00
11. Выбрать способ оплаты: "Кредитная Карта"
12. Ввести тестовую карту: 4242 4242 4242 4242, Срок: 12/25, CVV: 123
13. Нажать кнопку "Оформить Заказ"
**Ожидаемый Результат:**
- Заказ успешно обработан
- Страница подтверждения отображается с номером заказа
- Email подтверждения отправлен на test-premium@example.com
- Заказ появляется в "Мои Заказы" со статусом "Обрабатывается"
- Платеж $84.00 списан с карты
**Фактический Результат:**
- Страница показывает ошибку: "Обработка платежа не удалась. Пожалуйста, попробуйте позже."
- Отображается код ошибки: ERR_PAYMENT_TIMEOUT_500
- Email подтверждения не получен
- Заказ НЕ появляется в "Мои Заказы"
- Кредитная карта НЕ списана
- Консоль браузера показывает: "POST https://api.staging.example.com/payments 500 (Internal Server Error)"
- Ошибка консоли: "TypeError: Cannot read property 'transactionId' of undefined at processPayment (payment.js:142)"
**Частота:** Всегда (100%) — Воспроизведено 5 раз последовательно
**Влияние на Пользователя:**
- Затрагивает: Всех пользователей (премиум и стандартных), применяющих промокод к заказам >$100
- Тикеты поддержки клиентов: 12 тикетов за последний час
- Оценочно затронутых пользователей: 50+ за последние 24 часа
- Бизнес-воздействие: Потерянный доход, фрустрация клиентов
**Обходной Путь:**
- Удалить промокод перед чекаутом (пользователь платит полную цену)
- ИЛИ использовать заказы <$100 (скидка работает корректно)
- Ограничение: Пользователи не могут получить скидку по промокоду на большие заказы
**Приложения:**
1. screenshot-step10-discount-applied.png (Показывает сумму $84 после скидки)
2. screenshot-step13-error-message.png (Показывает ошибку после нажатия Оформить Заказ)
3. console-error-log.txt (Полный вывод консоли с трассировкой стека)
4. network-tab-500-error.png (Показывает детали неудачного API запроса)
5. checkout-flow.mp4 (30-секундная запись экрана полного воспроизведения)
**Дополнительные Заметки:**
- Баг НЕ происходит с суммами корзины <$100
- Баг НЕ происходит без промокода
- Другой промокод "WELCOME10" также вызывает ту же ошибку
- Регрессия: Работало в v3.4.1, сломалось с развертывания v3.5.0
- Возможно связано с BUG-456 (проблемы таймаута платежа)
**Тестовые Данные:**
- Протестированный промокод: SAVE20
- Товары в корзине: WM-001, USB-C-003, KB-005
- Сумма корзины до скидки: $105.00
- Сумма корзины после скидки: $84.00
- Кредитная карта: Тестовая карта Stripe 4242...
Пример 2: Баг Мобильного Приложения
**Заголовок:** Приложение падает при загрузке фото профиля >5MB на iPhone 14
**Окружение:**
- Приложение: Mobile Banking App v2.3.0 (Build #234)
- Устройство: iPhone 14 Pro (Модель: MQ0G3LL/A)
- Версия iOS: 17.2.1
- Доступное Хранилище: 32GB свободно
- Учетная Запись: testuser@bank.com (Владелец счета Checking)
- Сеть: WiFi (50 Mbps)
**Серьезность:** S2 Высокая
**Приоритет:** P2 Высокий
**Предусловия:**
- Пользователь залогинен в приложении
- Библиотека фото содержит изображение >5MB
- Пользователь еще не установил фото профиля
**Шаги Воспроизведения:**
1. Открыть Mobile Banking App
2. Нажать на иконку профиля (правый верхний угол)
3. Нажать "Редактировать Профиль"
4. Нажать на placeholder фото профиля
5. Нажать "Выбрать из Библиотеки"
6. Разрешить доступ к фото (если запрашивается)
7. Выбрать фото: IMG_5847.JPG (Размер файла: 8.2MB, 4032x3024px)
8. Нажать "Выбрать"
**Ожидаемый Результат:**
- Изображение успешно загружено
- Фото профиля обновлено на выбранное изображение
- Пользователь возвращен на экран профиля
- Сообщение об успехе: "Фото профиля обновлено"
**Фактический Результат:**
- Индикатор прогресса отображается (спиннер)
- Через 2-3 секунды приложение полностью падает
- Пользователь возвращается на главный экран iOS
- При повторном открытии приложения фото профиля НЕ обновлено
- Сгенерирован лог краша приложения
**Частота:** Всегда (100%) с изображениями >5MB
**Влияние на Пользователя:**
- Затрагивает: Пользователей с изображениями высокого разрешения с новых iPhone
- Оценка: 30% пользователей имеют изображения >5MB в библиотеке
- Существует обходной путь (см. ниже)
**Обходной Путь:**
1. Использовать стороннее приложение для сжатия изображения <5MB
2. Загрузить сжатое изображение
Ограничение: Требуются дополнительные шаги, более низкое качество изображения
**Приложения:**
1. crash-log-profile-picture.txt (Лог краша iOS)
2. test-image-8.2MB.jpg (Образец изображения, вызывающего краш)
3. screen-recording-crash.mp4 (Видео, показывающее краш)
4. xcode-console-output.txt (Вывод отладчика Xcode)
**Дополнительные Заметки:**
- Изображения <5MB загружаются успешно
- Баг происходит на iPhone 13, 14, 15 (протестировано)
- Баг НЕ происходит на iPad Pro (протестировано)
- Лог краша показывает: "Memory warning level 2" перед крашем
- Вероятная причина: Изображение не изменяется в размере перед загрузкой, вызывая проблему памяти
**Тестовые Данные:**
- Тестовое изображение 1: IMG_5847.JPG (8.2MB) → Краш
- Тестовое изображение 2: IMG_5848.JPG (4.8MB) → Успех
- Тестовое изображение 3: IMG_5849.JPG (12.5MB) → Краш
Лучшие Практики Коммуникации
Тон и Язык
1. Будьте Профессиональны, Не Эмоциональны
❌ Плохо:
"Это смехотворно! Чекаут полностью сломан СНОВА. Как это вообще прошло код-ревью?"
✅ Хорошо:
"Чекаут падает с ошибкой 500 при применении промокодов. Это регрессия от v3.4.1."
2. Фокусируйтесь на Фактах, Не на Обвинениях
❌ Плохо:
"Разработчики очевидно вообще не тестировали эту функцию."
✅ Хорошо:
"Этот сценарий мог не быть покрыт в тестировании. Предлагаемый тест-кейс: Промокоды на заказы >$100."
3. Используйте Нейтральный Язык
- ❌ Обвинительно: "Ты сломал платежную систему"
- ✅ Нейтрально: "Платежная система возвращает ошибку с развертывания v3.5"
- ❌ Эмоционально: "Это катастрофа!"
- ✅ Фактически: "Это блокирует все транзакции чекаута (S1 Критический)"
Сотрудничество, Не Конфронтация
Баг-репорты — инструменты коммуникации, а не оружие.
Хорошее сотрудничество:
- “Буду рад предоставить больше деталей при необходимости”
- “Могу протестировать исправление на staging когда будет готово”
- “Дай знать, если не можешь воспроизвести—запишу видео”
- “Возможно связано с PR #789? (Просто мысль)”
Построение доверия:
- Признавать хорошие исправления: “Спасибо за быстрое исправление! Проверено на staging ✅”
- Признавать ошибки: “Моя ошибка—это была неправильная конфигурация, не баг. Закрываю.”
- Предлагать помощь: “Могу помочь с расследованием если нужно”
Отслеживание Баг-Репортов
1. Отвечайте Быстро на Вопросы
Разработчик спрашивает: "Можешь протестировать с промокодом 'WELCOME10'?"
✅ Хороший ответ (в течение часов):
"Протестировано с WELCOME10—та же ошибка 500. Также протестировал FREESHIP—работает нормально.
Похоже, специфично для процентных промокодов."
2. Тщательно Проверяйте Исправления
Когда баг помечен "Исправлен":
✅ Хорошая проверка:
"Проверено исправление на staging (Build #460):
- Протестированы оригинальные шаги воспроизведения—ошибки нет ✅
- Протестировано с разными промокодами (SAVE20, SAVE10, WELCOME15)—все работают ✅
- Протестировано с суммами корзины: $50, $100, $500—все работают ✅
- Протестировано как премиум и стандартный пользователь—оба работают ✅
Помечаю как Проверено. Отличное исправление!"
3. Открывайте Заново Обдуманно
Если баг возвращается:
✅ Хороший комментарий при повторном открытии:
"Открываю заново: Проблема возвращается в Production (Build #461), но НЕ в Staging (Build #460).
Возможно различие в окружении?
Новые находки:
- Staging использует сервис промокодов v2.1
- Production использует сервис промокодов v2.0 (проверено с DevOps)
Это может объяснить расхождение."
Управление Сложными Ситуациями
Ситуация 1: Разработчик Не Может Воспроизвести
Разработчик комментирует: "Не могу воспроизвести. У меня работает нормально."
✅ Хороший ответ:
"Спасибо за попытку. Позволь предоставить больше деталей:
1. Прилагается запись экрана (repro-full-flow.mp4)
2. Могу воспроизвести на staging, но НЕ в dev окружении
3. Проверено с Сарой (QA)—она тоже воспроизводит
4. Буду рад сделать screenshare/pair debugging если поможет
Отличие, которое заметил: Dev использует SQLite, Staging использует PostgreSQL.
Может быть это связано с базой данных?"
Ситуация 2: Баг Помечен “Работает По Дизайну”
Разработчик закрывает как "Не баг—работает по дизайну"
✅ Хороший ответ:
"Спасибо за разъяснение. Вижу из твоего комментария, что это намеренное поведение.
Однако, с точки зрения пользователя это сбивает с толку потому что:
- Промокод кажется примененным (скидка показывается)
- Ошибка появляется только на финальном шаге
- Нет указания, что промокоды не работают с заказами >$100
Предложение: Могли бы мы добавить валидацию раньше в потоке?
Напр., Показывать сообщение при применении кода: 'Этот промокод действителен для заказов под $100'
Должен ли я создать это как запрос функции вместо этого?"
Ситуация 3: Баг Низко Приоритизирован Несмотря на Высокое Влияние на Пользователя
Баг помечен P3 (Средний), но ты считаешь, что должен быть P1:
✅ Хороший ответ:
"Понял, что это приоритизировано как P3.
Хочу предоставить дополнительный контекст:
- 45 тикетов поддержки клиентов за последние 24 часа (прилагается отчет)
- Оценочно 200 затронутых пользователей на основе аналитики
- Успешность платежей упала с 95% до 78% с развертывания
- Бизнес-воздействие: ~$5,000 потерянного дохода в день
Хотят ли заинтересованные стороны пересмотреть приоритет с учетом этого воздействия?
Буду рад представить данные на standup/planning."
Шаблоны Баг-Репортов
Простой Шаблон (Для Быстрых Багов)
**Заголовок:** [Компонент] + [что падает] + [когда/условие]
**Окружение:** [Версия, Браузер/Устройство, ОС]
**Шаги:**
1. Шаг первый
2. Шаг второй
3. Наблюдать баг
**Ожидается:** [Что должно происходить]
**Фактически:** [Что происходит на самом деле]
**Серьезность/Приоритет:** [S#/P#]
**Скриншот:** [Приложить если применимо]
Полный Шаблон
**Заголовок:**
**Окружение:**
- Приложение:
- URL/Версия:
- Браузер/Устройство:
- ОС:
- Учетная Запись:
**Серьезность:** S__ (Критическая/Высокая/Средняя/Низкая)
**Приоритет:** P__ (Срочный/Высокий/Средний/Низкий)
**Предусловия:**
-
-
**Шаги Воспроизведения:**
1.
2.
3.
**Ожидаемый Результат:**
-
-
**Фактический Результат:**
-
-
**Частота:** [Всегда / Часто / Иногда / Редко / Однажды]
**Влияние на Пользователя:**
- Затронутые пользователи:
- Воздействие:
**Обходной Путь:** [Если существует]
**Приложения:**
-
-
**Дополнительные Заметки:**
-
-
**Тестовые Данные:**
-
Шаблон Баг-Репорта API
**Заголовок:** [Endpoint] возвращает [код статуса] для [условие]
**Окружение:**
- Версия API:
- Endpoint:
- Окружение: [Dev/Staging/Prod]
- Временная метка:
**Запрос:**
Метод: POST
URL: https://api.example.com/v2/payments
Заголовки:
Authorization: Bearer
Тело: { “amount”: 9350, “currency”: “USD”, “promo_code”: “SAVE20” }
**Ожидаемый Ответ:**
Статус: 200 OK Тело: { “transaction_id”: “TXN-xxx”, “status”: “success” }
**Фактический Ответ:**
Статус: 500 Internal Server Error Тело: { “error”: “Internal server error”, “code”: “ERR_PAYMENT_TIMEOUT_500” }
**Частота:**
**Доп. Информация:**
- Время ответа:
- Логи сервера:
Заключение: Мастерство Баг-Репортинга
Отличный баг-репортинг — это навык, который отличает великих QA-специалистов. Ключевые выводы:
1. Обязательные Компоненты
- Четкий, конкретный заголовок
- Полные детали окружения
- Точные шаги воспроизведения
- Ожидаемые vs фактические результаты
- Соответствующая серьезность/приоритет
- Вспомогательные приложения
2. Качество Важнее Количества
- Один четкий, детальный баг-репорт > Пять расплывчатых
- Инвестируйте время заранее, чтобы сэкономить время всем потом
- Минимизируйте шаги воспроизведения без потери ясности
3. Вспомогательные Доказательства
- Скриншоты (аннотированные)
- Записи экрана (для сложных потоков)
- Логи консоли и сообщения об ошибках
- Сетевые запросы/ответы
4. Профессиональная Коммуникация
- Нейтральный, фактический тон
- Фокус на фактах, не на обвинениях
- Подход сотрудничества
- Отзывчивость на вопросы
5. Думайте Как Разработчик
- “Могу ли я воспроизвести это по этим шагам?”
- “Есть ли у меня вся необходимая информация?”
- “Какова вероятная корневая причина?”
Следующие Шаги:
- Просмотрите свои недавние баг-репорты—как они могут улучшиться?
- Создайте шаблоны для вашей команды
- Поделитесь этим руководством с членами команды
- Попрактикуйтесь в написании одного “идеального” баг-репорта на этой неделе
- Попросите фидбек у разработчиков о ваших баг-репортах
- Празднуйте, когда баги исправляются быстро благодаря вашим четким репортам!
Помните: Ваши баг-репорты — это ваша профессиональная репутация. Каждый хорошо написанный баг-репорт:
- Экономит время разработчика
- Обеспечивает более быстрое исправление багов
- Строит доверие и уважение
- Улучшает качество продукта
- Продвигает вашу карьеру
Пишите баг-репорты, которые любят разработчики, и наблюдайте, как ваше влияние умножается!