Using Playwright for Screenshots

Playwright is a modern browser automation tool that can be used to test web applications. It is similar to Selenium, but it is much faster and more reliable. It can also be used to take screenshots of web pages. This article will show you how to use Playwright to take screenshots of web pages.

Installing Playwright

Playwright is available as an npm package. You can install it with the following command:

npm install playwright

Taking a Screenshot

The following code will take a screenshot of the Google homepage:

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

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://google.com');
  await page.screenshot({ path: 'google.png' }); // the screenshot will be saved to the google.png file
  await browser.close();
})();

Taking a Screenshot of a Specific Element

The following code will take a screenshot of the Google logo:

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

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://google.com');
  const element = await page.$('#hplogo');
  await element.screenshot({ path: 'google-logo.png' }); // the screenshot will be saved to the google-logo.png file
  await browser.close();
})();

Taking a Screenshot of a Specific Element with a Specific Size

The following code will take a screenshot of the Google logo with a width of 200 pixels and a height of 100 pixels:

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

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://google.com');
  const element = await page.$('#hplogo');
  await element.screenshot({ path: 'google-logo.png', clip: { width: 200, height: 100 } }); // the screenshot will be saved to the google-logo.png file
  await browser.close();
})();

Taking a Screenshot of a Specific Element with a Specific Size and Position

The following code will take a screenshot of the Google logo with a width of 200 pixels, a height of 100 pixels, and a position of 50 pixels from the left and 50 pixels from the top:

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

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://google.com');
  const element = await page.$('#hplogo');
  await element.screenshot({ path: 'google-logo.png', clip: { x: 50, y: 50, width: 200, height: 100 } }); // the screenshot will be saved to the google-logo.png file
  await browser.close();
})();

Taking a Screenshot of a Page Behind a Login

The following code will take a screenshot of the Google homepage after logging in:

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

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://someprotectedpage.com');
  await page.fill('#identifierId', 'username');
  await page.click('#identifierNext');
  await page.fill('#password input', 'password');
  await page.click('#passwordNext'); // or whatever the submit button is
  await page.screenshot({ path: 'aprotectedimage.png' }); // the screenshot will be saved to the aprotectedimage.png file
  await browser.close();
})();

Conclusion

Playwright is a powerful tool for testing web applications, but it can also be used to take screenshots of web pages. This article showed you how to use Playwright to take screenshots of web pages.