chore: restore the missing video event

Author: pavelfeldman

docs/api.md

@@ -14,6 +14,7 @@
 - [class: ConsoleMessage](#class-consolemessage)
 - [class: Dialog](#class-dialog)
 - [class: Download](#class-download)
+- [class: Video](#class-video)
 - [class: FileChooser](#class-filechooser)
 - [class: Keyboard](#class-keyboard)
 - [class: Mouse](#class-mouse)
@@ -307,6 +308,7 @@ await context.close();
 <!-- GEN:toc -->
 - [event: 'close'](#event-close)
 - [event: 'page'](#event-page)
+- [event: 'video'](#event-video)
 - [browserContext.addCookies(cookies)](#browsercontextaddcookiescookies)
 - [browserContext.addInitScript(script[, arg])](#browsercontextaddinitscriptscript-arg)
 - [browserContext.browser()](#browsercontextbrowser)
@@ -354,6 +356,13 @@ console.log(await page.evaluate('location.href'));
 
 > **NOTE** Use [`page.waitForLoadState([state[, options]])`](#pagewaitforloadstatestate-options) to wait until the page gets to a particular state (you should not need it in most cases).
 
+#### event: 'video'
+- <[Video]>
+
+Emitted when the video recording is started. User can access video file information via the passed [Video] instance.
+
+> **NOTE** Browser context **must** be created with the `videosPath` set to record videos.
+
 #### browserContext.addCookies(cookies)
 - `cookies` <[Array]<[Object]>>
   - `name` <[string]> **required**
@@ -3429,6 +3438,36 @@ Returns suggested filename for this download. It is typically computed by the br
 Returns downloaded url.
 
 
+### class: Video
+
+[Video] objects are dispatched by the browser context via the ['video'](#event-video) event.
+
+All the video files generated for the browser context are reported with this event. Video event is emitted once the video starts. Video itself becomes available once browser context closes:
+
+```js
+context.on('video', video => {
+  console.log(video.page().url(), video.path());
+})
+```
+
+> **NOTE** Browser context **must** be created with the `videosPath` set to record videos.
+
+<!-- GEN:toc -->
+- [video.page()](#videopage)
+- [video.path()](#videopath)
+<!-- GEN:stop -->
+
+#### video.page()
+- returns: <[Page]>
+
+Returns the page this video is recorder for.
+
+#### video.path()
+- returns: <[string]>
+
+Returns the file system path this video is recorder to.
+
+
 ### class: FileChooser
 
 [FileChooser] objects are dispatched by the page in the ['filechooser'](#event-filechooser) event.
@@ -4436,6 +4475,7 @@ const backgroundPage = await context.waitForEvent('backgroundpage');
 <!-- GEN:toc-extends-BrowserContext -->
 - [event: 'close'](#event-close)
 - [event: 'page'](#event-page)
+- [event: 'video'](#event-video)
 - [browserContext.addCookies(cookies)](#browsercontextaddcookiescookies)
 - [browserContext.addInitScript(script[, arg])](#browsercontextaddinitscriptscript-arg)
 - [browserContext.browser()](#browsercontextbrowser)

src/client/api.ts

@@ -32,6 +32,7 @@ export { JSHandle } from './jsHandle';
 export { Request, Response, Route } from './network';
 export { Page } from './page';
 export { Selectors } from './selectors';
+export { Video } from './video';
 export { Worker } from './worker';
 
 export { ChromiumBrowser } from './chromiumBrowser';

src/client/events.ts

@@ -23,6 +23,7 @@ export const Events = {
   BrowserContext: {
     Close: 'close',
     Page: 'page',
+    Video: 'video',
   },
 
   BrowserServer: {

src/client/page.ts

@@ -44,6 +44,7 @@ import { Size, URLMatch, Headers, LifecycleEvent, WaitForEventOptions, SelectOpt
 import { evaluationScript, urlMatches } from './clientHelper';
 import { isString, isRegExp, isObject, mkdirIfNeeded, headersObjectToArray } from '../utils/utils';
 import { isSafeCloseError } from '../utils/errors';
+import { Video } from './video';
 
 const fsWriteFileAsync = util.promisify(fs.writeFile.bind(fs));
 const mkdirAsync = util.promisify(fs.mkdir);
@@ -125,6 +126,7 @@ export class Page extends ChannelOwner<channels.PageChannel, channels.PageInitia
     this._channel.on('requestFinished', ({ request }) => this.emit(Events.Page.RequestFinished, Request.from(request)));
     this._channel.on('response', ({ response }) => this.emit(Events.Page.Response, Response.from(response)));
     this._channel.on('route', ({ route, request }) => this._onRoute(Route.from(route), Request.from(request)));
+    this._channel.on('video', ({ path }) => this._onVideo(path));
     this._channel.on('worker', ({ worker }) => this._onWorker(Worker.from(worker)));
 
     if (this._browserContext._browserName === 'chromium') {
@@ -173,6 +175,10 @@ export class Page extends ChannelOwner<channels.PageChannel, channels.PageInitia
     this._browserContext._onBinding(bindingCall);
   }
 
+  _onVideo(path: string): void {
+    this._browserContext.emit(Events.BrowserContext.Video, new Video(this, path));
+  }
+
   _onWorker(worker: Worker): void {
     this._workers.add(worker);
     worker._page = this;

src/client/video.ts

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Page } from './page';
+
+export class Video {
+  private _page: Page;
+  private _path: string;
+
+  constructor(page: Page, path: string) {
+    this._page = page;
+    this._path = path;
+  }
+
+  page(): Page {
+    return this._page;
+  }
+
+  path(): string {
+    return this._path;
+  }
+}

src/dispatchers/pageDispatcher.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { BrowserContext, runAction } from '../server/browserContext';
+import { BrowserContext, runAction, Video } from '../server/browserContext';
 import { Frame } from '../server/frames';
 import { Request } from '../server/network';
 import { Page, Worker } from '../server/page';
@@ -66,6 +66,7 @@ export class PageDispatcher extends Dispatcher<Page, channels.PageInitializer> i
     }));
     page.on(Page.Events.RequestFinished, request => this._dispatchEvent('requestFinished', { request: RequestDispatcher.from(scope, request) }));
     page.on(Page.Events.Response, response => this._dispatchEvent('response', { response: new ResponseDispatcher(this._scope, response) }));
+    page.on(Page.Events.VideoStarted, (video: Video) => this._dispatchEvent('video', {  path: video._path }));
     page.on(Page.Events.Worker, worker => this._dispatchEvent('worker', { worker: new WorkerDispatcher(this._scope, worker) }));
   }
 

src/protocol/channels.ts

@@ -683,6 +683,7 @@ export interface PageChannel extends Channel {
   on(event: 'requestFinished', callback: (params: PageRequestFinishedEvent) => void): this;
   on(event: 'response', callback: (params: PageResponseEvent) => void): this;
   on(event: 'route', callback: (params: PageRouteEvent) => void): this;
+  on(event: 'video', callback: (params: PageVideoEvent) => void): this;
   on(event: 'worker', callback: (params: PageWorkerEvent) => void): this;
   setDefaultNavigationTimeoutNoReply(params: PageSetDefaultNavigationTimeoutNoReplyParams, metadata?: Metadata): Promise<PageSetDefaultNavigationTimeoutNoReplyResult>;
   setDefaultTimeoutNoReply(params: PageSetDefaultTimeoutNoReplyParams, metadata?: Metadata): Promise<PageSetDefaultTimeoutNoReplyResult>;
@@ -765,6 +766,9 @@ export type PageRouteEvent = {
   route: RouteChannel,
   request: RequestChannel,
 };
+export type PageVideoEvent = {
+  path: string,
+};
 export type PageWorkerEvent = {
   worker: WorkerChannel,
 };

src/protocol/protocol.yml

@@ -927,6 +927,10 @@ Page:
         route: Route
         request: Request
 
+    video:
+      parameters:
+        path: string
+
     worker:
       parameters:
         worker: Worker

test/screencast.spec.ts

@@ -180,6 +180,27 @@ describe('screencast', suite => {
     }
   });
 
+  it('should emit video event', async ({browser, testInfo}) => {
+    const videosPath = testInfo.outputPath('');
+    const size = { width: 320, height: 240 };
+    const context = await browser.newContext({
+      videosPath,
+      viewport: size,
+      videoSize: size
+    });
+    const videos = [];
+    context.on('video', video => {
+      videos.push(video);
+    });
+    const page = await context.newPage();
+    await page.evaluate(() => document.body.style.backgroundColor = 'red');
+    await new Promise(r => setTimeout(r, 1000));
+    await context.close();
+    expect(videos.length).toBe(1);
+    expect(videos[0].path()).toContain(videosPath);
+    expect(videos[0].page()).toBe(page);
+  });
+
   it('should capture navigation', async ({browser, server, testInfo}) => {
     const videosPath = testInfo.outputPath('');
     const context = await browser.newContext({