Скриншоты и видео в Playwright
В этой главе рассказывается, как использовать Playwright для создания скриншотов и записи видео, что помогает быстро находить проблемы при сбоях тестов.
page.screenshot() Скриншоты
Скриншот всей страницы
Пример
// Сохранить в файл
await page.screenshot({ path: 'screenshots/example-homepage.png' });
// Получить данные Buffer (использовать напрямую, не записывать в файл)
const buffer = await page.screenshot();
await page.screenshot({ path: 'screenshots/example-homepage.png' });
// Получить данные Buffer (использовать напрямую, не записывать в файл)
const buffer = await page.screenshot();
Параметры скриншота
Пример
await page.screenshot({
path: 'screenshots/full-page.png',
fullPage: true, // Захватить всю страницу (не только область просмотра)
type: 'png', // Формат: 'png' (по умолчанию) или 'jpeg'
quality: 90, // Качество JPEG (0-100, только JPEG)
clip: { // Область обрезки
x: 0,
y: 0,
width: 800,
height: 600,
},
animations: 'disabled', // Отключить CSS-анимации (более стабильные скриншоты)
omitBackground: false, // Скрывать ли фон по умолчанию
});
path: 'screenshots/full-page.png',
fullPage: true, // Захватить всю страницу (не только область просмотра)
type: 'png', // Формат: 'png' (по умолчанию) или 'jpeg'
quality: 90, // Качество JPEG (0-100, только JPEG)
clip: { // Область обрезки
x: 0,
y: 0,
width: 800,
height: 600,
},
animations: 'disabled', // Отключить CSS-анимации (более стабильные скриншоты)
omitBackground: false, // Скрывать ли фон по умолчанию
});
Скриншот элемента
Пример
// Сделать скриншот конкретного элемента
await page.getByRole('navigation').screenshot({ path: 'nav.png' });
// Сделать скриншот кнопки
await page.getByRole('button', { name: 'Submit' }).screenshot({ path: 'btn.png' });
await page.getByRole('navigation').screenshot({ path: 'nav.png' });
// Сделать скриншот кнопки
await page.getByRole('button', { name: 'Submit' }).screenshot({ path: 'btn.png' });
Автоматическая настройка скриншотов
Задайте политику автоматических скриншотов в файле конфигурации, не вызывая её вручную в каждом тесте:
Пример
// Путь к файлу: playwright.config.ts
export default defineConfig({
использовать: {
// Автоматически делать скриншоты только при сбое тестов
screenshot: 'only-on-failure',
// Возможные значения:
// 'off' — Не делать скриншоты
// 'on' — Делать снимок экрана для каждого теста
// 'only-on-failure' — Делать снимок экрана только при сбое (рекомендуется)
},
});
export default defineConfig({
использовать: {
// Автоматически делать скриншоты только при сбое тестов
screenshot: 'only-on-failure',
// Возможные значения:
// 'off' — Не делать скриншоты
// 'on' — Делать снимок экрана для каждого теста
// 'only-on-failure' — Делать снимок экрана только при сбое (рекомендуется)
},
});
Снимки экрана при сбое сохраняются вtest-results/каталоге и отображаются в HTML-отчёте.
Запись видео
Настройка записи видео
Пример
// Путь к файлу: playwright.config.ts
export default defineConfig({
использовать: {
// Сохранять видео только при сбое
video: 'retain-on-failure',
// Возможные значения:
// 'off' — Не записывать
// 'on' — Записывать каждый раз
// 'retain-on-failure' — Сохранять при сбое, удалять при успешном прохождении (рекомендуется)
// 'on-first-retry' — Записывать только при первой повторной попытке
},
});
export default defineConfig({
использовать: {
// Сохранять видео только при сбое
video: 'retain-on-failure',
// Возможные значения:
// 'off' — Не записывать
// 'on' — Записывать каждый раз
// 'retain-on-failure' — Сохранять при сбое, удалять при успешном прохождении (рекомендуется)
// 'on-first-retry' — Записывать только при первой повторной попытке
},
});
Ручное управление видео
Пример
test('Сохранить видео вручную', async ({ page }) => {
await page.goto('https://www.example.com/');
// Выполнить действия
await page.getByText('EXAMPLE Tutorial').click();
// Получить объект видео
const video = page.video();
// Сохранить видео по указанному пути
await video.saveAs('videos/example-test.mp4');
// Или удалить видео
// await video.delete();
});
await page.goto('https://www.example.com/');
// Выполнить действия
await page.getByText('EXAMPLE Tutorial').click();
// Получить объект видео
const video = page.video();
// Сохранить видео по указанному пути
await video.saveAs('videos/example-test.mp4');
// Или удалить видео
// await video.delete();
});
Параметры записи видео
Пример
// Путь к файлу: playwright.config.ts
export default defineConfig({
использовать: {
video: {
mode: 'retain-on-failure',
size: { width: 1280, height: 720 }, // Размер видео
},
},
});
export default defineConfig({
использовать: {
video: {
mode: 'retain-on-failure',
size: { width: 1280, height: 720 }, // Размер видео
},
},
});
Сценарии использования скриншотов и видео
| Сценарий | Рекомендуемое решение |
|---|---|
| Быстро понять состояние страницы при сбое CI-тестов | screenshot: 'only-on-failure' |
| Просмотреть полный процесс выполнения тестов | video: 'retain-on-failure' |
| Визуальное регрессионное тестирование | expect(page).toHaveScreenshot() |
| Отладка отдельных шагов | Ручной вызовpage.screenshot() |
Другие расширенияСкриншоты и видео увеличивают время выполнения тестов и использование диска. Рекомендуется использовать их только в производственных средах
'only-on-failure'или'retain-on-failure'чтобы избежать создания медиафайлов каждый раз.