Привет! Сегодня разберём важную, но почему-то часто недооцениваемую тему — как правильно делать скриншоты и видео багов. Казалось бы, что тут сложного? Нажал Print Screen или записал экран, и всё. Но на деле — это целое искусство, от которого напрямую зависит, поймут ли разработчики твою проблему и насколько быстро её исправят.
Зачем нужны скриншоты и видео багов?
Когда ты находишь баг, его нужно задокументировать так, чтобы:
- Разработчик мог воспроизвести ошибку.
- Видно было, в чём именно проблема.
- Не возникло лишних вопросов и уточнений.
Иногда одного описания в баг-репорте недостаточно. А скриншоты и видео помогают быстро и наглядно донести суть.
Когда делать скриншот, а когда — видео?
- Скриншот — если баг проявляется в один момент (неправильный текст, отображение, неверный статус и т.д.).
- Видео — если баг проявляется в динамике (нажатие кнопки, анимация, смена состояний, обрывы и т.д.).
💡 Лучшее правило: если скриншот не объясняет баг — делай видео.
Скриншоты: как делать правильно
✅ Показывай контекст
Скриншот должен быть не обрезан до «точки», а показывать:
- URL страницы (если это веб) — это важно, чтобы разработчик понимал, где именно возник баг (особенно если система большая)
- Название экрана (если это мобильное или десктоп-приложение) — помогает быстрее сориентироваться, в какой части приложения произошёл сбой. Например, вместо безымянного фрагмента интерфейса — видно, что это экран "Профиль пользователя" или "Настройки безопасности".
- Элементы интерфейса, которые важны для понимания бага — например, кнопки, заголовки, поля ввода, сообщения об ошибке. Чем больше видимых деталей, тем проще разработчику понять суть проблемы.
❌ Не вырезай слишком узко
Плохой пример — скрин только с кнопкой «ОК». А где ты её нашёл? На каком экране?
✅ Подсвечивай проблему
Используй стрелки, рамки, выделения. Инструменты:
- Lightshot (Win/macOS)
- Greenshot (Win)
- Snipping Tool (встроенный в Windows)
- Skitch от Evernote (macOS)
✅ Даём название скриншоту
Файл bug1.png — это плохо. Лучше login_error_wrong_password.png. Или прикрепи скрин напрямую в баг-репорт с пояснением.
Видео: как записывать и не бесить разработчиков
Инструменты для записи экрана:
- OBS Studio — мощный, бесплатный инструмент для записи экрана с гибкими настройками (Win/macOS/Linux). Отлично подходит для демонстрации сложных багов с нужным уровнем детализации.
- Loom — отличный инструмент для коротких и быстрых записей экрана. Идеален, если нужно быстро зафиксировать баг и сразу поделиться ссылкой с командой — видео автоматически загружается в облако. Есть удобное расширение для Chrome и простое управление записью. Главное — следи, чтобы в кадр не попали лишние вкладки или персональные данные 😅
- ScreenRec — лёгкий инструмент для записи видео с экрана с возможностью делиться ссылкой
- VLC Media Player — не только проигрыватель, но и может записывать экран (немного сложнее в настройке)
- Xbox Game Bar (встроенный в Windows) — простой способ записать экран или окно без установки сторонних программ; активируется клавишами Win + G
- macOS: ⌘ + Shift + 5 — встроенная запись
Советы по записи:
- Записывай весь экран или активное окно — чтобы был контекст.
- Избегай длинных видео — 15–30 секунд вполне достаточно.
- Показывай баг пошагово:
-Открыл страницу
-Кликнул кнопку
-Что произошло
- Не двигай мышкой хаотично, не мельтеши.
- Говорящий курсор (highlight mouse clicks) — визуальное выделение кликов мыши. Особенно полезно, если ты записываешь видео и хочешь, чтобы было видно, где именно ты нажимал. В OBS, Loom и других программах это можно включить в настройках.
- Выключи уведомления! Чтобы не запалить личные переписки 😅
Как оформлять видео и скриншоты в баг-репорте?
📌 В описании бага укажи:
- Что на скриншоте/видео
- Где баг проявляется
- Что ты делал, чтобы его вызвать
Пример:
Видео: нажатие кнопки "Добавить" в корзине — товар не появляется в списке
Скриншот: неверный статус заказа на странице профиля
Распространённые ошибки
- Нет контекста — скриншот обрезан до кнопки или части текста
- Мельтешение на видео — непонятно, что ты показываешь
- Отсутствие пояснений — разработчику приходится гадать
- Баг не воспроизводится, потому что шаги не показаны
Бонус: приватность и безопасность
Если записываешь рабочее приложение:
- Скрывай персональные данные (логины, email, номера телефонов, ID, адреса). Даже если кажется, что это мелочь — лучше замазать, чем случайно слить чужую инфу.
- Используй тестовые аккаунты
- Затушёвывай конфиденциальную инфу на скринах (например, с помощью Blur в Lightshot)
Как сделать крутой баг-репорт с медиа?
Вот структура хорошего репорта:
- Заголовок — кратко и понятно: "Нажатие кнопки 'Отправить' не работает"
- Описание — что ожидалось и что произошло
- Шаги воспроизведения
- Окружение — браузер, ОС, устройство
- Скриншот/видео — с пояснением
Вывод
Скриншот и видео — это не просто "прикрепил и забыл". Это инструменты, которые помогают:
- Сэкономить время команде
- Быстрее находить и чинить баги
- Повысить твою репутацию как тестировщика
Грамотно оформленные медиа = качественный баг-репорт 💪
Если ты джун — начни с простого: делай понятные скрины и аккуратные видео. Это уже даст тебе +100 к скиллам.
Полезно? Поделись с коллегами или напиши, чем сам пользуешься для записи багов.