📸 Playwright Media Capture: Your Camera for the Web

The Story of the Web Detective

Imagine you’re a detective investigating a mysterious website. You need evidence! Screenshots are like taking photos of crime scenes, and videos are like security camera footage. Playwright gives you a super-powered camera that can capture anything on a webpage.

🎯 What You’ll Learn

• Taking screenshots (quick photos)
• Element screenshots (zooming in on one thing)
• Full page screenshots (the entire scroll)
• Screenshot options (camera settings)
• Recording videos (security camera mode)
• Video configuration (adjusting your camera)

📷 Taking Screenshots

Think of this like taking a photo with your phone. One click, and you capture what’s on screen!

The Simplest Screenshot

// Take a photo of what you see
await page.screenshot({
  path: 'my-screenshot.png'
});

That’s it! You just took a picture of the webpage.

Why Use Screenshots?

• Debugging: “What did the page look like when it broke?”
• Testing: “Does this button look right?”
• Documentation: “Here’s proof it worked!”

graph TD
    A[🌐 Webpage] --> B[📸 Take Screenshot]
    B --> C[💾 Save as Image]
    C --> D[👀 Review Later]

🔍 Element Screenshots

Sometimes you don’t want a photo of the whole room. You want a close-up of just the cookie jar!

Capturing One Element

// Find the element first
const button = page.locator('button.submit');

// Take a photo of JUST that button
await button.screenshot({
  path: 'just-the-button.png'
});

Real Example

// Screenshot the login form only
const loginForm = page.locator('#login-form');
await loginForm.screenshot({
  path: 'login-form.png'
});

When to Use Element Screenshots

📜 Full Page Screenshots

Regular screenshots only capture what’s visible. But webpages scroll! Full page screenshots are like unrolling a treasure map to see everything.

Capture Everything

await page.screenshot({
  path: 'entire-page.png',
  fullPage: true  // The magic word!
});

Visual Comparison

graph TD
    subgraph Regular Screenshot
    A[📱 Visible Area Only]
    end
    subgraph Full Page Screenshot
    B[📜 Everything!]
    B --> B1[Header]
    B --> B2[Content]
    B --> B3[Footer]
    B --> B4[Hidden stuff below]
    end

When to Use Full Page

• Long articles or blog posts
• Product listing pages
• Documentation pages
• Any page with scroll

⚙️ Screenshot Options

Your camera has settings! Let’s explore them.

All the Options

await page.screenshot({
  path: 'photo.png',
  fullPage: true,
  type: 'png',
  quality: 80,
  omitBackground: true,
  clip: { x: 0, y: 0, width: 300, height: 200 }
});

Option Breakdown

PNG vs JPEG

// PNG: Perfect quality, larger file
await page.screenshot({
  path: 'crisp.png',
  type: 'png'
});

// JPEG: Smaller file, slight blur
await page.screenshot({
  path: 'small.jpeg',
  type: 'jpeg',
  quality: 75
});

Clipping (Cropping)

// Only capture a 200x200 box
await page.screenshot({
  path: 'cropped.png',
  clip: {
    x: 100,      // Start 100px from left
    y: 50,       // Start 50px from top
    width: 200,  // 200px wide
    height: 200  // 200px tall
  }
});

🎬 Recording Videos

Screenshots are photos. Videos capture movement! Perfect for seeing how a test runs.

Enable Video Recording

const context = await browser.newContext({
  recordVideo: {
    dir: './videos/'  // Folder to save videos
  }
});

Complete Example

const browser = await chromium.launch();

// Create context WITH video recording
const context = await browser.newContext({
  recordVideo: { dir: './videos/' }
});

const page = await context.newPage();
await page.goto('https://example.com');
await page.click('button');

// IMPORTANT: Close to save the video!
await context.close();

Getting the Video Path

const page = await context.newPage();
// ... do stuff ...

// Get the video file path
const videoPath = await page.video().path();
console.log('Video saved at:', videoPath);

await context.close();

graph TD
    A[🎬 Start Recording] --> B[🌐 Open Page]
    B --> C[🖱️ Do Actions]
    C --> D[📁 Close Context]
    D --> E[💾 Video Saved!]

🎛️ Video Configuration

Control your video camera settings!

Size Options

const context = await browser.newContext({
  recordVideo: {
    dir: './videos/',
    size: { width: 1280, height: 720 }
  }
});

Configuration Table

Smart Sizing

// Match viewport for perfect quality
const context = await browser.newContext({
  viewport: { width: 1280, height: 720 },
  recordVideo: {
    dir: './videos/',
    size: { width: 1280, height: 720 }
  }
});

Smaller Videos for Faster Tests

// Smaller = faster processing
const context = await browser.newContext({
  recordVideo: {
    dir: './videos/',
    size: { width: 640, height: 480 }
  }
});

🎯 Quick Reference

Screenshots

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

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

// Element only
await page.locator('#elem').screenshot({
  path: 'element.png'
});

Videos

// Enable recording
const context = await browser.newContext({
  recordVideo: { dir: './videos/' }
});

// Always close to save!
await context.close();

🌟 Remember

1. Screenshots = Quick photos for debugging
2. Element screenshots = Focus on one thing
3. Full page = Capture everything, even hidden
4. Video = Record the whole journey
5. Always close context to save videos!

You’re now a media capture master! Go capture those bugs! 🐛📸