microsoft/playwright#2107

After this is merged we can do page.context().createSession(page);

Hi

I'm running playwright scenario's with cucumber-js. One of the cucumber options is to run tests in parallel. When running scenario's in parallel no video captures are created.

Using:
"playwright": "^0.11.1-next.1583993157193",
"playwright-video": "^0.5.0",
"cucumber": "^6.0.5",

Regards

Marco

The video recording works great, thanks. However, the recorded video seems to be out of sync and lags behind the page.

For example, recording the entire length of a fairly long youtube video on a page would produce a video with a far shorter length than the youtube video.

Hi team. Hope all is well!

I've been testing this out on a project and I'm running into a weird issue. I'm running inside of docker using qawolf/playwright-ci:v1.0.0.

My JS looks like this.

import { saveVideo } from 'playwright-video';

describe('marketing/overview', () => {
  it('loads the overview page', async () => {
    const capture = await saveVideo(page, 'videos/marketing/overview.mp4');
    // do some stuff on the page
    await capture.stop();
  });
});

I can run the code and everything passes and a video file is even generated, but when I try to open it QuickTime tells me it's invalid.

Do you know why this might be? If not, I can create a more detailed repro if that would be helpful.

Thanks for building this tool! 🙏🏻

I create multiple pages in runtime and close them. It is difficult to add save video every time and moreover they are recorded to different files. Rather than page recording, Can you go up with context or browser recording? Which would record the total execution in a single file?

The video recording works great, but I was also looking to get the audio on the browser and couldn't find any way to do it. I guess because this uses screenCast, it might not be possible, but again I don't know enough.

Hey team. This tool has been working really well for me. Thanks for building this!

I'm wondering if you'd consider supporting multi-tab recording. Right now if my tests opens another tab, the video still only shows the original tab.

Thanks for your consideration!

Separate out logic into:

ScreencastFrameCollector

• emit frames from screencast

VideoFrameBuilder

• order frames based on correct FPS

VideoWriter

• start and end ffmpeg

PageVideoCapture

• tie everything together

I am using this library to record the video but i am not able to check is there any way to record/save the video when only the test fail

When it is released, update to [email protected]

Hi

I'm creating UI tests using playwright 1.4 and use your awesome playwright-video package to capture the results of the UI test.
When I call saveVideo I see some typescript error in my editor. I'm not sure if this is because of using playwright 1.4. Never hurts to ask ;)

Matching playwright's API.md format for consistency for: playwright-video.capturePage, playwright-video.captureAllPages and the class.VideoCapture.

The rest of the classes we should keep private and not export them from index.ts.

See https://github.com/microsoft/playwright/blob/v0.11.1/docs/api.md https://github.com/qawolf/playwright-utils/blob/master/README.md

Playwright and QA Wolf have evolved a lot since we initially wrote playwright-video.

• Playwright now has native video recording for multiple browsers.
• QA Wolf now records the entire screen and no longer uses playwright-video.

For these reasons, we are no longer maintaining playwright-video. However we are happy for any community members to take this project forward if they are interested.

fluent-ffmpeg sends the stdout and stderr, so our error handler can accept this:

-        .on('error', (e) => {
+        .on('error', (e, stdout, stderr) => {

This helps with some obscure edge cases like this:

[libx264 @ 0x648b540] width not divisible by 2 (1045x730)
Error initializing output stream 0:0 -- Error while opening encoder for output stream #0:0 - maybe incorrect parameters such as bit_rate, rate, width or height
Conversion failed!

The first line which shows the culprit isn’t present in any output generated by playwright-video and DEBUG='pw-video:*'. I had to dig in and make it print the stderr so I can see the real reason.

After #31 I started seeing this at the end of my logs. I haven't yet determined if the frames are actually written incorrectly, but something is off. Going to dig in further.

pw-video:VideoWriter write -1 frames for duration -0.03s +3s
pw-video:VideoWriter write 9 frames for duration 0.373s +0ms
pw-video:VideoWriter write -2 frames for duration -0.074s +1ms
pw-video:VideoWriter write 4 frames for duration 0.172s +0ms
pw-video:VideoWriter write 12 frames for duration 0.494s +0ms
pw-video:VideoWriter write 5 frames for duration 0.181s +0ms
pw-video:VideoWriter write 0 frames for duration 0s +0ms
pw-video:VideoWriter write 15 frames for duration 0.592s +0ms
pw-video:VideoWriter write 2 frames for duration 0.094s +0ms
pw-video:VideoWriter write -4 frames for duration -0.154s +11ms
pw-video:VideoWriter write 8 frames for duration 0.336s +0ms

The app I am writing tests, has multiple windows. For example, first I need to login on MainPage, click button Edit, then second page EditPage will be opened, and the rest of actions happen on second page EditPage

I have written method to take video with chromium of the whole test flow from begin to end, but when the EditPage opens, the video is still focused on MainPage. The same goes for screenshot, when test fails on EditPage, the screenshot is still taken on MainPage

Below is part of my code:

// definition of take video and take screenshot functions
export async function recordeVideo(page: Page, name: string) {
  return await saveVideo(page, videoDir + name + "_" + Date.now() + ".mp4");
}

// definition of test
beforeAll(async () => {
  browser = await _.getBrowser();
  context = await browser.newContext(_.contextOptions);
  page = await context.newPage();
  capture = await _.recordeVideo(page, "test_video");
  await page.goto(URL, { waitUntil: "networkidle" });
});

describe("E2E Tests", () => {
  // here are all defined test steps, 
 // just example how to handle multiple windows:
const editBtn = await page.$(editButton);

// Get EditPage after clicking button
[editPage] = await Promise.all([
    context.waitForEvent('page')
]);
await editPage.waitForLoadState();
// then the tests go on on editPage
});

As I see the problem is, page is the input of function recordeVideo and takeScreenshot, that's why they don't take video or screenshot on editPage.

How can I record or take screenshot with multiple windows?

Thanks in advance.

Hey again. I have a feature request. In my scenario, I'm saving screenshots (and now videos) only when my tests fail in order to conserve disk space in CI. It'd be nice to have a way to run either await capture.stop() or await capture.abort() depending on the situation. What do you think about this idea?

It would be nice if it would detect / use as a fallback the ffmpeg which which is in the path if there is one. So apt-get install ffmpeg would work out of the box.

In the end the user has three ways of using it:

• custom FFMPEG_PATH
• @ffmpeg-installer/ffmpeg
• fallback of ffmpeg which is in the path

Current workaround:

export FFMPEG_PATH=$(which ffmpeg)

ffmpeg-static is licensed as GPL-3.0-or-later, which is a copyleft license. This prevents it from being included in any commercial applications. @ffmpeg-installer/ffmpeg is LGPL-2.1, which is somewhat more lenient. There's a good summary here: http://answers.google.com/answers/threadview/id/439136.html.

Happy to make this change if you're ok with it.

Yarn install output:

➜  playwright-record-example yarn add -D playwright-video
yarn add v1.21.1
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
error [email protected]: The engine "node" is incompatible with this module. Expected version ">= 12.13 <13". Got "13.0.1"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

I would only set it to >= 12.13, or what do you think? So that 13.x is also allowed.