Screenshot settings in Playwright

Playwright offers a lot of settings when it comes to taking screenshots.

Settings for:

• The filetype for the saved screenshot
• Screenshotting the page with the (white)background color omitted (creates a transparant PNG)
• Creating base64 screenshots
• Creating fullpage or partial/clipped screenshots of elements or parts of the webpage
• Setting the quality of image
• Setting the scale of the image

The script below creates screenshots and files in a /screenshots/ folder.

• 2 text files with base64 images
• clipped.png (with the logo of the website source)
• css-scale.jpg (if you have a high resultion device, the filesize should be less than the jpeg.jpg)
• full.png (fullpage screenshot)
• jpeg.jpg (test jpg file)
• masked.png (image with two elements masked)
• quality-30.jpg (low quality jpg)
• screenshot-topbar.png (image of the topbar element)
• transparant-bg.png (image with transparant background)

const { chromium } = require('playwright');
const fs = require('fs');
let writeStreamImage = fs.createWriteStream('screenshots/output-full-image.txt');
let writeStreamClippedImage = fs.createWriteStream('screenshots/output-clipped-image.txt');

(async() => {
    const browser = await chromium.launch()
    const page = await browser.newPage()
    await page.setViewportSize({ width: 1280, height: 800 })
    await page.goto('https://danube-webshop.herokuapp.com')

    // Screenshot clipped part of the page
    await page.screenshot({
        path: 'screenshots/clipped.png',
        fullPage: false,
        clip: {
            x: 5,
            y: 60,
            width: 240,
            height: 40
        }
    })

    // // Screenshot element on the page 
    await page.locator('.topbar').screenshot({ path: 'screenshots/screenshot-topbar.png' });

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

    // // Save full page as Base64 image ->  
    // // Mask and transparant background is working. 
    // // Use content of 'output-full-image.txt' as in your html
    const bufferFull = await page.screenshot({ omitBackground: true, fullPage: true, mask: [page.locator('.topbar')], });
    const imageFull = '<img src="data:image/png;base64,' + bufferFull.toString('base64') + '"/>'
    writeStreamImage.write(imageFull)

    // // Save clipped part of the page as Base64 image. 
    // // Use content of 'output-clipped-image.txt' in your html
    const bufferClipped = await page.screenshot({
        path: 'screenshots/clipped.png',
        fullPage: false,
        clip: {
            x: 5,
            y: 60,
            width: 240,
            height: 40
        }
    });
    // console.log(bufferClipped.toString('base64'));
    const image = '<img src="data:image/png;base64,' + bufferClipped.toString('base64') + '"/>'
    writeStreamClippedImage.write(image)
        // console.log(image)

    // // Mask elements before screenshot
    await page.screenshot({ path: 'screenshots/masked.png', fullPage: true, mask: [page.locator('.topbar'), page.locator('.sidebar')] });

    // // Screenshot with transparant background, white background color gets removed. 
    // // Only available for '.png' files.
    await page.screenshot({ path: 'screenshots/transparant-bg.png', fullPage: true, omitBackground: true });

    // // File type: png -or- jpeg (transparant background setting does not work, Masking does work)
    await page.screenshot({ path: 'screenshots/jpeg.jpg', type: "jpeg", fullPage: true, omitBackground: true, mask: [page.locator('.topbar'), page.locator('.sidebar')] });

    // // Scale : css -or- device. The device option follows the resolution of the device the screenshot is taken on. 
    // // If scale setting is omitted Playwright creates screenshot as 'device'.
    // // Usefull if you create screenshots on high resolution device. The more pixels you have, the higher the filesize of the screenshot.
    await page.screenshot({ path: 'screenshots/css-scale.jpg', scale: "css", type: "jpeg", fullPage: true, omitBackground: true, mask: [page.locator('.topbar'), page.locator('.sidebar')] });

    // // Set the quality of a JPG screenshot. Number should be between 0 and 100.
    await page.screenshot({ path: 'screenshots/quality-30.jpg', quality: 30, type: "jpeg", fullPage: true });

    await browser.close()
})()

Settings for screenshotting pages with animations, carets/cursor in input fields, path and timeout have not been included, but are available.

Clipped base64 image/screenshot

Fullpage base64 screenshot with transparant background and masked element

Next: Playwright scraper

Previous: Smooth scroll a page and make a video or animated gif