feat(chromium): add ConsoleMessage support for service workers (#37368)

Author: mxschmitt

docs/src/api/class-worker.md

@@ -58,6 +58,16 @@ foreach(var pageWorker in page.Workers)
 
 Emitted when this dedicated [WebWorker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) is terminated.
 
+## event: Worker.console
+* since: v1.56
+- argument: <[ConsoleMessage]>
+
+:::note
+Console events from Web Workers are dispatched on the page object. Note that console events are only supported on Chromium-based browsers and within Service Workers.
+:::
+
+Emitted when JavaScript within the worker calls one of console API methods, e.g. `console.log` or `console.dir`.
+
 ## async method: Worker.evaluate
 * since: v1.8
 - returns: <[Serializable]>

packages/playwright-client/types/types.d.ts

@@ -10326,33 +10326,72 @@ export interface Worker {
    */
   on(event: 'close', listener: (worker: Worker) => any): this;
 
+  /**
+   * **NOTE** Console events from Web Workers are dispatched on the page object. Note that console events are only
+   * supported on Chromium-based browsers and within Service Workers.
+   *
+   * Emitted when JavaScript within the worker calls one of console API methods, e.g. `console.log` or `console.dir`.
+   */
+  on(event: 'console', listener: (consoleMessage: ConsoleMessage) => any): this;
+
   /**
    * Adds an event listener that will be automatically removed after it is triggered once. See `addListener` for more information about this event.
    */
   once(event: 'close', listener: (worker: Worker) => any): this;
 
+  /**
+   * Adds an event listener that will be automatically removed after it is triggered once. See `addListener` for more information about this event.
+   */
+  once(event: 'console', listener: (consoleMessage: ConsoleMessage) => any): this;
+
   /**
    * Emitted when this dedicated [WebWorker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) is
    * terminated.
    */
   addListener(event: 'close', listener: (worker: Worker) => any): this;
 
+  /**
+   * **NOTE** Console events from Web Workers are dispatched on the page object. Note that console events are only
+   * supported on Chromium-based browsers and within Service Workers.
+   *
+   * Emitted when JavaScript within the worker calls one of console API methods, e.g. `console.log` or `console.dir`.
+   */
+  addListener(event: 'console', listener: (consoleMessage: ConsoleMessage) => any): this;
+
   /**
    * Removes an event listener added by `on` or `addListener`.
    */
   removeListener(event: 'close', listener: (worker: Worker) => any): this;
 
+  /**
+   * Removes an event listener added by `on` or `addListener`.
+   */
+  removeListener(event: 'console', listener: (consoleMessage: ConsoleMessage) => any): this;
+
   /**
    * Removes an event listener added by `on` or `addListener`.
    */
   off(event: 'close', listener: (worker: Worker) => any): this;
 
+  /**
+   * Removes an event listener added by `on` or `addListener`.
+   */
+  off(event: 'console', listener: (consoleMessage: ConsoleMessage) => any): this;
+
   /**
    * Emitted when this dedicated [WebWorker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) is
    * terminated.
    */
   prependListener(event: 'close', listener: (worker: Worker) => any): this;
 
+  /**
+   * **NOTE** Console events from Web Workers are dispatched on the page object. Note that console events are only
+   * supported on Chromium-based browsers and within Service Workers.
+   *
+   * Emitted when JavaScript within the worker calls one of console API methods, e.g. `console.log` or `console.dir`.
+   */
+  prependListener(event: 'console', listener: (consoleMessage: ConsoleMessage) => any): this;
+
   url(): string;
 }
 

packages/playwright-core/src/client/events.ts

@@ -87,6 +87,7 @@ export const Events = {
 
   Worker: {
     Close: 'close',
+    Console: 'console',
   },
 
   ElectronApplication: {

packages/playwright-core/src/client/worker.ts

@@ -15,6 +15,7 @@
  */
 
 import { ChannelOwner } from './channelOwner';
+import { ConsoleMessage } from './consoleMessage';
 import { TargetClosedError } from './errors';
 import { Events } from './events';
 import { JSHandle, assertMaxArguments, parseResult, serializeArgument } from './jsHandle';
@@ -45,7 +46,13 @@ export class Worker extends ChannelOwner<channels.WorkerChannel> implements api.
         this._context._serviceWorkers.delete(this);
       this.emit(Events.Worker.Close, this);
     });
+    this._channel.on('console', event => {
+      this.emit(Events.Worker.Console, new ConsoleMessage(this._page?.context()._platform ?? this._context?._platform!, event));
+    });
     this.once(Events.Worker.Close, () => this._closedScope.close(this._page?._closeErrorWithReason() || new TargetClosedError()));
+    this._setEventToSubscriptionMapping(new Map<string, channels.WorkerUpdateSubscriptionParams['event']>([
+      [Events.Worker.Console, 'console'],
+    ]));
   }
 
   url(): string {

packages/playwright-core/src/protocol/validator.ts

@@ -1929,6 +1929,16 @@ scheme.WorkerInitializer = tObject({
   url: tString,
 });
 scheme.WorkerCloseEvent = tOptional(tObject({}));
+scheme.WorkerConsoleEvent = tObject({
+  type: tString,
+  text: tString,
+  args: tArray(tChannel(['ElementHandle', 'JSHandle'])),
+  location: tObject({
+    url: tString,
+    lineNumber: tInt,
+    columnNumber: tInt,
+  }),
+});
 scheme.WorkerEvaluateExpressionParams = tObject({
   expression: tString,
   isFunction: tOptional(tBoolean),
@@ -1945,6 +1955,11 @@ scheme.WorkerEvaluateExpressionHandleParams = tObject({
 scheme.WorkerEvaluateExpressionHandleResult = tObject({
   handle: tChannel(['ElementHandle', 'JSHandle']),
 });
+scheme.WorkerUpdateSubscriptionParams = tObject({
+  event: tEnum(['console']),
+  enabled: tBoolean,
+});
+scheme.WorkerUpdateSubscriptionResult = tOptional(tObject({}));
 scheme.JSHandleInitializer = tObject({
   preview: tString,
 });

packages/playwright-core/src/server/chromium/crServiceWorker.ts

@@ -14,10 +14,12 @@
  * limitations under the License.
  */
 import { Worker } from '../page';
-import { CRExecutionContext } from './crExecutionContext';
+import { createHandle, CRExecutionContext } from './crExecutionContext';
 import { CRNetworkManager } from './crNetworkManager';
 import { BrowserContext } from '../browserContext';
+import { ConsoleMessage } from '../console';
 import * as network from '../network';
+import { toConsoleMessageLocation } from './crProtocolHelper';
 
 import type { CRBrowserContext } from './crBrowser';
 import type { CRSession } from './crConnection';
@@ -51,6 +53,13 @@ export class CRServiceWorker extends Worker {
       // Resume service worker after restart.
       session._sendMayFail('Runtime.runIfWaitingForDebugger', {});
     });
+    session.on('Runtime.consoleAPICalled', event => {
+      if (!this.existingExecutionContext)
+        return;
+      const args = event.args.map(o => createHandle(this.existingExecutionContext!, o));
+      const message = new ConsoleMessage(null, event.type, undefined, args, toConsoleMessageLocation(event.stackTrace));
+      this.emit(Worker.Events.Console, message);
+    });
   }
 
   override didClose() {

packages/playwright-core/src/server/dispatchers/pageDispatcher.ts

@@ -31,6 +31,7 @@ import { urlMatches } from '../../utils/isomorphic/urlMatch';
 import type { Artifact } from '../artifact';
 import type { BrowserContext } from '../browserContext';
 import type { CRCoverage } from '../chromium/crCoverage';
+import type { ConsoleMessage } from '../console';
 import type { Download } from '../download';
 import type { FileChooser } from '../fileChooser';
 import type { JSHandle } from '../javascript';
@@ -387,6 +388,7 @@ export class PageDispatcher extends Dispatcher<Page, channels.PageChannel, Brows
 
 export class WorkerDispatcher extends Dispatcher<Worker, channels.WorkerChannel, PageDispatcher | BrowserContextDispatcher> implements channels.WorkerChannel {
   _type_Worker = true;
+  private readonly _subscriptions = new Set<channels.WorkerUpdateSubscriptionParams['event']>();
 
   static fromNullable(scope: PageDispatcher | BrowserContextDispatcher, worker: Worker | null): WorkerDispatcher | undefined {
     if (!worker)
@@ -400,6 +402,23 @@ export class WorkerDispatcher extends Dispatcher<Worker, channels.WorkerChannel,
       url: worker.url
     });
     this.addObjectListener(Worker.Events.Close, () => this._dispatchEvent('close'));
+    this.addObjectListener(Worker.Events.Console, (message: ConsoleMessage) => {
+      if (!this._subscriptions.has('console'))
+        return;
+      this._dispatchEvent('console', {
+        type: message.type(),
+        text: message.text(),
+        args: message.args().map(a => JSHandleDispatcher.fromJSHandle(this, a)),
+        location: message.location(),
+      });
+    });
+  }
+
+  async updateSubscription(params: channels.WorkerUpdateSubscriptionParams, progress: Progress): Promise<void> {
+    if (params.enabled)
+      this._subscriptions.add(params.event);
+    else
+      this._subscriptions.delete(params.event);
   }
 
   async evaluateExpression(params: channels.WorkerEvaluateExpressionParams, progress: Progress): Promise<channels.WorkerEvaluateExpressionResult> {

packages/playwright-core/src/server/page.ts

@@ -841,6 +841,7 @@ export class Page extends SdkObject {
 export class Worker extends SdkObject {
   static Events = {
     Close: 'close',
+    Console: 'console',
   };
 
   readonly url: string;

packages/playwright-core/src/utils/isomorphic/protocolMetainfo.ts

@@ -185,6 +185,7 @@ export const methodMetainfo = new Map<string, { internal?: boolean, title?: stri
   ['Frame.expect', { title: 'Expect "{expression}"', snapshot: true, pausesBeforeAction: true, }],
   ['Worker.evaluateExpression', { title: 'Evaluate', }],
   ['Worker.evaluateExpressionHandle', { title: 'Evaluate', }],
+  ['Worker.updateSubscription', { internal: true, }],
   ['JSHandle.dispose', { internal: true, }],
   ['ElementHandle.dispose', { internal: true, }],
   ['JSHandle.evaluateExpression', { title: 'Evaluate', snapshot: true, pausesBeforeAction: true, }],

packages/playwright-core/types/types.d.ts

@@ -10326,33 +10326,72 @@ export interface Worker {
    */
   on(event: 'close', listener: (worker: Worker) => any): this;
 
+  /**
+   * **NOTE** Console events from Web Workers are dispatched on the page object. Note that console events are only
+   * supported on Chromium-based browsers and within Service Workers.
+   *
+   * Emitted when JavaScript within the worker calls one of console API methods, e.g. `console.log` or `console.dir`.
+   */
+  on(event: 'console', listener: (consoleMessage: ConsoleMessage) => any): this;
+
   /**
    * Adds an event listener that will be automatically removed after it is triggered once. See `addListener` for more information about this event.
    */
   once(event: 'close', listener: (worker: Worker) => any): this;
 
+  /**
+   * Adds an event listener that will be automatically removed after it is triggered once. See `addListener` for more information about this event.
+   */
+  once(event: 'console', listener: (consoleMessage: ConsoleMessage) => any): this;
+
   /**
    * Emitted when this dedicated [WebWorker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) is
    * terminated.
    */
   addListener(event: 'close', listener: (worker: Worker) => any): this;
 
+  /**
+   * **NOTE** Console events from Web Workers are dispatched on the page object. Note that console events are only
+   * supported on Chromium-based browsers and within Service Workers.
+   *
+   * Emitted when JavaScript within the worker calls one of console API methods, e.g. `console.log` or `console.dir`.
+   */
+  addListener(event: 'console', listener: (consoleMessage: ConsoleMessage) => any): this;
+
   /**
    * Removes an event listener added by `on` or `addListener`.
    */
   removeListener(event: 'close', listener: (worker: Worker) => any): this;
 
+  /**
+   * Removes an event listener added by `on` or `addListener`.
+   */
+  removeListener(event: 'console', listener: (consoleMessage: ConsoleMessage) => any): this;
+
   /**
    * Removes an event listener added by `on` or `addListener`.
    */
   off(event: 'close', listener: (worker: Worker) => any): this;
 
+  /**
+   * Removes an event listener added by `on` or `addListener`.
+   */
+  off(event: 'console', listener: (consoleMessage: ConsoleMessage) => any): this;
+
   /**
    * Emitted when this dedicated [WebWorker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) is
    * terminated.
    */
   prependListener(event: 'close', listener: (worker: Worker) => any): this;
 
+  /**
+   * **NOTE** Console events from Web Workers are dispatched on the page object. Note that console events are only
+   * supported on Chromium-based browsers and within Service Workers.
+   *
+   * Emitted when JavaScript within the worker calls one of console API methods, e.g. `console.log` or `console.dir`.
+   */
+  prependListener(event: 'console', listener: (consoleMessage: ConsoleMessage) => any): this;
+
   url(): string;
 }