[Playwright Interview question #9]: Cách chụp screenshot và record video trong Playwright?

Câu hỏi phỏng vấn #9: Cách chụp screenshot và record video trong Playwright?

Trả lời mẫu:

1. Screenshot cơ bản:

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

// Screenshot specific element
await page.locator('.header').screenshot({ path: 'header.png' });

// Full page với scrolling
await page.screenshot({ path: 'fullpage.png', fullPage: true });

2. Video recording:

// Config trong playwright.config.js
use: {
  video: 'on', // 'on', 'retain-on-failure', 'off'
  videoSize: { width: 1280, height: 720 }
}

// Hoặc per test
const context = await browser.newContext({
  recordVideo: { dir: 'videos/' }
});

3. Screenshot on failure:

use: {
  screenshot: 'only-on-failure', // hoặc 'on', 'off'
  screenshotMode: 'viewport' // hoặc 'fullPage'
}

4. Custom screenshot trong test:

test('visual test', async ({ page }, testInfo) => {
  await page.goto('/');
  
  // Attach to test report
  await testInfo.attach('homepage', {
    body: await page.screenshot(),
    contentType: 'image/png'
  });
});

💡 Tips:

• Video tự động save khi context close
• Screenshot on failure giúp debug nhanh
• Dùng toHaveScreenshot() cho visual regression testing
• Config global trong playwright.config.js để apply cho all tests

Lời Kết

Playwright đang trở thành một trong những automation frameworks phổ biến nhất cho web testing. Thông qua series này, hy vọng bạn sẽ:

• Nắm vững kiến thức từ cơ bản đến nâng cao
• Tự tin trong các buổi phỏng vấn
• Áp dụng hiệu quả vào dự án thực tế
• Trở thành một phần của cộng đồng Playwright Việt Nam năng động

📚 Bắt đầu hành trình của bạn với: Bài 1: Playwright vs Selenium

💬 Có câu hỏi? Tham gia group Facebook của chúng mình!

⭐ Theo dõi series để không bỏ lỡ bài viết mới!