How do I use Playwright to take a screenshot with a transparent background?


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.


Thank you!
Was this helpful?
Still have questions?

If you still have questions, please ask a question and I will try to answer it.

Related Questions

AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.