api(video): simplify video api (#3924)

- This leaves just `recordVideos` and `videoSize` options on the context.
- Videos are saved to `artifactsPath`. We also save their ids to trace.
- `context.close()` waits for the processed videos.

docs/api.md

@@ -221,8 +221,8 @@ Indicates that the browser is connected.
   - `colorScheme` <"light"|"dark"|"no-preference"> Emulates `'prefers-colors-scheme'` media feature, supported values are `'light'`, `'dark'`, `'no-preference'`. See [page.emulateMedia(options)](#pageemulatemediaoptions) for more details. Defaults to '`light`'.
   - `logger` <[Logger]> Logger sink for Playwright logging.
   - `relativeArtifactsPath` <[string]> Specifies a folder for artifacts like downloads, videos and traces, relative to `artifactsPath` from [`browserType.launch`](#browsertypelaunchoptions). Defaults to `.`.
-  - `_recordVideos` <[boolean]> **experimental** Enables automatic video recording for new pages.
-  - `_videoSize` <[Object]> **experimental** Specifies dimensions of the automatically recorded video. Can only be used if `_recordVideos` is true. If not specified the size will be equal to `viewport`. If `viewport` is not configured explicitly the video size defaults to 1280x720. Actual picture of the page will be scaled down if necessary to fit specified size.
+  - `recordVideos` <[boolean]> Enables video recording for all pages to the `relativeArtifactsPath` folder.
+  - `videoSize` <[Object]> Specifies dimensions of the automatically recorded video. Can only be used if `recordVideos` is true. If not specified the size will be equal to `viewport`. If `viewport` is not configured explicitly the video size defaults to 1280x720. Actual picture of the page will be scaled down if necessary to fit specified size.
     - `width` <[number]> Video frame width.
     - `height` <[number]> Video frame height.
   - `recordTrace` <[boolean]> Enables trace recording to the `relativeArtifactsPath` folder.
@@ -269,8 +269,8 @@ Creates a new browser context. It won't share cookies/cache with other browser c
   - `colorScheme` <"light"|"dark"|"no-preference"> Emulates `'prefers-colors-scheme'` media feature, supported values are `'light'`, `'dark'`, `'no-preference'`. See [page.emulateMedia(options)](#pageemulatemediaoptions) for more details. Defaults to '`light`'.
   - `logger` <[Logger]> Logger sink for Playwright logging.
   - `relativeArtifactsPath` <[string]> Specifies a folder for artifacts like downloads, videos and traces, relative to `artifactsPath` from [`browserType.launch`](#browsertypelaunchoptions). Defaults to `.`.
-  - `_recordVideos` <[boolean]> **experimental** Enables automatic video recording for the new page.
-  - `_videoSize` <[Object]> **experimental** Specifies dimensions of the automatically recorded video. Can only be used if `_recordVideos` is true. If not specified the size will be equal to `viewport`. If `viewport` is not configured explicitly the video size defaults to 1280x720. Actual picture of the page will be scaled down if necessary to fit specified size.
+  - `recordVideos` <[boolean]> Enables video recording for all pages to the `relativeArtifactsPath` folder.
+  - `videoSize` <[Object]> Specifies dimensions of the automatically recorded video. Can only be used if `recordVideos` is true. If not specified the size will be equal to `viewport`. If `viewport` is not configured explicitly the video size defaults to 1280x720. Actual picture of the page will be scaled down if necessary to fit specified size.
     - `width` <[number]> Video frame width.
     - `height` <[number]> Video frame height.
   - `recordTrace` <[boolean]> Enables trace recording to the `relativeArtifactsPath` folder.
@@ -701,7 +701,6 @@ page.removeListener('request', logRequest);
 ```
 
 <!-- GEN:toc -->
-- [event: '_videostarted'](#event-_videostarted)
 - [event: 'close'](#event-close-1)
 - [event: 'console'](#event-console)
 - [event: 'crash'](#event-crash)
@@ -788,35 +787,6 @@ page.removeListener('request', logRequest);
 - [page.workers()](#pageworkers)
 <!-- GEN:stop -->
 
-#### event: '_videostarted'
-- <[Object]> Video object. Provides access to the video after it has been written to a file.
-
-**experimental**
-Emitted when video recording has started for this page. The event will fire only if [`_recordVideos`](#browsernewcontextoptions) option is configured on the parent context.
-
-An example of recording a video for single page.
-```js
-const { webkit } = require('playwright');  // Or 'chromium' or 'firefox'.
-
-(async () => {
-  const browser = await webkit.launch({
-    _videosPath: __dirname   // Save videos to custom directory
-  });
-  const context = await browser.newContext({
-    _recordVideos: true,
-    _videoSize: { width: 640, height: 360 }
-  });
-  const page = await context.newPage();
-  const video = await page.waitForEvent('_videostarted');
-  await page.goto('https://github.com/microsoft/playwright');
-  // Video recording will stop automaticall when the page closes.
-  await page.close();
-  // Wait for the path to the video. It will become available
-  // after the video has been completely written to the the file.
-  console.log('Recorded video: ' + await video.path());
-})();
-```
-
 #### event: 'close'
 
 Emitted when the page closes.
@@ -4205,7 +4175,6 @@ This methods attaches Playwright to an existing browser instance.
     - `password` <[string]> Optional password to use if HTTP proxy requires authentication.
   - `downloadsPath` <[string]> If specified, accepted downloads are downloaded into this folder. Otherwise, temporary folder is created and is deleted when browser is closed.
   - `artifactsPath` <[string]> Specifies a folder for various artifacts like downloads, videos and traces. If not specified, artifacts are not collected.
-  - `_videosPath` <[string]> **experimental** If specified, recorded videos are saved into this folder. Otherwise, temporary folder is created and is deleted when browser is closed.
   - `chromiumSandbox` <[boolean]> Enable Chromium sandboxing. Defaults to `true`.
   - `firefoxUserPrefs` <[Object]<[string], [string]|[number]|[boolean]>> Firefox user preferences. Learn more about the Firefox user preferences at [`about:config`](https://support.mozilla.org/en-US/kb/about-config-editor-firefox).
   - `handleSIGINT` <[boolean]> Close the browser process on Ctrl-C. Defaults to `true`.
@@ -4282,9 +4251,8 @@ const browser = await chromium.launch({  // Or 'firefox' or 'webkit'.
     - `password` <[string]>
   - `colorScheme` <"light"|"dark"|"no-preference"> Emulates `'prefers-colors-scheme'` media feature, supported values are `'light'`, `'dark'`, `'no-preference'`. See [page.emulateMedia(options)](#pageemulatemediaoptions) for more details. Defaults to '`light`'.
   - `relativeArtifactsPath` <[string]> Specifies a folder for artifacts like downloads, videos and traces, relative to `artifactsPath`. Defaults to `.`.
-  - `_videosPath` <[string]> **experimental** If specified, recorded videos are saved into this folder. Otherwise, temporary folder is created and is deleted when browser is closed.
-  - `_recordVideos` <[boolean]> **experimental** Enables automatic video recording for new pages.
-  - `_videoSize` <[Object]> **experimental** Specifies dimensions of the automatically recorded video. Can only be used if `_recordVideos` is true. If not specified the size will be equal to `viewport`. If `viewport` is not configured explicitly the video size defaults to 1280x720. Actual picture of the page will be scaled down if necessary to fit specified size.
+  - `recordVideos` <[boolean]> Enables video recording for all pages to the `relativeArtifactsPath` folder.
+  - `videoSize` <[Object]> Specifies dimensions of the automatically recorded video. Can only be used if `recordVideos` is true. If not specified the size will be equal to `viewport`. If `viewport` is not configured explicitly the video size defaults to 1280x720. Actual picture of the page will be scaled down if necessary to fit specified size.
     - `width` <[number]> Video frame width.
     - `height` <[number]> Video frame height.
   - `recordTrace` <[boolean]> Enables trace recording to the `relativeArtifactsPath` folder.
@@ -4306,7 +4274,6 @@ Launches browser that uses persistent storage located at `userDataDir` and retur
     - `password` <[string]> Optional password to use if HTTP proxy requires authentication.
   - `downloadsPath` <[string]> If specified, accepted downloads are downloaded into this folder. Otherwise, temporary folder is created and is deleted when browser is closed.
   - `artifactsPath` <[string]> Specifies a folder for various artifacts like downloads, videos and traces. If not specified, artifacts are not collected.
-  - `_videosPath` <[string]> **experimental** If specified, recorded videos are saved into this folder. Otherwise, temporary folder is created and is deleted when browser is closed.
   - `chromiumSandbox` <[boolean]> Enable Chromium sandboxing. Defaults to `true`.
   - `firefoxUserPrefs` <[Object]<[string], [string]|[number]|[boolean]>> Firefox user preferences. Learn more about the Firefox user preferences at [`about:config`](https://support.mozilla.org/en-US/kb/about-config-editor-firefox).
   - `handleSIGINT` <[boolean]> Close the browser process on Ctrl-C. Defaults to `true`.

packages/installation-tests/screencast.js

@@ -34,22 +34,19 @@ const fs = require('fs');
   for (const browserType of success) {
     try {
       const browser = await playwright[browserType].launch({
-        _videosPath: __dirname,
+        artifactsPath: __dirname,
       });
       const context = await browser.newContext({
-        _recordVideos: true,
-        _videoSize: {width: 320, height: 240},
+        recordVideos: true,
+        videoSize: {width: 320, height: 240},
       });
-      const page = await context.newPage();
-      const video = await page.waitForEvent('_videostarted');
+      await context.newPage();
       // Wait fo 1 second to actually record something.
       await new Promise(x => setTimeout(x, 1000));
-      const [videoFile] = await Promise.all([
-        video.path(),
-        context.close(),
-      ]);
+      await context.close();
       await browser.close();
-      if (!fs.existsSync(videoFile)) {
+      const videoFile = fs.readdirSync(__dirname).find(name => name.endsWith('webm'));
+      if (!videoFile) {
         console.error(`ERROR: Package "${requireName}", browser "${browserType}" should have created screencast!`);
         process.exit(1);
       }

src/client/connection.ts

@@ -40,7 +40,6 @@ import { WebKitBrowser } from './webkitBrowser';
 import { FirefoxBrowser } from './firefoxBrowser';
 import { debugLogger } from '../utils/debugLogger';
 import { SelectorsOwner } from './selectors';
-import { Video } from './video';
 import { isUnderTest } from '../utils/utils';
 
 class Root extends ChannelOwner<channels.Channel, {}> {
@@ -221,9 +220,6 @@ export class Connection {
       case 'Route':
         result = new Route(parent, type, guid, initializer);
         break;
-      case 'Video':
-        result = new Video(parent, type, guid, initializer);
-        break;
       case 'Stream':
         result = new Stream(parent, type, guid, initializer);
         break;

src/client/events.ts

@@ -50,7 +50,6 @@ export const Events = {
     Load: 'load',
     Popup: 'popup',
     Worker: 'worker',
-    _VideoStarted: '_videostarted',
   },
 
   Worker: {

src/client/page.ts

@@ -42,7 +42,6 @@ import * as util from 'util';
 import { Size, URLMatch, Headers, LifecycleEvent, WaitForEventOptions, SelectOption, SelectOptionOptions, FilePayload, WaitForFunctionOptions } from './types';
 import { evaluationScript, urlMatches } from './clientHelper';
 import { isString, isRegExp, isObject, mkdirIfNeeded, headersObjectToArray } from '../utils/utils';
-import { Video } from './video';
 
 type PDFOptions = Omit<channels.PagePdfParams, 'width' | 'height' | 'margin'> & {
   width?: string | number,
@@ -123,7 +122,6 @@ export class Page extends ChannelOwner<channels.PageChannel, channels.PageInitia
     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('worker', ({ worker }) => this._onWorker(Worker.from(worker)));
-    this._channel.on('videoStarted', params => this._onVideoStarted(params));
 
     if (this._browserContext._browserName === 'chromium') {
       this.coverage = new ChromiumCoverage(this._channel);
@@ -177,10 +175,6 @@ export class Page extends ChannelOwner<channels.PageChannel, channels.PageInitia
     this.emit(Events.Page.Worker, worker);
   }
 
-  private _onVideoStarted(params: channels.PageVideoStartedEvent): void {
-    this.emit(Events.Page._VideoStarted, Video.from(params.video));
-  }
-
   _onClose() {
     this._closed = true;
     this._browserContext._pages.delete(this);

src/client/types.ts

@@ -83,7 +83,6 @@ export type LaunchServerOptions = {
   },
   downloadsPath?: string,
   artifactsPath?: string,
-  _videosPath?: string,
   chromiumSandbox?: boolean,
   port?: number,
   logger?: Logger,

src/dispatchers/pageDispatcher.ts

@@ -30,7 +30,6 @@ import { serializeResult, parseArgument } from './jsHandleDispatcher';
 import { ElementHandleDispatcher, createHandle } from './elementHandlerDispatcher';
 import { FileChooser } from '../server/fileChooser';
 import { CRCoverage } from '../server/chromium/crCoverage';
-import { VideoDispatcher } from './videoDispatcher';
 
 export class PageDispatcher extends Dispatcher<Page, channels.PageInitializer> implements channels.PageChannel {
   private _page: Page;
@@ -66,7 +65,6 @@ 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, screencast => this._dispatchEvent('videoStarted', { video: new VideoDispatcher(this._scope, screencast) }));
     page.on(Page.Events.Worker, worker => this._dispatchEvent('worker', { worker: new WorkerDispatcher(this._scope, worker) }));
   }