Testcafe: Testcafe skips frames from video

[Esteban26]

What is your Test Scenario?

I'm generating the test case videos but it seems that testcafe is not getting enough frames to create the video.

What is the Current behavior?

I have an animation in my test case and when I run the test I don't get any errors and video is created properly. But when I play the video it seems to be paused because it is generated with very few frames. Basically each second shows a frame even if play with the ffmpeg options to increase the fps, framesv, etc.

What is the Expected behavior?

Smoother animations in videos

 createTestCafe('localhost', 1337, 1338)
    .then(testcafe => {
        const runner = testcafe.createRunner();
        return runner
            .src(specsPath + '/run-animation.spec.ts')
            .video(artifactsPath, {
                "pathPattern": `${timestamp}.mp4`
            }, {
                "r": 60,
            })
            .browsers(['chrome'])
            .reporter('json')
            .run()
            .then(failedCount => {
                console.log('Failed count: ', failedCount);
            })
            .catch(error => {
                console.log('Error: ', error);
            });
    });

• testcafe version: 1.1.2
• node.js version: 10.13.0
• browser name and version: Chrome 73
• platform and version: macOSX high sierra

[Farfurix]

@Esteban26

Hello.
Since we are using the FFmpeg library I do not think this issue relates to TestCafe.
In addition to referring to the FFmpeg documentation, I can only suggest you decrease the test execution speed. It will allow you to make the recorded actions more understandable.

[Esteban26]

I think this issue should not be closed since Testcafe its getting the video frames with its screenshot module, so it is a problem with test cafe because there are not enough frames to complete an smoother animation. Doesn't make sense for me and maybe for somebody else solve the issue by increasing the animation time execution because in that case I won't test what I need...

[Esteban26]

As you can see on this video got with Test cafe, it is only getting one frame for each second... and ffmpeg doesn't get the video frames.

https://drive.google.com/file/d/1Vsi5P8efIGT_EbxsevELKhu--0003e-h/view?usp=sharing

[AlexKamaev]

@Esteban26
Your video requires permission, so I requested access.
I tested video recording (in Chrome) and can confirm that the video is not smooth. So I'll reopen the issue and will discuss possible solutions with the team. However, I cannot give you any estimate since the solution can be really complex.
 

[jbradensmile]

I know it was said there is no estimate because it's a complex situation, but I was wondering if there was an update to this? I currently have to rerun a failed test manually and use Snag-It to get a good enough video to provide to my development team when a test fails.

[Farfurix]

@jbradensmile

Hello,

At present there is no any update to this issue. As a workaround you can use the Firefox browser to record a video. The Firefox video is much smoother.

[shane51]

Testcafe is pretty good, also for the video recording, but when I tried on Chrome, the video quality is not usable... Really appreciate that this issue can be fixed on chrome.

[Esteban26]

@AlexKamaev could you please try with this link?

Updated:

https://drive.google.com/file/d/1Vsi5P8efIGT_EbxsevELKhu--0003e-h/view?usp=sharing

[AndreyBelym]

@Esteban26 thank you for additional information. We are aware that video recording performance is not very high in Chrome. Unfortunately, the bottleneck is on the browser's side - Chrome can't produce screenshot data at any higher rate. We will try an alternative Chrome API designed for screencasting, but it may take some time. If you want to record a video with a higher frame rate, try to run your tests in Firefox.

[orihomie]

I've just encountered this. Any updates?

[AlexKamaev]

No updates yet. Once we get any results, we will post them here.