[Question] why getVideoPlaybackQuality function returns undefined for HTMLVideoElement?

Hi, I’m trying to check in my test that video is playing. I decided to call getVideoPlaybackQuality function and get totalVideoFrames from VideoPlaybackQuality object.

My code is:

const videoStreamSelector = '//sd-webcam-player/sd-video-stream';
await adminPage.waitForSelector(videoStreamSelector);
const videoStream = await adminPage.$(videoStreamSelector);

const width = await videoStream.$eval('video', (node) => (node as HTMLVideoElement).videoWidth);
const quality = await videoStream.$eval(
    'video',
    (node) => (node as HTMLVideoElement).getVideoPlaybackQuality
);

console.log(JSON.stringify(width));
console.log(JSON.stringify(quality));

The result is:

pw:api waiting for selector "//sd-webcam-player/sd-video-stream" to be visible [] +1ms
pw:api   selector resolved to visible <sd-video-stream muted="true" class="ng-isolate-scope" stream="$c…>…</sd-video-stream> [] +19ms
pw:api <= page.waitForSelector succeeded +18ms
640
undefined

So there is result for videoWidth property and no result for getVideoPlaybackQuality function.

I’m using Firefox with

"media.navigator.streams.fake": true,
"media.navigator.permission.disabled": true,
"media.gstreamer.enabled": false,
"media.mediasource.enabled": true,

What I’m doing wrong? Why the result is undefined? Can I maybe use another approach for this check?

Thanks!

Version: “playwright”: “^1.3.0”

[dgozman]

@viraxslot The snippet you posted is how I would do it 😄 lodash will work as long as the page already uses it. However, if you reference lodash from the function passed to evaluate(), it won’t appear in the page. Learn more about execution contexts here.

Overall, I meant that we’ll think about making this work out of the box. There are tradeoffs to be considered around own properties, but perhaps we can make it better.

[viraxslot]

@dgozman ok, got it 😃 this example works fine:

const quality = await video.evaluate(function (node) {
    const res = (node as HTMLVideoElement).getVideoPlaybackQuality();
    return {
        creationTime: res?.creationTime,
        totalVideoFrames: res?.totalVideoFrames,
        droppedVideoFrames: res?.droppedVideoFrames,
    };
});

lodash.pick() doesn’t work inside the evaluate function.

Error: Evaluation failed: lodash_1 is not defined
@__playwright_evaluation_script__56:3:13
callFunction@__playwright_evaluation_script__19:305:28
@__playwright_evaluation_script__57:1:44
at checkException (node_modules/playwright/lib/firefox/ffExecutionContext.js:86:15)
at FFExecutionContext.evaluateWithArguments (node_modules/playwright/lib/firefox/ffExecutionContext.js:49:9)
at evaluateExpression (node_modules/playwright/lib/javascript.js:164:16)
at Context.<anonymous> (test/rep/test.spec.ts:13:25)
-- ASYNC --
at ElementHandle.evaluate (node_modules/playwright/lib/helper.js:79:23)
at Context.<anonymous> (test/rep/test.spec.ts:13:37)