Answer

Taking Transparent Screenshots with Playwright

Want to capture a webpage screenshot with a transparent background? Playwright's got you covered with the omitBackground option. Set it to true and the default white background disappears, leaving you with a transparent screenshot. Remember, this doesn't work with JPEGs.

import { test } from '@playwright/test';

test('screenshot with transparent background', async ({ page }) => {
  await page.goto('https://ray.run');
  await page.screenshot({ path: 'screenshot.png', omitBackground: true });
});

Playwright offers other screenshot options too. The scale option lets you decide if you want a pixel-per-CSS pixel or pixel-per-device pixel screenshot. The latter gives larger screenshots for high-DPI devices.

import { test } from '@playwright/test';

test('screenshot with scale', async ({ page }) => {
  await page.goto('https://ray.run');
  await page.screenshot({ path: 'screenshot.png', scale: 2 });
});

The clip option lets you capture a specific area of the page. Just provide the x and y coordinates of the top-left corner, and the width and height of the clip area.

import { test } from '@playwright/test';

test('screenshot with clip', async ({ page }) => {
  await page.goto('https://ray.run');
  await page.screenshot({ path: 'screenshot.png', clip: { x: 0, y: 0, width: 100, height: 100 } });
});

You can also decide if you want a full-page screenshot (fullPage) and where to save the image (path). If you want to hide certain elements in your screenshot, use locators with the mask option.

Playwright gives you a lot of flexibility with your screenshots, including the option for a transparent background. Happy testing!