How do I create a video from a Playwright trace to share with stakeholders?

Answer

Creating a Video from a Playwright Trace

To create a video from a Playwright trace, follow these steps:

1. Open the HTML report: Run npx playwright show-report in your terminal or open the HTML file directly.

2. Access the trace: Click on the trace icon next to the test name file name or open the detailed view of the test and scroll down to the 'Traces' tab. Click on "Open Trace Viewer".

3. Navigate through the trace: Use the timeline to hover over each step or action in the trace. You can see the state of the page before and after each action.

4. Start recording: Click on the camera icon at the top right corner to start recording all actions performed during that time period.

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

test('Record video from trace', async ({ page }) => {
  await page.goto('https://ray.run/');
  // Your test actions here
});

5. Stop recording: Click on the camera icon again to stop recording.

6. Download the video: A download option will appear at the bottom right corner. Click on it to download the recorded video as a .webm file, which is supported by most browsers.

By following these steps, you can easily create a video from a Playwright trace and share it with your stakeholders for better understanding of your test execution and results.