Tìm Hiểu Playwright Screenshots và Videos

Giới thiệu về Screenshots và Videos trong Playwright

Playwright cung cấp hai tính năng mạnh mẽ để capture và ghi lại quá trình test execution: Screenshots và Videos. Hai tính năng này đóng vai trò quan trọng trong việc debugging, documentation và monitoring test results.

Screenshots trong Playwright

Cách sử dụng cơ bản

Đây là cách nhanh nhất để chụp screenshot và lưu vào file:

await page.screenshot({ path: 'screenshot.png' });

Screenshots API cung cấp nhiều parameters cho image format, clip area, quality và các tuỳ chọn khác.

Full Page Screenshots

Full page screenshot là screenshot của toàn bộ trang có thể scroll, như thể bạn có một màn hình rất cao và trang có thể fit hoàn toàn trong đó.

await page.screenshot({ path: 'screenshot.png', fullPage: true });

Element Screenshots

Bạn có thể chụp screenshot của một element cụ thể:

await page.locator('.header').screenshot({ path: 'screenshot.png' });

Capture vào Buffer

Thay vì ghi vào file, bạn có thể lấy buffer với image và xử lý sau hoặc truyền cho third party pixel diff facility:

const buffer = await page.screenshot();
console.log(buffer.toString('base64'));

Screenshots API Parameters

Screenshots API hỗ trợ nhiều options quan trọng:

await page.screenshot({
  path: 'screenshot.png',
  fullPage: true,              // Chụp toàn bộ trang có thể scroll
  clip: { x: 0, y: 0, width: 800, height: 600 }, // Crop area cụ thể
  quality: 80,                 // Chất lượng cho JPEG (0-100)
  type: 'png',                 // 'png' | 'jpeg'
  animations: 'disabled',       // 'allow' | 'disabled'
  caret: 'hide',               // 'hide' | 'initial'
  scale: 'css',                // 'css' | 'device'
  mask: [page.locator('.ads')] // Mask sensitive elements
});