Запись видео

Записывайте сеансы работы в браузере в формате WebM с маркерами глав и выносками для действий.

Команды

Команда	Описание
`video-start [filename]`	Начать запись
`video-stop`	Остановить и сохранить запись
`video-chapter <title>`	Показать полноэкранную карточку главы и отметить её позицию
`video-show-actions`	Сопровождать последующие действия выносками и подсветкой
`video-hide-actions`	Прекратить добавление аннотаций к действиям

Простая запись

playwright-cli open https://example.com
playwright-cli video-start demo.webm
playwright-cli click e5
playwright-cli fill e3 "test"
playwright-cli video-stop
# Видео сохранено в: .playwright-cli/demo.webm

Если имя файла не указано, видео сохраняется под именем video-{timestamp}.webm в выходном каталоге.

Размер видео

playwright-cli video-start --size=800x600

Если параметр --size не указан, запись масштабируется так, чтобы вписаться в область 800x800.

Маркеры глав

video-chapter размывает страницу и показывает карточку главы в течение заданного времени, а затем убирает её — это удобно для переходов между разделами пошаговой демонстрации.

playwright-cli video-start

playwright-cli video-chapter "Шаг 1: Вход" --description="Вход в существующую учётную запись" --duration=2000
playwright-cli goto https://app.example.com/login
playwright-cli fill e3 "user@example.com"
playwright-cli fill e5 "password"
playwright-cli click e7

playwright-cli video-chapter "Шаг 2: Переход к настройкам"
playwright-cli goto /settings

playwright-cli video-chapter "Шаг 3: Обновление профиля"
playwright-cli fill e10 "New Display Name"
playwright-cli click e15

playwright-cli video-stop

Выноски для действий

video-show-actions добавляет к каждой последующей команде наглядное пояснение в записи: выноска содержит название действия, а целевой элемент подсвечивается. При этом анимированный указатель перемещается между точками выполнения действий.

playwright-cli video-start walkthrough.webm
playwright-cli video-show-actions --duration=600 --position=top-right

playwright-cli click e5
playwright-cli fill e3 "test"

playwright-cli video-hide-actions
playwright-cli video-stop

Параметр	Описание
`--duration=<ms>`	Время отображения каждой выноски на экране (по умолчанию 500 мс)
`--position=<pos>`	`top-left`, `top`, `top-right`, `bottom-left`, `bottom`, `bottom-right` (по умолчанию `top-right`)
`--cursor=<mode>`	`pointer` включает анимацию указателя мыши (по умолчанию), `none` отключает её

Создание видео с помощью скриптов

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

// hero.js
async page => {
  await page.screencast.start({ path: 'video.webm', size: { width: 1280, height: 800 } });
  await page.goto('https://demo.playwright.dev/todomvc');

  // Карточка главы: размывает страницу, блокирует выполнение на заданное время, затем автоматически удаляется.
  await page.screencast.showChapter('Добавление задач', {
    description: 'Добавим несколько пунктов в список задач.',
    duration: 2000,
  });

  const input = page.getByRole('textbox', { name: 'What needs to be done?' });
  await input.pressSequentially('Walk the dog', { delay: 60 });
  await input.press('Enter');
  await page.waitForTimeout(1000);

  // Постоянное наложение: события указателя отключены, поэтому оно не мешает взаимодействию.
  const annotation = await page.screencast.showOverlay(`
    <div style="position: absolute; top: 8px; right: 8px; padding: 6px 12px;
      background: rgba(0,0,0,0.7); border-radius: 8px; font-size: 13px; color: white;">
      ✓ Задача успешно добавлена
    </div>
  `);

  await input.pressSequentially('Buy groceries', { delay: 60 });
  await input.press('Enter');
  await page.waitForTimeout(1500);
  await annotation.dispose();

  await page.screencast.stop();
}

playwright-cli run-code --filename=hero.js

API наложений

Метод	Назначение
`page.screencast.start(options)` / `stop()`	Начать и остановить запись
`page.screencast.showChapter(title, { description?, duration?, styleSheet? })`	Показать полноэкранную карточку главы с размытым фоном
`page.screencast.showOverlay(html, { duration? })`	Добавить пользовательское HTML-наложение — выноски, подписи, подсветку
`page.screencast.showActions(options)` / `hideActions()`	API, на котором основана команда `video-show-actions`
`disposable.dispose()`	Удалить постоянное наложение, добавленное без указания длительности
`page.screencast.hideOverlays()` / `showOverlays()`	Временно скрыть или показать все наложения

Для наложений задано pointer-events: none, поэтому они могут оставаться видимыми, пока вы нажимаете на элементы, заполняете поля или иначе взаимодействуете со страницей. Чтобы разместить наложение поверх определённого элемента, сначала получите его ограничивающий прямоугольник:

const bounds = await page.getByText('Walk the dog').boundingBox();

Видео и трассировка

Характеристика	Видео	Трассировка
Результат	Файл WebM	Файлы трассировки для просмотра в Trace Viewer
Содержимое	Визуальная запись	Снимки DOM, сетевая активность, консоль, действия
Оптимальное применение	Демонстрации, документация, отчёты об ошибках	Отладка и анализ
Размер	Больше	Меньше

Сценарии использования

Сценарий	Подход
Воспроизведение ошибки	Запишите шаги и прикрепите видео к отчёту об ошибке
Документирование тестов	Записывайте видео с маркерами глав
Наблюдение за агентом	Записывайте сеансы работы агента для последующего просмотра
Создание демонстраций	Опишите сценарий в скрипте с помощью `run-code` и наложений

Команды​

Простая запись​

Размер видео​

Маркеры глав​

Выноски для действий​

Создание видео с помощью скриптов​

API наложений​

Видео и трассировка​

Сценарии использования​