Скриншоты и запись экрана

Зачем нужны скриншоты и запись экрана?

Визуальная документация - критически важная часть работы тестировщика. Скриншоты и видео помогают:

  • Документировать баги с визуальными проблемами
  • Воспроизводить сложные сценарии для разработчиков
  • Создавать обучающие материалы для команды
  • Сохранять доказательства найденных проблем
  • Демонстрировать результаты тестирования

Инструменты для создания скриншотов

LightShot

Самый популярный и простой инструмент

Возможности:

  • Быстрое создание скриншотов области экрана
  • Мгновенная загрузка в облако с получением ссылки
  • Простое редактирование (стрелки, текст, рамки)
  • Горячие клавиши для быстрой работы

Установка:

  1. Скачайте с https://prnt.sc/
  2. Установите программу
  3. Используйте клавишу Print Screen для активации

Основные функции:

  • Выделение области: Зажмите левую кнопку мыши и выделите нужную область
  • Редактирование: Добавьте стрелки, прямоугольники, текст
  • Сохранение: Ctrl+S для сохранения локально или Upload для загрузки в облако

Greenshot

Бесплатный с расширенными возможностями

Преимущества:

  • Больше инструментов редактирования
  • Различные форматы сохранения
  • Автоматическое именование файлов
  • Интеграция с различными сервисами

Установка:

  1. Скачайте с https://getgreenshot.org/
  2. Установите с настройками по умолчанию
  3. Настройте горячие клавиши по вашему желанию

Snagit (платный)

Профессиональный инструмент

Особенности:

  • Продвинутое редактирование
  • Шаблоны для документации
  • Автоматическая прокрутка для длинных страниц
  • Интеграция с системами управления проектами

Встроенные возможности браузеров

Chrome DevTools

1. Откройте DevTools (F12)
2. Нажмите Ctrl+Shift+P
3. Введите "screenshot"
4. Выберите нужный тип скриншота:
   - Capture area screenshot (область)
   - Capture full size screenshot (вся страница)
   - Capture node screenshot (конкретный элемент)
   - Capture screenshot (видимая область)

Firefox

1. Нажмите F12 для открытия инструментов разработчика
2. Найдите иконку камеры в панели инструментов
3. Выберите "Take a screenshot"
4. Выберите область или всю страницу

Инструменты для записи экрана

OBS Studio (бесплатный)

Профессиональное решение для записи и стриминга

Установка и настройка:

  1. Скачайте с https://obsproject.com/
  2. Создайте новую сцену
  3. Добавьте источник "Display Capture" для записи экрана
  4. Настройте качество записи в Settings → Output

Для тестирования:

  • Записывайте в формате MP4
  • Используйте разрешение 1920x1080
  • Настройте битрейт 3000-5000 для хорошего качества

Bandicam (платный)

Легкий и эффективный инструмент

Преимущества:

  • Минимальная нагрузка на систему
  • Высокое качество записи
  • Простота использования
  • Выделение курсора и кликов

Loom (онлайн)

Быстрая запись для команды

Особенности:

  • Запись через браузер
  • Мгновенная загрузка в облако
  • Автоматическая генерация ссылки
  • Простое редактирование

Использование:

  1. Установите расширение Loom для браузера
  2. Нажмите на иконку Loom
  3. Выберите, что записывать (экран, камера, или оба)
  4. Начните запись

Встроенные инструменты Windows

Game Bar (Windows 10/11)

Горячие клавиши:
- Win + G - открыть Game Bar
- Win + Alt + R - начать/остановить запись
- Win + Alt + Print Screen - сделать скриншот

Шаги записи (Steps Recorder)

1. Откройте "Средство записи действий пользователя"
2. Нажмите "Начать запись"
3. Выполните действия, которые нужно задокументировать
4. Нажмите "Остановить запись"
5. Сохраните файл с пошаговыми скриншотами

Лучшие практики создания скриншотов

Для баг-репортов

Что включить в скриншот:

  • Полное окно браузера с адресной строкой
  • Панель инструментов разработчика с ошибками (если есть)
  • Курсор мыши на проблемном элементе
  • Релевантные элементы интерфейса

Пример хорошего скриншота бага:

✅ Видна ошибка валидации
✅ Показан введенный текст
✅ Видна кнопка, которая была нажата
✅ Отображается URL страницы
✅ Есть выделение проблемной области

Для тест-кейсов

Скриншоты ожидаемых результатов:

  • Правильное отображение элементов
  • Корректные сообщения об успехе
  • Ожидаемые изменения состояния

Скриншоты шагов выполнения:

  • Каждый важный шаг с аннотациями
  • Нумерация действий
  • Выделение элементов для взаимодействия

Лучшие практики записи экрана

Подготовка к записи

Настройка экрана:

  • Закройте ненужные программы
  • Очистите рабочий стол
  • Используйте разрешение 1920x1080 или 1280x720
  • Проверьте громкость микрофона

Настройка браузера:

  • Закройте лишние вкладки
  • Используйте инкогнито/приватный режим для чистоты
  • Увеличьте масштаб до 100%
  • Отключите расширения, которые могут мешать

Во время записи

Техника записи:

  • Говорите четко и не торопясь
  • Делайте паузы между действиями
  • Выделяйте курсором элементы, на которые обращаете внимание
  • Показывайте ошибки в DevTools или логах

Структура видео:

  1. Введение (5-10 сек): Что будете показывать
  2. Демонстрация (основная часть): Пошаговое выполнение
  3. Заключение (5-10 сек): Резюме найденной проблемы

Примеры сценариев для записи

Демонстрация бага:

1. "Сейчас я покажу баг с формой регистрации"
2. Открываете страницу регистрации
3. Заполняете форму с некорректными данными
4. Нажимаете кнопку отправки
5. Показываете неожиданное поведение
6. "Как видите, форма не показывает ошибку валидации"

Воспроизведение тест-кейса:

1. "Выполняю тест-кейс TC-001: Успешная регистрация"
2. Показываете предусловия
3. Выполняете каждый шаг из тест-кейса
4. Комментируете ожидаемые и фактические результаты
5. "Тест-кейс выполнен успешно"

Организация файлов

Структура папок

Screenshots/
├── Bugs/
│   ├── 2024-01/
│   ├── 2024-02/
│   └── Bug-123_login_error.png
├── Test-Cases/
│   ├── Registration/
│   ├── Login/
│   └── Payment/
└── Documentation/
    ├── User-Guides/
    └── API-Testing/

Именование файлов

Формат: [Тип]_[Модуль]_[Описание]_[Дата].расширение

Примеры:
- Bug_Login_Password_Validation_20240115.png
- TC_Registration_Success_Flow_20240115.mp4
- Demo_API_Testing_Postman_20240115.gif

Интеграция с инструментами тестирования

Jira

  • Перетаскивайте скриншоты прямо в описание бага
  • Используйте встроенные аннотации Jira
  • Прикрепляйте видео как файлы

TestRail

  • Добавляйте скриншоты к шагам тест-кейсов
  • Прикрепляйте видео к результатам выполнения

Confluence

  • Создавайте страницы с пошаговыми инструкциями
  • Вставляйте скриншоты для наглядности

Автоматизация создания скриншотов

Selenium WebDriver

from selenium import webdriver

driver = webdriver.Chrome()
driver.get("https://example.com")

# Скриншот всей страницы
driver.save_screenshot("full_page.png")

# Скриншот конкретного элемента
element = driver.find_element_by_id("login-form")
element.screenshot("login_form.png")

Playwright

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  
  // Скриншот страницы
  await page.screenshot({ path: 'page.png' });
  
  // Скриншот элемента
  await page.locator('#login-form').screenshot({ path: 'form.png' });
  
  await browser.close();
})();

Заключение

Визуальная документация - неотъемлемая часть качественного тестирования. Правильное использование скриншотов и записи экрана:

  • Ускоряет коммуникацию с командой
  • Упрощает воспроизведение багов
  • Улучшает качество документации
  • Помогает в обучении новых членов команды

Выберите инструменты, которые подходят вашему проекту, и создайте стандарты для их использования в команде.