Screenshots and Videos Capturing | Bondar Academy

Lesson Summary

Playwright provides built-in support for creating screenshots and recording videos of your tests, enhancing the debugging process. This summary outlines how to enable and utilize these features effectively. Key Features Trace: A powerful reporting feature that captures snapshots of the page at each step of your test, making it easier to debug issues. Screenshots: Useful for capturing the state of the application at specific moments, especially when Trace does not provide the necessary information. Videos: Ideal for capturing animations or dynamic flows that may not be accurately represented in screenshots. Capturing Screenshots To capture a screenshot after a specific action, use the following command: await page.screenshot({ path: 'screenshots/formLayoutsPage.png' }); To ensure the screenshot captures the correct state, consider adding a delay: await page.waitForTimeout(500); Capturing Screenshots as Buffers If you prefer to save the screenshot as a buffer instead of a file, use: const formLayoutPageBuffer = await page.screenshot(); This allows you to send the image data to external systems. Screenshots of Specific Elements To capture a screenshot of a specific section, first locate the element: const locator = page.locator('selector'); Then call: await locator.screenshot({ path: 'inlineForm.png' }); Recording Videos To enable video recording, modify your playwright.config.ts file: video: 'on' Videos will only be recorded when tests are run via the command line, not through the extension. By following these steps, you can effectively utilize Playwright's screenshot and video capabilities to enhance your testing and debugging processes.