Playwright Capture Screenshots

Playwright Capture Screenshots

Screenshot in playwright is helpful when we want to capture the tests on test level and can view it anytime in the specified location where it is saved. In this article, we will discuss how we can take screenshots differently.

Go to the playwright.config.js file and add the following.

Add the following screenshot: 'on' in there.

Let us run a test and have a look at how and where the screenshot is getting saved.

After running the test, we can see the test-results folder with our test name with the png extension.

We can also screenshot without adding it to the config file for all the test cases.

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

Let us check it out.

const {test, expect} = require('@playwright/test');
test('Autopract Title Assertion', async ({page})=> 
{

await page.goto("https://www.programsbuzz.com/");
await expect(page.locator('a[href="/ask-doubt"]')).toContainText('Ask')
await page.screenshot({ path: 'askdoubt.png' });


await expect(page.locator('a[href="/ask-doubt"]')).toHaveText('          Ask Doubt        ')
await expect(page.locator('a[href="/ask-doubt"]')).not.toContainText('log')


});

We can see that it was saved on the root path of the test.
Takes a screenshot of the previous step where it is mentioned.

FullPage:

  • Want a screenshot of a full scrollable page?
  • This is useful when we have a very tall screen, and the page could fit it entirely.
await page.screenshot({ path: 'screenshot.png', fullPage: true });

Buffer:

  • Instead of writing it into a file, we can buffer with the image and post-process it.
const buffer = await page.screenshot();
console.log(buffer.toString('base64'));

Element Screenshot:

  • Want to take a single screenshot of the element it finds in the locator? We can do that too.
await page.locator('.class').screenshot({ path: 'screenshot.png' });
Tags
Standard (Image)