feat(connect): allow multiple webkit connections over web socket (#863)

Author: pavelfeldman

docs/api.md

@@ -147,7 +147,6 @@ See [ChromiumBrowser], [FirefoxBrowser] and [WebKitBrowser] for browser-specific
 - [event: 'disconnected'](#event-disconnected)
 - [browser.browserContexts()](#browserbrowsercontexts)
 - [browser.close()](#browserclose)
-- [browser.disconnect()](#browserdisconnect)
 - [browser.isConnected()](#browserisconnected)
 - [browser.newContext(options)](#browsernewcontextoptions)
 - [browser.newPage(url, [options])](#browsernewpageurl-options)
@@ -168,12 +167,11 @@ a single instance of [BrowserContext].
 #### browser.close()
 - returns: <[Promise]>
 
-Closes browser and all of its pages (if any were opened). The [Browser] object itself is considered to be disposed and cannot be used anymore.
+In case this browser is obtained using [browserType.launch](#browsertypelaunchoptions), closes the browser and all of its pages (if any were opened).
 
-#### browser.disconnect()
-- returns: <[Promise]>
+In case this browser is obtained using [browserType.connect](#browsertypeconnectoptions), clears all created contexts belonging to this browser and disconnects from the browser server.
 
-Disconnects Browser from the browser application, but leaves the application process running. After calling `disconnect`, the [Browser] object is considered disposed and cannot be used anymore.
+The [Browser] object itself is considered to be disposed and cannot be used anymore.
 
 #### browser.isConnected()
 
@@ -3468,12 +3466,11 @@ const { chromium } = require('playwright');  // Or 'firefox' or 'webkit'.
 
 <!-- GEN:toc -->
 - [browserType.connect(options)](#browsertypeconnectoptions)
-- [browserType.defaultArgs([options])](#browsertypedefaultargsoptions)
 - [browserType.devices](#browsertypedevices)
 - [browserType.errors](#browsertypeerrors)
 - [browserType.executablePath()](#browsertypeexecutablepath)
 - [browserType.launch([options])](#browsertypelaunchoptions)
-- [browserType.launchPersistent([options])](#browsertypelaunchpersistentoptions)
+- [browserType.launchPersistent(userDataDir, [options])](#browsertypelaunchpersistentuserdatadir-options)
 - [browserType.launchServer([options])](#browsertypelaunchserveroptions)
 - [browserType.name()](#browsertypename)
 <!-- GEN:stop -->
@@ -3648,7 +3645,6 @@ await browser.stopTracing();
 - [event: 'disconnected'](#event-disconnected)
 - [browser.browserContexts()](#browserbrowsercontexts)
 - [browser.close()](#browserclose)
-- [browser.disconnect()](#browserdisconnect)
 - [browser.isConnected()](#browserisconnected)
 - [browser.newContext(options)](#browsernewcontextoptions)
 - [browser.newPage(url, [options])](#browsernewpageurl-options)
@@ -3816,7 +3812,6 @@ Firefox browser instance does not expose Firefox-specific features.
 - [event: 'disconnected'](#event-disconnected)
 - [browser.browserContexts()](#browserbrowsercontexts)
 - [browser.close()](#browserclose)
-- [browser.disconnect()](#browserdisconnect)
 - [browser.isConnected()](#browserisconnected)
 - [browser.newContext(options)](#browsernewcontextoptions)
 - [browser.newPage(url, [options])](#browsernewpageurl-options)
@@ -3833,7 +3828,6 @@ WebKit browser instance does not expose WebKit-specific features.
 - [event: 'disconnected'](#event-disconnected)
 - [browser.browserContexts()](#browserbrowsercontexts)
 - [browser.close()](#browserclose)
-- [browser.disconnect()](#browserdisconnect)
 - [browser.isConnected()](#browserisconnected)
 - [browser.newContext(options)](#browsernewcontextoptions)
 - [browser.newPage(url, [options])](#browsernewpageurl-options)

docs/web.md

@@ -12,7 +12,7 @@ API consists of a single `connect` function, similar to [browserType.connect(opt
 async function usePlaywright() {
   const browser = await window.playwrightweb.chromium.connect(options); // or 'firefox', 'webkit'
   // ... drive automation ...
-  await browser.disconnect();
+  await browser.close();
 }
 </script>
 ```

src/browser.ts

@@ -23,7 +23,6 @@ export interface Browser extends platform.EventEmitterType {
   browserContexts(): BrowserContext[];
   pages(): Promise<Page[]>;
   newPage(url?: string, options?: BrowserContextOptions): Promise<Page>;
-  disconnect(): Promise<void>;
   isConnected(): boolean;
   close(): Promise<void>;
 }

src/chromium/crBrowser.ts

@@ -44,28 +44,23 @@ export class CRBrowser extends platform.EventEmitter implements Browser {
 
   static async connect(transport: ConnectionTransport, slowMo?: number): Promise<CRBrowser> {
     const connection = new CRConnection(SlowMoTransport.wrap(transport, slowMo));
-    const { browserContextIds } = await connection.rootSession.send('Target.getBrowserContexts');
-    const browser = new CRBrowser(connection, browserContextIds);
+    const browser = new CRBrowser(connection);
     await connection.rootSession.send('Target.setDiscoverTargets', { discover: true });
     await browser.waitForTarget(t => t.type() === 'page');
     return browser;
   }
 
-  constructor(connection: CRConnection, contextIds: string[]) {
+  constructor(connection: CRConnection) {
     super();
     this._connection = connection;
     this._client = connection.rootSession;
 
     this._defaultContext = this._createBrowserContext(null, {});
-    for (const contextId of contextIds)
-      this._contexts.set(contextId, this._createBrowserContext(contextId, {}));
-
     this._connection.on(ConnectionEvents.Disconnected, () => this.emit(CommonEvents.Browser.Disconnected));
     this._client.on('Target.targetCreated', this._targetCreated.bind(this));
     this._client.on('Target.targetDestroyed', this._targetDestroyed.bind(this));
     this._client.on('Target.targetInfoChanged', this._targetInfoChanged.bind(this));
   }
-
   _createBrowserContext(contextId: string | null, options: BrowserContextOptions): BrowserContext {
     const context = new BrowserContext({
       pages: async (): Promise<Page[]> => {
@@ -245,7 +240,8 @@ export class CRBrowser extends platform.EventEmitter implements Browser {
 
   async close() {
     const disconnected = new Promise(f => this._connection.once(ConnectionEvents.Disconnected, f));
-    await this._connection.rootSession.send('Browser.close');
+    await Promise.all(this.browserContexts().map(context => context.close()));
+    this._connection.close();
     await disconnected;
   }
 
@@ -305,12 +301,6 @@ export class CRBrowser extends platform.EventEmitter implements Browser {
     return CRTarget.fromPage(page);
   }
 
-  async disconnect() {
-    const disconnected = new Promise(f => this.once(CommonEvents.Browser.Disconnected, f));
-    this._connection.close();
-    await disconnected;
-  }
-
   isConnected(): boolean {
     return !this._connection._closed;
   }

src/firefox/ffBrowser.ts

@@ -37,23 +37,19 @@ export class FFBrowser extends platform.EventEmitter implements Browser {
 
   static async connect(transport: ConnectionTransport, slowMo?: number): Promise<FFBrowser> {
     const connection = new FFConnection(SlowMoTransport.wrap(transport, slowMo));
-    const { browserContextIds } = await connection.send('Target.getBrowserContexts');
-    const browser = new FFBrowser(connection, browserContextIds);
+    const browser = new FFBrowser(connection);
     await connection.send('Target.enable');
     await browser._waitForTarget(t => t.type() === 'page');
     return browser;
   }
 
-  constructor(connection: FFConnection, browserContextIds: Array<string>) {
+  constructor(connection: FFConnection) {
     super();
     this._connection = connection;
     this._targets = new Map();
 
     this._defaultContext = this._createBrowserContext(null, {});
     this._contexts = new Map();
-    for (const browserContextId of browserContextIds)
-      this._contexts.set(browserContextId, this._createBrowserContext(browserContextId, {}));
-
     this._connection.on(ConnectionEvents.Disconnected, () => this.emit(Events.Browser.Disconnected));
 
     this._eventListeners = [
@@ -63,12 +59,6 @@ export class FFBrowser extends platform.EventEmitter implements Browser {
     ];
   }
 
-  async disconnect() {
-    const disconnected = new Promise(f => this.once(Events.Browser.Disconnected, f));
-    this._connection.close();
-    await disconnected;
-  }
-
   isConnected(): boolean {
     return !this._connection._closed;
   }
@@ -154,9 +144,10 @@ export class FFBrowser extends platform.EventEmitter implements Browser {
   }
 
   async close() {
+    await Promise.all(this.browserContexts().map(context => context.close()));
     helper.removeEventListeners(this._eventListeners);
-    const disconnected = new Promise(f => this._connection.once(ConnectionEvents.Disconnected, f));
-    await this._connection.send('Browser.close');
+    const disconnected = new Promise(f => this.once(Events.Browser.Disconnected, f));
+    this._connection.close();
     await disconnected;
   }
 

src/platform.ts

@@ -276,14 +276,22 @@ export function fetchUrl(url: string): Promise<string> {
   });
 }
 
-class WebSocketTransport implements ConnectionTransport {
+export class WebSocketTransport implements ConnectionTransport {
   private _ws: WebSocket;
 
   onmessage?: (message: string) => void;
   onclose?: () => void;
+  private _connect: Promise<void>;
 
-  constructor(ws: WebSocket) {
-    this._ws = ws;
+  constructor(url: string) {
+    this._ws = (isNode ? new NodeWebSocket(url, [], {
+      perMessageDeflate: false,
+      maxPayload: 256 * 1024 * 1024, // 256Mb
+    }) : new WebSocket(url)) as WebSocket;
+    this._connect = new Promise((fulfill, reject) => {
+      this._ws.addEventListener('open', () => fulfill());
+      this._ws.addEventListener('error', event => reject(new Error(event.toString())));
+    });
     this._ws.addEventListener('message', event => {
       if (this.onmessage)
         this.onmessage.call(null, event.data);
@@ -296,22 +304,12 @@ class WebSocketTransport implements ConnectionTransport {
     this._ws.addEventListener('error', () => {});
   }
 
-  send(message: string) {
+  async send(message: string) {
+    await this._connect;
     this._ws.send(message);
   }
 
   close() {
     this._ws.close();
   }
 }
-
-export function createWebSocketTransport(url: string): Promise<ConnectionTransport> {
-  return new Promise((resolve, reject) => {
-    const ws = (isNode ? new NodeWebSocket(url, [], {
-      perMessageDeflate: false,
-      maxPayload: 256 * 1024 * 1024, // 256Mb
-    }) : new WebSocket(url)) as WebSocket;
-    ws.addEventListener('open', () => resolve(new WebSocketTransport(ws)));
-    ws.addEventListener('error', reject);
-  });
-}

src/server/chromium.ts

@@ -122,9 +122,9 @@ export class Chromium implements BrowserType {
         // We try to gracefully close to prevent crash reporting and core dumps.
         // Note that it's fine to reuse the pipe transport, since
         // our connection ignores kBrowserCloseMessageId.
-        const t = transport || await platform.createWebSocketTransport(browserWSEndpoint!);
+        const t = transport || new platform.WebSocketTransport(browserWSEndpoint!);
         const message = { method: 'Browser.close', id: kBrowserCloseMessageId };
-        t.send(JSON.stringify(message));
+        await t.send(JSON.stringify(message));
       },
       onkill: (exitCode, signal) => {
         if (browserServer)
@@ -147,7 +147,7 @@ export class Chromium implements BrowserType {
   }
 
   async connect(options: ConnectOptions): Promise<CRBrowser> {
-    const transport = await platform.createWebSocketTransport(options.wsEndpoint);
+    const transport = new platform.WebSocketTransport(options.wsEndpoint);
     return CRBrowser.connect(transport, options.slowMo);
   }
 

src/server/firefox.ts

@@ -70,7 +70,7 @@ export class Firefox implements BrowserType {
     return browserContext;
   }
 
-  private async _launchServer(options: LaunchOptions = {}, launchType: LaunchType, userDataDir?: string, port?: number): Promise<{ browserServer: BrowserServer, transport?: ConnectionTransport }> {
+  private async _launchServer(options: LaunchOptions = {}, connectionType: LaunchType, userDataDir?: string, port?: number): Promise<{ browserServer: BrowserServer, transport?: ConnectionTransport }> {
     const {
       ignoreDefaultArgs = false,
       args = [],
@@ -128,9 +128,9 @@ export class Firefox implements BrowserType {
         // We try to gracefully close to prevent crash reporting and core dumps.
         // Note that it's fine to reuse the pipe transport, since
         // our connection ignores kBrowserCloseMessageId.
-        const transport = await platform.createWebSocketTransport(browserWSEndpoint);
+        const transport = new platform.WebSocketTransport(browserWSEndpoint);
         const message = { method: 'Browser.close', params: {}, id: kBrowserCloseMessageId };
-        transport.send(JSON.stringify(message));
+        await transport.send(JSON.stringify(message));
       },
       onkill: (exitCode, signal) => {
         if (browserServer)
@@ -141,12 +141,12 @@ export class Firefox implements BrowserType {
     const timeoutError = new TimeoutError(`Timed out after ${timeout} ms while trying to connect to Firefox!`);
     const match = await waitForLine(launchedProcess, launchedProcess.stdout, /^Juggler listening on (ws:\/\/.*)$/, timeout, timeoutError);
     const browserWSEndpoint = match[1];
-    browserServer = new BrowserServer(launchedProcess, gracefullyClose, launchType === 'server' ? browserWSEndpoint : null);
-    return { browserServer, transport: launchType === 'server' ? undefined : await platform.createWebSocketTransport(browserWSEndpoint) };
+    browserServer = new BrowserServer(launchedProcess, gracefullyClose, connectionType === 'server' ? browserWSEndpoint : null);
+    return { browserServer, transport: connectionType === 'server' ? undefined : new platform.WebSocketTransport(browserWSEndpoint) };
   }
 
   async connect(options: ConnectOptions): Promise<FFBrowser> {
-    const transport = await platform.createWebSocketTransport(options.wsEndpoint);
+    const transport = new platform.WebSocketTransport(options.wsEndpoint);
     return FFBrowser.connect(transport, options.slowMo);
   }