Answer

Troubleshooting Video Recording in VS Code with Playwright

If you're having trouble recording videos of your tests in VS Code with Playwright, there could be a few reasons why.

Check Your Playwright Configuration

First, make sure your Playwright configuration is correctly set up. Videos are turned off by default, so you need to explicitly set the video option to 'on', 'retain-on-failure', or 'on-first-retry'.

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

test('basic test', async ({ page }) => {
  await page.goto('https://ray.run/');
  // your test code here
});

Close Browser Contexts Properly

Next, ensure that browser contexts are properly closed at the end of each test. Videos are saved upon browser context closure. If a browser context is not closed manually using browserContext.close(), then videos may not be recorded or saved.

await browserContext.close();

Adjust Video Size Configuration

The default video size is the viewport size scaled down to fit 800x800 pixels. If necessary, adjust your desired video size by setting specific width and height values in your Playwright config file.

Close Pages and Browser Contexts in Multi-Page Scenarios

If you're testing multiple pages simultaneously, close both individual pages and browser contexts before attempting access via page.video().path(). Videos will only become available after either page or browser context closure.

Update Dependencies and Versions

Lastly, make sure all dependencies and versions of Playwright libraries are up-to-date. If you've checked all these settings and you're still having issues, it might be worth looking for any conflicting configurations or extensions within VS Code itself.