Capturing Videos in playwright

Capturing videos in Playwright is pretty straightforward and can be super helpful for debugging. Playwright allows you to record a video of the browser session during test execution. Here's how you can do it:

Understanding Video Recording in Playwright

To record videos in Playwright, you need to configure your test setup. The video recording feature can be controlled through the Playwright configuration file.

Configure Video Recording: 

You can specify the video recording options in your playwright.config.js file. Here’s an example configuration:

import { defineConfig } from '@playwright/test';

export default defineConfig({
  use: {
    video: 'retain-on-failure', // Options: 'off', 'on', 'retain-on-failure', 'on-first-retry'
  },
});

In this example, videos will only be recorded when any specific test fail. You can choose other options based on your needs:

1. off: No videos will be recorded.
2. on: Record videos for every test.
3. retain-on-failure: Record videos for all tests but keep only those that fail.
4. on-first-retry: Record videos only when a test is retried.

Example :

Sample code show failure after execution and in the report you can track the video recording.

// @ts-check
import { test, expect } from '@playwright/test';
import { chromium } from 'playwright';

test('capture particular element screenshot', async({page}) =>{
    // Navigate to web page.
    await page.goto('http://www.skptricks.com');
    
    //capture particular element screenshot
    await page.locator('(//*[@class="post-outer"])[1e]').screenshot({ path: "tests/screenshots/" + Date.now() + "pageScreenshot.png", fullPage: true,  });
});

Output

Recording videos of your test executions in Playwright is a straightforward process that enhances your testing capabilities. By configuring your tests to capture videos, you gain valuable insights into what happens during execution, especially when tests fail.