Making screenshots of the websites with Playwright is straightforward and powerful. And I write that as somebody who has been working with Playwright for years.

Let’s play with Playwright on a set of screenshotting problems and see how it can solve them.

I am sharing a set of working Playwright examples. You can just copy them and adjust for your needs.

Meet Playwright

It is a Node library that interacts with multiple browsers including Chromium, Firefox, and WebKit. Playwright provides a unified API to work with all these browsers, making it a versatile choice for web automation and screenshotting.

The library was developed by Microsoft and is maintained by the same team that previously worked on Puppeteer. It offers several advantages:

Cross-browser support out of the box
Modern and intuitive API
Built-in auto-waiting mechanisms
Excellent documentation and community support
And of course, powerful screenshot capabilities

Generating screenshots with Playwright is the main focus of the post.

Practical Examples of using Playwright to take screenshots

Before starting to work with Playwright, let’s install it using npm:

npm i playwright

Simple screenshots with Playwright

To take a simple screenshot with Playwright and save it into the file, you can use the following code:

1
"use strict";
2

3
const { chromium } = require('playwright');
4

5
(async () => {
6
    const browser = await chromium.launch();
7
    try {
8
        const page = await browser.newPage();
9
        await page.goto("https://github.com");
10
        await page.screenshot({ path: "github.png" });
11
    } catch (e) {
12
        console.log(e);
13
    } finally {
14
        await browser.close();
15
    }
16
})();

The result is a screenshot of the GitHub website:

GitHub screenshot

You use the parameter path in Playwright to save the screenshot. And always close the browser to avoid resource leaking!

You can use our reliable and scalable screenshot API with myriad options to avoid the burden of setting up and managing Playwright.

High-resolution and Retina Displays

To avoid blurred images on a high-resolution display like Retina Display you can change the viewport properties width, height and deviceScaleFactor:

1
"use strict";
2

3
const { chromium } = require('playwright');
4

5
(async () => {
6
    const browser = await chromium.launch();
7

8
    try {
9
        const page = await browser.newPage();
10

11
        await page.setViewportSize({
12
            width: 2880, // default: 800
13
            height: 1800, // default: 600
14
            deviceScaleFactor: 2, // default: 1
15
        });
16

17
        await page.goto("https://apple.com");
18
        await page.screenshot({ path: "apple.com.png" });
19
    } catch (e) {
20
        console.log(e);
21
    } finally {
22
        await browser.close();
23
    }
24
})();

That’s called pixel-perfect screenshots.

Full-page screenshots

Playwright knows how to make screenshot of the scrollable page. Use fullPage option:

1
"use strict";
2

3
const { chromium } = require('playwright');
4

5
(async () => {
6
    const browser = await chromium.launch();
7

8
    try {
9
        const page = await browser.newPage();
10
        await page.goto("https://apple.com");
11
        await page.screenshot({ path: "apple.com.png", fullPage: true });
12
    } catch (e) {
13
        console.log(e);
14
    } finally {
15
        await browser.close();
16
    }
17
})();

But it won’t work good with lazy-loaded images. I wrote a brief guide on how to take full page screenshots with Playwright right.

Wait until the page is completely loaded

It is a good practice to wait until the page is completely loaded to make screenshot:

1
"use strict";
2

3
const { chromium } = require('playwright');
4

5
(async () => {
6
    const browser = await chromium.launch({});
7

8
    try {
9
        const page = await browser.newPage();
10

11
        await page.goto("https://apple.com/", {
12
            waitUntil: "networkidle",
13
        });
14

15
        await page.screenshot({ path: "apple.com.png" });
16
    } catch (e) {
17
        console.log(e);
18
    } finally {
19
        await browser.close();
20
    }
21
})();

It is a little bit of magic, but networkidle event is heuristic to determine page load state. It works quite well for many real-world use cases.

But if you need to wait until some element is rendered and visible, you need to add page.waitForSelector():

1
"use strict";
2

3
const { chromium } = require('playwright');
4

5
(async () => {
6
    const browser = await chromium.launch({});
7

8
    try {
9
        const page = await browser.newPage();
10

11
        await page.goto("https://example.com/", {
12
            waitUntil: "networkidle",
13
        });
14

15
        const selector = "div";
16
        await page.waitForSelector(selector, {
17
            state: "visible",
18
        });
19

20
        await page.screenshot({ path: "example.com.png" });
21
    } catch (e) {
22
        console.log(e);
23
    } finally {
24
        await browser.close();
25
    }
26
})();

You can also wait:

for selector or function or timeout
for file chooser
for frame
for function
for navigation
for network idle
for request
for response
for selector
for timeout
and for XPath

How to take a screenshot of the page area

To take the screenshot of the page area, use the clip option:

1
"use strict";
2

3
const { chromium } = require('playwright');
4

5
(async () => {
6
    const browser = await chromium.launch();
7

8
    try {
9
        const page = await browser.newPage();
10
        await page.goto("https://apple.com");
11
        await page.screenshot({
12
            path: "apple.com.png",
13
            clip: {
14
                x: 100,
15
                y: 100,
16
                width: 800,
17
                height: 800,
18
            },
19
        });
20
    } catch (e) {
21
        console.log(e);
22
    } finally {
23
        await browser.close();
24
    }
25
})();

But if you need to take a screenshot of the element, there is a better approach.

A screenshot of the specific element

Playwright allows to take the screenshot of any element on the web page:

1
"use strict";
2

3
const { chromium } = require('playwright');
4

5
(async () => {
6
    const browser = await chromium.launch();
7

8
    try {
9
        const page = await browser.newPage();
10
        await page.goto("https://example.com");
11

12
        const selector = "body > div:first-child";
13
        await page.waitForSelector(selector);
14
        const element = await page.$(selector);
15

16
        await element.screenshot({
17
            path: "example.com.png",
18
        });
19
    } catch (e) {
20
        console.log(e);
21
    } finally {
22
        await browser.close();
23
    }
24
})();

As you see, it is essential to make sure that the element is ready.

In ScreenshotOne screenshot API, you can take the screenshot of the element by specifying the selector parameter.

Screenshots with transparent background

Playwright provides a useful option to omit the background of the site. Just set omitBackground to true:

1
"use strict";
2

3
const { chromium } = require('playwright');
4

5
(async () => {
6
    const browser = await chromium.launch();
7

8
    try {
9
        const page = await browser.newPage();
10
        await page.goto("https://example.com");
11

12
        await page.screenshot({
13
            path: "example.com.png",
14
            omitBackground: true,
15
        });
16
    } catch (e) {
17
        console.log(e);
18
    } finally {
19
        await browser.close();
20
    }
21
})();

Have you run the code? If yes, you spotted that the screenshot does not have a transparent background. It happens because omitting background works only for elements with transparent background.

So if your target site does not have a transparent background and you want to force it, you can use JavaScript to accomplish the task. Change the background of the body in the evaluate function:

1
"use strict";
2

3
const { chromium } = require('playwright');
4

5
(async () => {
6
    const browser = await chromium.launch();
7

8
    try {
9
        const page = await browser.newPage();
10
        await page.goto("https://example.com");
11

12
        await page.evaluate(() => {
13
            document.body.style.background = "transparent";
14
        });
15

16
        await page.screenshot({
17
            path: "example.com.png",
18
            omitBackground: true,
19
        });
20
    } catch (e) {
21
        console.log(e);
22
    } finally {
23
        await browser.close();
24
    }
25
})();

Screenshot as Base64

You build Playwright as a service and do not want to store screenshot files. You can choose to return the screenshot in Base64 encoding format:

1
"use strict";
2

3
const { chromium } = require('playwright');
4

5
(async () => {
6
    const browser = await chromium.launch({});
7

8
    try {
9
        const page = await browser.newPage();
10
        await page.goto("https://example.com/");
11

12
        const base64 = await page.screenshot({ encoding: "base64" });
13
        console.log(base64);
14
    } catch (e) {
15
        console.log(e);
16
    } finally {
17
        await browser.close();
18
    }
19
})();

You will receive a string that you can share with another service or even store somewhere.

Generate JPEG or WebP instead of PNG

It is super easy to generate JPEG or WebP instead of PNG:

1
"use strict";
2

3
const { chromium } = require('playwright');
4

5
(async () => {
6
    const browser = await chromium.launch();
7
    try {
8
        const page = await browser.newPage();
9
        await page.goto("https://example.com");
10
        await page.screenshot({
11
            path: "example.jpg",
12
            type: "jpeg",
13
            quality: 100,
14
        });
15
    } catch (e) {
16
        console.log(e);
17
    } finally {
18
        await browser.close();
19
    }
20
})();

When you generate JPEG or WebP, you can specify the quality of the screenshot.

If JPEG, WebP or PNG is not enough for you, you can render URL or HTML in GIF, JP2, TIFF, AVIF or HEIF format with Playwright.

Blocking ads and trackers when using Playwright

In our screenshot API, you can block ads by setting blockAds=true.

I do not use any ad blocking extension because life is tough, and everybody needs some way to earn money. If I can help sites sustain and survive by non-blocking the ads, I will do it.

But when you test your site or your customer site, you might need to block the ads. There are 2 ways to do it:

Intercept and block request that load ad into the site.
Use an extension that is optimized exactly to solve this problem.

The first one is tricky and highly depends on the site you are taking screenshots of. But using an extension is a highly-scalable approach that works out of the box.

Install playwright-extra and playwright-extra-plugin-adblocker in addition to playwright package:

npm i playwright-extra playwright-extra-plugin-adblocker

And then use it:

1
"use strict";
2

3
const { chromium } = require('playwright-extra');
4

5
const AdblockerPlugin = require('playwright-extra-plugin-adblocker');
6
chromium.use(AdblockerPlugin());
7

8
(async () => {
9
    const browser = await chromium.launch();
10

11
    try {
12
        const page = await browser.newPage(); // ads are blocked automatically
13

14
        await page.goto("https://www.example.com");
15

16
        await page.screenshot({
17
            path: "example.com.png",
18
            fullPage: true,
19
        });
20
    } catch (e) {
21
        console.log(e);
22
    } finally {
23
        await browser.close();
24
    }
25
})();

Most pages include ads and trackers, which consume a lot of bandwidth and take a long time to load. Because fewer requests are made, and less JavaScript is performed when advertisements and trackers are blocked, pages load substantially quicker.

To take screenshots faster you might block trackers. It will help to speed up rendering. The ad blocking plugin can help us with this issue.

Just set blockTrackers to true when initializing the plugin:

1
chromium.use(
2
    AdblockerPlugin({
3
        blockTrackers: true, // default: false
4
    })
5
);

If you need to block only trackers, but do not block ads, just use request interceptor.

Preventing Playwright detection

Some sites might block your Playwright script because of the user agent, and it is easy to fix:

1
"use strict";
2

3
const { chromium } = require('playwright');
4

5
(async () => {
6
    const options = {
7
        args: [
8
            '--user-agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36"',
9
        ],
10
        headless: true,
11
    };
12

13
    const browser = await chromium.launch(options);
14
    try {
15
        const page = await browser.newPage();
16
        await page.goto("https://www.example.com");
17

18
        await page.screenshot({
19
            path: "example.com.png",
20
            fullPage: true,
21
        });
22
    } catch (e) {
23
        console.log(e);
24
    } finally {
25
        await browser.close();
26
    }
27
})();

There are also many other hacks to ensure that Playwright is not detected, but you can save time by using the ready playwright-extra-plugin-stealth plugin for the stealth mode. Install it in addition to playwright package:

npm i playwright-extra playwright-extra-plugin-stealth

And then use:

1
"use strict";
2

3
const { chromium } = require('playwright-extra');
4

5
const StealthPlugin = require('playwright-extra-plugin-stealth');
6
chromium.use(StealthPlugin());
7

8
(async () => {
9
    const browser = await chromium.launch();
10

11
    try {
12
        const page = await browser.newPage();
13
        await page.evaluateOnNewDocument(() => {
14
            const newProto = navigator.__proto__;
15
            delete newProto.webdriver;
16
            navigator.__proto__ = newProto;
17
        });
18

19
        await page.goto("https://bot.sannysoft.com");
20
        await page.waitForTimeout(5000);
21
        await page.screenshot({ path: "stealth.png", fullPage: true });
22
    } catch (e) {
23
        console.log(e);
24
    } finally {
25
        await browser.close();
26
    }
27
})();

Important! As you see, I remove the webdriver property since the stealth plugin misses this hack and by using webdriver property usage of the Playwright can be detected.

Using basic access authentication with Playwright

If your page is protected by HTTP basic access authentication, the only thing you need to do is to specify username and password before loading and taking the screenshot of the page:

1
"use strict";
2

3
const { chromium } = require('playwright');
4

5
(async () => {
6
    const browser = await chromium.launch();
7

8
    try {
9
        const page = await browser.newPage();
10

11
        await page.setExtraHTTPHeaders({
12
            'Authorization': 'Basic ' + Buffer.from('YOUR_BASIC_AUTH_USERNAME:YOUR_BASIC_AUTH_PASSWORD').toString('base64')
13
        });
14

15
        await page.goto("https://example.com");
16
        await page.screenshot({ path: "example.png" });
17
    } catch (e) {
18
        console.log(e);
19
    } finally {
20
        await browser.close();
21
    }
22
})();

Support of emojis, Japanese, Chinese and other non-Latin languages in Playwright

Our screenshot API supports emojis out of the box.

If you run Playwright in OS without emojis support, you need to install OS-wide fonts to support emojis. The same can happen with non-English characters like Chinese, Japanese, Korean, Arabic, Hebrew, etc.

To get Playwright to render emojis, you can use Noto Fonts published under SIL Open Font License (OFL) v1.1.

You need to search and how to install fonts for your host OS.

Playwright Alternatives

There are a lot more, but the most popular two are:

The oldest alternative to make screenshots is using the Selenium WebDriver protocol.
The second one is taking screenshots with Puppeteer, which is a good and high-quality alternative but with fewer browsers. If you plan to write tests, Puppeteer is worse at that than playwright.
If you consider only rendering screenshots, ScreenshotOne is the best Playwright alternative.

Puppeteer and Playwright have compatible API, but Playwright supports more browsers. So, if you must take screenshots in different browsers, prefer to use Playwright. By the way, top contributors of the Puppeteer work on Playwright, making it a more modern and feature-rich choice.

Conclusion

I posted a lot of Playwright examples, and I hope I helped you solve your screenshot problems with Playwright.

As you see you can go really far with Playwright. But if only need to take screenshots, consider using one of the best Playwright alternatives—our screenshot API.

Thank you for reading! And have a nice day 👋

Written by

Published on