DEV Community

Kayode
Kayode

Posted on • Originally published at blog.zt4ff.dev on

1 1 1 1 1

Playwright Tutorial for Beginners 8 - Screenshots

To screenshot, make use of page.screenshot({ path: 'screenshot/screenshot.png' })

Full page screenshots

Full page screenshot is a screenshot of a full scrollable page, as if you had a very tall screen and the page could fit it entirely.

await page.screenshot({ path: 'screenshot.png', fullPage: true });

Enter fullscreen mode Exit fullscreen mode

Element screenshots

You can also take screenshots of elements too:

await page.locator('.header').screenshot({ path: 'screenshot.png' });

Enter fullscreen mode Exit fullscreen mode

An example

const { test } = require('@playwright/test');

test('Demo video', async ({ page }) => {
  await page.goto('https://playwright.dev');
  await page.screenshot({ path: 'screenshot.png' });
});

Enter fullscreen mode Exit fullscreen mode

screenshot.png

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more