Answer

Creating Transparent PNGs with Playwright

You can create PNGs with transparent backgrounds using Playwright's omitBackground property. This property hides the default white background, allowing you to capture screenshots with transparency.

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

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

In the code above, omitBackground is set to true when taking the screenshot. This produces a PNG with a transparent background.

You can also specify the file path and quality of the image using the path and quality properties. The file path should be a string value for path, while quality should be an integer between 0-100 for non-PNG images.

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

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

Remember, when using high-dpi devices, setting the scale option to "device" will produce larger screenshots compared to using "css". If you need more control over your screenshot settings such as timeout or masking specific elements on your page before taking screenshots, refer back to Playwright documentation.