fix(screencast): await for the first video frame on Chromium (#4145)

src/server/chromium/crPage.ts

@@ -757,16 +757,19 @@ class FrameSession {
     const videoRecorder = await VideoRecorder.launch(options);
     this._screencastState = 'starting';
     try {
-      await this._client.send('Page.startScreencast', {
-        format: 'jpeg',
-        quality: 90,
-        maxWidth: options.width,
-        maxHeight: options.height,
-      });
       this._screencastState = 'started';
       this._videoRecorder = videoRecorder;
       this._screencastId = screencastId;
       this._crPage._browserContext._browser._videoStarted(this._crPage._browserContext, screencastId, options.outputFile, this._crPage.pageOrError());
+      await Promise.all([
+        this._client.send('Page.startScreencast', {
+          format: 'jpeg',
+          quality: 90,
+          maxWidth: options.width,
+          maxHeight: options.height,
+        }),
+        new Promise(f => this._client.once('Page.screencastFrame', f))
+      ]);
     } catch (e) {
       videoRecorder.stop().catch(() => {});
       throw e;

test/screencast.spec.ts

@@ -196,6 +196,40 @@ describe('screencast', suite => {
     expect(fs.existsSync(path)).toBeTruthy();
   });
 
+  it('should expose video path blank page', async ({browser, testInfo}) => {
+    const videosPath = testInfo.outputPath('');
+    const size = { width: 320, height: 240 };
+    const context = await browser.newContext({
+      videosPath,
+      viewport: size,
+      videoSize: size
+    });
+    const page = await context.newPage();
+    const path = await page.video()!.path();
+    expect(path).toContain(videosPath);
+    await context.close();
+    expect(fs.existsSync(path)).toBeTruthy();
+  });
+
+  it('should expose video path blank popup', async ({browser, testInfo}) => {
+    const videosPath = testInfo.outputPath('');
+    const size = { width: 320, height: 240 };
+    const context = await browser.newContext({
+      videosPath,
+      viewport: size,
+      videoSize: size
+    });
+    const page = await context.newPage();
+    const [popup] = await Promise.all([
+      page.waitForEvent('popup'),
+      page.evaluate('window.open("about:blank")')
+    ]);
+    const path = await popup.video()!.path();
+    expect(path).toContain(videosPath);
+    await context.close();
+    expect(fs.existsSync(path)).toBeTruthy();
+  });
+
   it('should capture navigation', async ({browser, server, testInfo}) => {
     const videosPath = testInfo.outputPath('');
     const context = await browser.newContext({