[BUG] Videos are not generated when reusing a single page between tests

[ryanrosello-og]

Note from maintainers

As a workaround, we recommend recording a trace instead of a video. This will also give you much better debugging experience.

---

Context:

• Playwright Version: 1.22.2
• Operating System: Windows 11
• Node.js version: v 17.7.1
• Browser: chromium
• Extra: [any specific details about your environment]

System:

• OS: Windows 10 10.0.22000
• Memory: 1.24 GB / 15.79 GB

Binaries:

• Node: 17.7.1 - C:\Program Files\nodejs\node.EXE
• Yarn: 1.22.17 - C:\Program Files\nodejs\yarn.CMD
• npm: 8.5.2 - C:\Program Files\nodejs\npm.CMD

Languages:

• Bash: 5.0.17 - C:\Windows\system32\bash.EXE

Code Snippet
playwright.config.ts

const config: PlaywrightTestConfig = {
  reporter: [['dot'],['html']],
  use: {
    trace: 'retain-on-failure',
    screenshot: 'only-on-failure',
    video:'retain-on-failure',
  },
};

export default config;

broke.spec.ts
(sourced from https://playwright.dev/docs/test-retries#reuse-single-page-between-tests)

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

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

let page: Page;

test.beforeAll(async ({ browser }) => {
  page = await browser.newPage();
});

test.afterAll(async () => {
  await page.close();
});

test('a failing test', async () => {
  await page.click('text=Get Started fail', {timeout: 1000});  // << deliberate fail
});

Describe the bug

Videos are not generated when reusing a single page between tests

Set the following configuration:

  use: {
    trace: 'retain-on-failure',
    screenshot: 'only-on-failure',
    video:'retain-on-failure',
  },

Run a failing test

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:

[akarsh17]

Hi @ryanrosello-og
If you are picking the browser context configuration directly from xyz.config.js file and have not defined the context in the spec itself, then you would want to try the following configuration in order to get the videos generated.

use: {
trace: 'retain-on-failure',
screenshot: 'only-on-failure',
video:'retain-on-failure',
contextOptions: {recordVideo: { dir: "<path_to_store_videos>/videos/'"}}
},

[ryanrosello-og]

thanks for the suggestion @akarsh17

I tried the following:

Declared the recordVideo directly into the config

const config: PlaywrightTestConfig = {
  reporter: [['dot'],['html']],
  use: {
    trace:'on',
    contextOptions : {
      recordVideo:{
        dir:'./videos'
      }
    }
  }
};

export default config;

And also directly into the beforeAll of the spec:

import { test, Page, chromium, Browser } from "@playwright/test";

let page: Page;
let browser: Browser;
test.beforeAll(async () => {
  browser = await chromium.launch();
  const context = await browser.newContext({
    recordVideo: {
      dir: `./videos/`,
    },
  });
  page = await context.newPage();
});

test.afterAll(async () => {
  await browser.close();
});

test("a failing test", async () => {
  await page.goto("https://www.google.com");
  await page.click("text=Get Started fail", { timeout: 1000 }); // << deliberate fail
});

Still no luck, I can see the videos are created but the videos are not being embedded in the HTML report which kind makes it difficult to trace which video belong to which result.

[dgozman]

This is indeed a known issue: video recording produces a single video file from the creation of the page until its closure, as of Jun 2022.

[raulparada]

Hi!

I'd expect this to be a higher prio bug (first report September 2021, almost 🍰 🕯️ 🎉 )

I'm following the simple docs on overriding the page fixture, just as described, and I lose videos because of that? Since not fixing this, there should be a disclaimer on those docs imo

[mweidner037]

I'm also running into this issue - specifically, that video recording doesn't work in pages created with brower.newContext, as described here.

My use case: I'm using storageState for authentication, as described in the docs, except that I only want to use it for some tests. So when I need it, I call browser.newContext({ storageState: ... }). But then pages created from that context don't get video recordings.

For now I plan to use the recordVideo option and manual file manipulation to emulate video: 'retain-on-failure'.

[KeionneDerousselle]

I'm having the same issue as @mweidner037. I use storageState and create pages from browser.newContext({ storageState: ... }). I'm trying to take retain videos on failure, but I'm not seeing any video recordings when my tests fail.

[NgocVo3112]

I also get this issue, could you please spend time to fix this. Thanks a lot.

[spiderim]

I got this issue and tried all the possible methods but could not get the video. Please fix this issue

[angelo-loria]

I believe I have this working with a fixture but it's not pretty. A worker-scoped fixture initiates video recording to a temp dir and clean up of that dir on teardown. A test-scoped fixture attaches the video to the test reports on failure or time out.

fixture:

import { test as base, BrowserContext } from "@playwright/test";
import * as fs from "fs";

export const test = base.extend<{
    recordVideo: BrowserContext;
    attachVideo: BrowserContext;
}>({
    recordVideo: [
        async ({ browser }, use) => {
            const context = await browser.newContext({
                recordVideo: {
                    dir: "./playwright-video",
                },
            });

            await use(context);

            fs.rmSync("./playwright-video", { recursive: true });
        },
        // @ts-expect-error
        { scope: "worker" },
    ],

    attachVideo: [
        async ({ recordVideo }, use, testInfo) => {
            const path = await recordVideo.pages()[0].video()?.path();

            await use(recordVideo);

            if (
                testInfo.status === "failed" ||
                testInfo.status === "timedOut"
            ) {
                await recordVideo.close();
                testInfo.attach("video", {
                    path: path,
                });
            }
        },
        { scope: "test", auto: true },
    ],
});

export { expect, Page, Locator, Response } from "@playwright/test";

usage:

import { test, expect, Page } from "../../video-fixture";
import { PageUnderTest } from "../../pageObjects/PageUnderTest"

let page: Page;
let pageUnderTest: PageUnderTest;

test.describe.serial("manage round", () => {
    test.beforeAll(async ({ recordVideo }) => {
        page = await recordVideo.newPage();

        pageUnderTest = new PageUnderTest(page);
        await pageUnderTest.open();
    });

    test.afterAll(async () => {
        await page.close();
    });

    test("renders", async () => {
        await expect(pageUnderTest.header).toHaveTest("header");
        ...
    });

   test("test other stuff on same page", async () => {
        ...
   });
});

[lsnmarcint]

I have the same problem with reusing StorageState as @mweidner037 and @KeionneDerousselle described.

[sc0ttdav3y]

Just adding to this, I'm getting this on MacOS with Playwright version 1.29.1, so it's not just a windows OS issue.