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!

✨ Bonus: Configuring Global Screenshot Settings

Did you know you can configure Playwright to automatically take screenshots during your tests through the Playwright configuration file? This can save you time and ensure consistent documentation for every test run! 🎉 You can easily toggle between options like capturing screenshots on every failure, on the first retry, or even on success, depending on your needs.

Here’s how you can do it:

Open or create the playwright.config.js file.

Add the screenshot configuration like this:

// playwright.config.js
module.exports = {
  use: {
    // Screenshot configuration
    screenshot: 'on', // Options: 'on' (all), 'off', 'only-on-failure'
    
    // Video configuration
    video: 'on', // Options: 'on' (all), 'off', 'retain-on-failure'
        
  },
};

With this setup, you can choose to take screenshots based on your preferences:

• on: Every test gets a screenshot.

• only-on-failure: Only when a test fails.

• on-first-retry: Capture screenshots on the first retry of a failed test.

• off: No screenshots at all.

This makes it easy to control when screenshots are captured, keeping things clean and focused on the most important moments during your test runs. Plus, it's all handled globally, so you don’t need to clutter each test with screenshot logic! 📸✨

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. ✌😀