Screenshots and Videos Capturing | Bondar Academy
Course: Playwright UI Testing with TypeScript
Module: Advanced Tricks and Techniques
Instructor: Artem Bondar
Lesson Summary
In this lesson, we discussed how to capture screenshots and videos of your tests using Playwright . This functionality is useful for documentation and debugging purposes. Screenshots To create a screenshot after a specific test step, use the following command: await page.screenshot({ path: 'screenshots/formLayoutsPage.png' }); This command saves the screenshot in a designated folder. You can also capture a screenshot of a specific area of the page by using a locator: await page.locator('inline form').screenshot({ path: 'screenshots/inlineForm.png' }); Additionally, you can save a screenshot as a binary for integration with other systems: const buffer = await page.screenshot(); To log the binary in base64 format: console.log(buffer.toString('base64')); Videos To record videos, modify the playwright.config.ts file: video: 'on', There are several options for video recording: on : Record all tests. off : No recording (default). retainOnFailure : Record only failed tests. retryWithVideo : Record on the first retry. Run tests via the command line to ensure videos are recorded: npm run page objects chrome Videos are automatically attached to the test report, which can be viewed using: npx playwright show report Summary In summary, to capture screenshots: Use page.screenshot() for full-page screenshots. Use locator.screenshot() for specific sections. Save screenshots as binary for further use. For videos, adjust the configuration and set the desired resolution for better quality.