Playwright is not generating videos when we create our own context

Question

Videos are not generated in a playwright-report HTML report. Is there a workaround?

Below is the playwright.config.ts file:

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

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',
  use: {
    trace: 'on-first-retry',
    headless: true,
    screenshot: "only-on-failure",
    video: "on"
  },

  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
  ],

});

Below is the test:

import { chromium, BrowserContext } from 'playwright';
import { test } from '@playwright/test';

test('test', async () => {
    const browser = await chromium.launch();
    const context: BrowserContext = await browser.newContext();
    const page = await context.newPage();
    await page.goto('https://www.google.com');
    await context.close();
    await browser.close();
});

Expected Result:

The spec above should successfully generate a screenshot, test steps, trace file and a video within the HTML result.

Actual Result:

The video is not being generated. There is an option in the Playwright documentation that videos can be recorder using the following code

{ recordVideo: { dir: 'videos/' } }

but from this, the videos will be generated in a separate folder and they will not be embedded in the report HTML.

Answer 1

As when we create context manually, some of the playwright config settings are ignored(potentially a bug?)however if you are fine with defining settings on each test file , then it can be done something like below:

// example.spec.ts   It works :)

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

test.describe.configure({ mode: 'serial' });

let page: Page;

test.beforeAll(async ({ browser }, testInfo) => {
  page = await browser.newPage({
    recordVideo: {
      dir: testInfo.outputPath('videos'),
    }
  });
   await page.goto('https://www.google.com');
});

test.afterAll(async ({}, testInfo) => {
  const videoPath = testInfo.outputPath('my-video.webm');
  await Promise.all([
    page.video().saveAs(videoPath),
    page.close()
  ]);
  testInfo.attachments.push({
    name: 'video',
    path: videoPath,
    contentType: 'video/webm'
  });
});

test('Login', async () => {
  await page.fill('input[name="login"]', 'user');
  await page.fill('input[name="password"]', 'password');
});

Reference: https://github.com/microsoft/playwright/issues/14164#issuecomment-1131451544