Blog # 16: Diving into Screenshots with Playwright — Let’s Get Snapping! 🚀

Hi everyone! 👋 I’ve been exploring more of what Playwright has to offer, and I recently discovered an exciting feature—screenshots! Whether you're validating UI elements, documenting test results, or just sprinkling some eye candy into your reports 😄, screenshots can truly elevate your testing game. Let me share my recent adventures in capturing various types of screenshots using Playwright!

Here’s what I tried out:

1. A quick snapshot of the web page 🖼️
2. A comprehensive full-page capture, scroll and all! 📜
3. A focused screenshot of a specific element — like that one product image you love! 🔍

Let’s dive in!

✨ 1. Quick Page Screenshot

const { test, expect } = require('@playwright/test');

test('Save a dated screenshot for future-you', async ({ page }) => {
  await page.goto('https://www.demoblaze.com/');
  
  // Pro move: Use ISO date (no messy slashes!)
  const today = new Date().toISOString().split('T')[0]; // "2023-09-30"
  
  // Save to /tests/Screenshots (create this folder first!)
  await page.screenshot({ 
    path: `tests/Screenshots/FrontPage_${today}.png` 
  });
});

📸 Bam! This captures the visible part of the page. It's like snapping a quick selfie—easy and effective!

🖼️ 2. Full Page Screenshot

test('Capture the whole chaotic page', async ({ page }) => {
  await page.goto('https://www.demoblaze.com/');
  
  const today = new Date().toISOString().split('T');
  
  await page.screenshot({ 
    path: `tests/Screenshots/FullPage_${today}.png`,
    fullPage: true // 👈 This is the golden ticket
  });
});

Scroll, scroll, scroll… 🧻 With this, Playwright captures the entire page! This is especially useful when testing lengthy pages or when you need a comprehensive view for your reports.

🔍 3. Targeted Element Screenshot

test('Stalk that one sketchy element', async ({ page }) => {
  await page.goto('https://www.demoblaze.com/');
  
  const today = new Date().toISOString().split('T');
  
  // Target the iPhone image like a heat-seeking missile
  const iphoneImage = page.locator('div.card:has-text("Iphone 6 32gb") img');
  
  // Verify it exists first (no silent failures!)
  await expect(iphoneImage).toBeVisible(); 
  
  await iphoneImage.screenshot({ 
    path: `tests/Screenshots/iPhoneImage_${today}.png`
  });
});

This one’s a gem! 💖 It allows you to zoom in on a specific element—like a product image or a button—and grab a pristine screenshot without any cropping. Perfect for detailed documentation!

💡 Bonus Tip: Date-based Naming

const date = new Date().toISOString().split('T')[0];

Using date-based naming for the screenshots keeps everything organized and makes it easy to reference tests over time.

🎯 Why I'm Loving This Feature

Super Simple to Implement: Getting started with screenshots in Playwright is a breeze.

Boosts Visual Documentation: It adds a visual layer to your test reports, making them more engaging.

Enhances Debugging: It’s much easier to spot issues with visuals instead of text alone!

If you’re delving into UI testing or just scratching the surface with Playwright, I highly recommend experimenting with screenshots. It’s a little tweak with a massive impact!

Happy Testing. ✌😀