chore: group chromium-specific features (#45)

2024-11-10 12:57:42 +03:00 · 2019-11-21 16:54:10 -08:00 · 2019-11-21 16:54:10 -08:00 · 1e91257d6e
commit 1e91257d6e
parent 8dce249a7a
16 changed files with 149 additions and 103 deletions
--- a/docs/api.md
+++ b/docs/api.md
@ -34,6 +34,7 @@
  * [event: 'targetcreated'](#event-targetcreated)
  * [event: 'targetdestroyed'](#event-targetdestroyed)
  * [browser.browserContexts()](#browserbrowsercontexts)
+  * [browser.chromium](#browserchromium)
  * [browser.close()](#browserclose)
  * [browser.createIncognitoBrowserContext()](#browsercreateincognitobrowsercontext)
  * [browser.defaultBrowserContext()](#browserdefaultbrowsercontext)
@ -138,7 +139,6 @@
  * [page.setViewport(viewport)](#pagesetviewportviewport)
  * [page.target()](#pagetarget)
  * [page.title()](#pagetitle)
-  * [page.tracing](#pagetracing)
  * [page.tripleclick(selector[, options])](#pagetripleclickselector-options)
  * [page.type(selector, text[, options])](#pagetypeselector-text-options)
  * [page.url()](#pageurl)
@ -178,9 +178,11 @@
  * [mouse.up([options])](#mouseupoptions)
 - [class: PDF](#class-pdf)
  * [pdf.generate([options])](#pdfgenerateoptions)
- [class: Tracing](#class-tracing)
-  * [tracing.start([options])](#tracingstartoptions)
-  * [tracing.stop()](#tracingstop)
+- [class: Chromium](#class-chromium)
+  * [chromium.createCDPSession(target)](#chromiumcreatecdpsessiontarget)
+  * [chromium.serviceWorker(target)](#chromiumserviceworkertarget)
+  * [chromium.startTracing(page, [options])](#chromiumstarttracingpage-options)
+  * [chromium.stopTracing()](#chromiumstoptracing)
 - [class: FileChooser](#class-filechooser)
  * [fileChooser.accept(filePaths)](#filechooseracceptfilepaths)
  * [fileChooser.cancel()](#filechoosercancel)
@ -303,7 +305,6 @@
 - [class: Target](#class-target)
  * [target.browser()](#targetbrowser)
  * [target.browserContext()](#targetbrowsercontext)
-  * [target.createCDPSession()](#targetcreatecdpsession)
  * [target.opener()](#targetopener)
  * [target.page()](#targetpage)
  * [target.type()](#targettype)
@ -680,6 +681,9 @@ Emitted when a target is destroyed, for example when a page is closed.
 Returns an array of all open browser contexts. In a newly created browser, this will return
 a single instance of [BrowserContext].

+#### browser.chromium
+- returns: <[Chromium]>
+
 #### browser.close()
 - returns: <[Promise]>

@ -1807,9 +1811,6 @@ await page.goto('https://example.com');

 Shortcut for [page.mainFrame().title()](#frametitle).

-#### page.tracing
- returns: <[Tracing]>
-
 #### page.tripleclick(selector[, options])
 - `selector` <[string]> A [selector] to search for element to triple click. If there are multiple elements satisfying the selector, the first will be triple clicked.
 - `options` <[Object]>
@ -2442,17 +2443,31 @@ The `format` options are:
 > 2. Page styles are not visible inside templates.


-### class: Tracing
+### class: Chromium

-You can use [`tracing.start`](#tracingstartoptions) and [`tracing.stop`](#tracingstop) to create a trace file which can be opened in Chrome DevTools or [timeline viewer](https://chromedevtools.github.io/timeline-viewer/).
+Chromium-specific features including Tracing, service worker support, etc.
+You can use [`chromium.startTracing`](#chromiumstarttracingpage-options) and [`chromium.stopTracing`](#chromiumstoptracing) to create a trace file which can be opened in Chrome DevTools or [timeline viewer](https://chromedevtools.github.io/timeline-viewer/).

 ```js
-await page.tracing.start({path: 'trace.json'});
+await page.chromium.startTracing({path: 'trace.json'});
 await page.goto('https://www.google.com');
-await page.tracing.stop();
+await page.chromium.stopTracing();
 ```

-#### tracing.start([options])
+#### chromium.createCDPSession(target)
+- `target` <[Target]> Target to return CDP connection for.
+- returns: <[Promise]<[CDPSession]>>
+
+Creates a Chrome Devtools Protocol session attached to the target.
+
+#### chromium.serviceWorker(target)
+- `target` <[Target]> Target to treat as a service worker
+- returns: <[Promise]<[Worker]>>
+
+Attaches to the service worker target.
+
+#### chromium.startTracing(page, [options])
+- `page` <[Page]> Optional, if specified, tracing includes screenshots of the given page.
 - `options` <[Object]>
  - `path` <[string]> A path to write the trace file to.
  - `screenshots` <[boolean]> captures screenshots in the trace.
@ -2461,7 +2476,7 @@ await page.tracing.stop();

 Only one trace can be active at a time per browser.

-#### tracing.stop()
+#### chromium.stopTracing()
 - returns: <[Promise]<[Buffer]>> Promise which resolves to buffer with trace data.

 ### class: FileChooser
@ -3763,11 +3778,6 @@ Get the browser the target belongs to.

 The browser context the target belongs to.

-#### target.createCDPSession()
- returns: <[Promise]<[CDPSession]>>
-
-Creates a Chrome Devtools Protocol session attached to the target.
-
 #### target.opener()
 - returns: <?[Target]>

@ -3799,7 +3809,7 @@ Useful links:
 - Getting Started with DevTools Protocol: https://github.com/aslushnikov/getting-started-with-cdp/blob/master/README.md

 ```js
-const client = await page.target().createCDPSession();
+const client = await page.chromium.createCDPSession(target);
 await client.send('Animation.enable');
 client.on('Animation.animationCreated', () => console.log('Animation created!'));
 const response = await client.send('Animation.getPlaybackRate');
@ -3906,6 +3916,7 @@ TimeoutError is emitted whenever certain operations are terminated due to timeou
 [Buffer]: https://nodejs.org/api/buffer.html#buffer_class_buffer "Buffer"
 [CDPSession]: #class-cdpsession  "CDPSession"
 [ChildProcess]: https://nodejs.org/api/child_process.html "ChildProcess"
+[Chromium]: #class-chromium "Chromium"
 [ConnectionTransport]: ../lib/WebSocketTransport.js "ConnectionTransport"
 [ConsoleMessage]: #class-consolemessage "ConsoleMessage"
 [Coverage]: #class-coverage "Coverage"
@ -3928,7 +3939,6 @@ TimeoutError is emitted whenever certain operations are terminated due to timeou
 [Serializable]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#Description "Serializable"
 [Target]: #class-target "Target"
 [TimeoutError]: #class-timeouterror "TimeoutError"
-[Tracing]: #class-tracing "Tracing"
 [UIEvent.detail]: https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail "UIEvent.detail"
 [USKeyboardLayout]: ../lib/USKeyboardLayout.js "USKeyboardLayout"
 [UnixTime]: https://en.wikipedia.org/wiki/Unix_time "Unix Time"
--- a/src/chromium/Browser.ts
+++ b/src/chromium/Browser.ts
@ -20,11 +20,12 @@ import { EventEmitter } from 'events';
 import { Events } from './events';
 import { assert, helper } from '../helper';
 import { BrowserContext } from './BrowserContext';
-import { Connection, ConnectionEvents } from './Connection';
+import { Connection, ConnectionEvents, CDPSession } from './Connection';
 import { Page, Viewport } from './Page';
 import { Target } from './Target';
 import { TaskQueue } from './TaskQueue';
 import { Protocol } from './protocol';
+import { Chromium } from './features/chromium';

 export class Browser extends EventEmitter {
  private _ignoreHTTPSErrors: boolean;
@ -32,10 +33,12 @@ export class Browser extends EventEmitter {
  private _process: childProcess.ChildProcess;
  private _screenshotTaskQueue = new TaskQueue();
  private _connection: Connection;
+  private _client: CDPSession;
  private _closeCallback: () => Promise<void>;
  private _defaultContext: BrowserContext;
  private _contexts = new Map<string, BrowserContext>();
  _targets = new Map<string, Target>();
+  readonly chromium: Chromium;

  static async create(
    connection: Connection,
@ -44,33 +47,37 @@ export class Browser extends EventEmitter {
    defaultViewport: Viewport | null,
    process: childProcess.ChildProcess | null,
    closeCallback?: (() => Promise<void>)) {
-    const browser = new Browser(connection, contextIds, ignoreHTTPSErrors, defaultViewport, process, closeCallback);
-    await connection.send('Target.setDiscoverTargets', {discover: true});
+    const session = await connection.createBrowserSession();
+    const browser = new Browser(connection, session, contextIds, ignoreHTTPSErrors, defaultViewport, process, closeCallback);
+    await session.send('Target.setDiscoverTargets', {discover: true});
    return browser;
  }

  constructor(
    connection: Connection,
+    client: CDPSession,
    contextIds: string[],
    ignoreHTTPSErrors: boolean,
    defaultViewport: Viewport | null,
    process: childProcess.ChildProcess | null,
    closeCallback?: (() => Promise<void>)) {
    super();
+    this._connection = connection;
+    this._client = client;
    this._ignoreHTTPSErrors = ignoreHTTPSErrors;
    this._defaultViewport = defaultViewport;
    this._process = process;
-    this._connection = connection;
    this._closeCallback = closeCallback || (() => Promise.resolve());
+    this.chromium = new Chromium(this._client);

-    this._defaultContext = new BrowserContext(this._connection, this, null);
+    this._defaultContext = new BrowserContext(this._client, this, null);
    for (const contextId of contextIds)
-      this._contexts.set(contextId, new BrowserContext(this._connection, this, contextId));
+      this._contexts.set(contextId, new BrowserContext(this._client, this, contextId));

    this._connection.on(ConnectionEvents.Disconnected, () => this.emit(Events.Browser.Disconnected));
-    this._connection.on('Target.targetCreated', this._targetCreated.bind(this));
-    this._connection.on('Target.targetDestroyed', this._targetDestroyed.bind(this));
-    this._connection.on('Target.targetInfoChanged', this._targetInfoChanged.bind(this));
+    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));
  }

  process(): childProcess.ChildProcess | null {
@ -78,8 +85,8 @@ export class Browser extends EventEmitter {
  }

  async createIncognitoBrowserContext(): Promise<BrowserContext> {
-    const {browserContextId} = await this._connection.send('Target.createBrowserContext');
-    const context = new BrowserContext(this._connection, this, browserContextId);
+    const {browserContextId} = await this._client.send('Target.createBrowserContext');
+    const context = new BrowserContext(this._client, this, browserContextId);
    this._contexts.set(browserContextId, context);
    return context;
  }
@ -93,7 +100,7 @@ export class Browser extends EventEmitter {
  }

  async _disposeContext(contextId: string | null) {
-    await this._connection.send('Target.disposeBrowserContext', {browserContextId: contextId || undefined});
+    await this._client.send('Target.disposeBrowserContext', {browserContextId: contextId || undefined});
    this._contexts.delete(contextId);
  }

--- a/src/chromium/BrowserContext.ts
+++ b/src/chromium/BrowserContext.ts
@ -18,7 +18,7 @@
 import { EventEmitter } from 'events';
 import { assert } from '../helper';
 import { Browser } from './Browser';
-import { Connection } from './Connection';
+import { CDPSession } from './Connection';
 import { Permissions } from './features/permissions';
 import { Page } from './Page';
 import { Target } from './Target';
@ -29,11 +29,11 @@ export class BrowserContext extends EventEmitter {
  private _browser: Browser;
  private _id: string;

-  constructor(connection: Connection, browser: Browser, contextId: string | null) {
+  constructor(client: CDPSession, browser: Browser, contextId: string | null) {
    super();
    this._browser = browser;
    this._id = contextId;
-    this.permissions = new Permissions(connection, contextId);
+    this.permissions = new Permissions(client, contextId);
  }

  targets(): Target[] {
--- a/src/chromium/Connection.ts
+++ b/src/chromium/Connection.ts
@ -140,6 +140,13 @@ export class Connection extends EventEmitter {
    const {sessionId} = await this.send('Target.attachToTarget', {targetId: targetInfo.targetId, flatten: true});
    return this._sessions.get(sessionId);
  }
+
+  async createBrowserSession(): Promise<CDPSession> {
+    const { sessionId } = await this.send('Target.attachToBrowserTarget');
+    const session = new CDPSession(this, 'browser', sessionId);
+    this._sessions.set(sessionId, session);
+    return session;
+  }
 }

 export const CDPSessionEvents = {
--- a/src/chromium/Page.ts
+++ b/src/chromium/Page.ts
@ -40,7 +40,6 @@ import { getExceptionMessage, releaseObject, valueFromRemoteObject } from './pro
 import { Target } from './Target';
 import { TaskQueue } from './TaskQueue';
 import { Geolocation } from './features/geolocation';
-import { Tracing } from './features/tracing';
 import { Workers } from './features/workers';
 import { Interception } from './features/interception';

@ -57,7 +56,7 @@ export type Viewport = {

 export class Page extends EventEmitter {
  private _closed = false;
-  private _client: CDPSession;
+  _client: CDPSession;
  private _target: Target;
  private _keyboard: Keyboard;
  private _mouse: Mouse;
@ -70,7 +69,6 @@ export class Page extends EventEmitter {
  readonly interception: Interception;
  readonly pdf: PDF;
  readonly workers: Workers;
-  readonly tracing: Tracing;
  private _pageBindings = new Map<string, Function>();
  _javascriptEnabled = true;
  private _viewport: Viewport | null = null;
@ -97,7 +95,6 @@ export class Page extends EventEmitter {
    this.accessibility = new Accessibility(client);
    this._frameManager = new FrameManager(client, this, ignoreHTTPSErrors, this._timeoutSettings);
    this._emulationManager = new EmulationManager(client);
-    this.tracing = new Tracing(client);
    this.coverage = new Coverage(client);
    this.pdf = new PDF(client);
    this.workers = new Workers(client, this._addConsoleMessage.bind(this), this._handleException.bind(this));
--- a/src/chromium/Target.ts
+++ b/src/chromium/Target.ts
@ -15,23 +15,25 @@
 * limitations under the License.
 */

-import { Events } from './events';
 import { Browser } from './Browser';
 import { BrowserContext } from './BrowserContext';
 import { CDPSession } from './Connection';
+import { Events } from './events';
+import { Worker } from './features/workers';
 import { Page, Viewport } from './Page';
-import { TaskQueue } from './TaskQueue';
 import { Protocol } from './protocol';
+import { TaskQueue } from './TaskQueue';

 export class Target {
  private _targetInfo: Protocol.Target.TargetInfo;
  private _browserContext: BrowserContext;
  _targetId: string;
-  private _sessionFactory: () => Promise<CDPSession>;
+  _sessionFactory: () => Promise<CDPSession>;
  private _ignoreHTTPSErrors: boolean;
  private _defaultViewport: Viewport;
  private _screenshotTaskQueue: TaskQueue;
  private _pagePromise: Promise<Page> | null = null;
+  private _workerPromise: Promise<Worker> | null = null;
  _initializedPromise: Promise<boolean>;
  _initializedCallback: (value?: unknown) => void;
  _isClosedPromise: Promise<void>;
@ -71,10 +73,6 @@ export class Target {
      this._initializedCallback(true);
  }

-  createCDPSession(): Promise<CDPSession> {
-    return this._sessionFactory();
-  }
-
  async page(): Promise<Page | null> {
    if ((this._targetInfo.type === 'page' || this._targetInfo.type === 'background_page') && !this._pagePromise) {
      this._pagePromise = this._sessionFactory()
@ -83,6 +81,17 @@ export class Target {
    return this._pagePromise;
  }

+  async _worker(): Promise<Worker | null> {
+    if (this._targetInfo.type !== 'service_worker' && this._targetInfo.type !== 'shared_worker')
+      return null;
+    if (!this._workerPromise) {
+      // TODO(einbinder): Make workers send their console logs.
+      this._workerPromise = this._sessionFactory()
+        .then(client => new Worker(client, this._targetInfo.url, () => { } /* consoleAPICalled */, () => { } /* exceptionThrown */));
+    }
+    return this._workerPromise;
+  }
+
  url(): string {
    return this._targetInfo.url;
  }
--- a/src/chromium/api.ts
+++ b/src/chromium/api.ts
@ -5,6 +5,7 @@ export { TimeoutError } from '../Errors';
 export { Browser } from './Browser';
 export { BrowserContext } from './BrowserContext';
 export { BrowserFetcher } from './BrowserFetcher';
+export { Chromium } from './features/chromium';
 export { CDPSession } from './Connection';
 export { Dialog } from './Dialog';
 export { ExecutionContext } from './ExecutionContext';
@ -14,7 +15,6 @@ export { Geolocation } from './features/geolocation';
 export { Interception } from './features/interception';
 export { PDF } from './features/pdf';
 export { Permissions } from './features/permissions';
-export { Tracing } from './features/tracing';
 export { Worker, Workers } from './features/workers';
 export { Frame } from './Frame';
 export { Keyboard, Mouse } from './Input';
--- a/src/chromium/features/chromium.ts
+++ b/src/chromium/features/chromium.ts
@ -14,21 +14,34 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-import { CDPSession } from '../Connection';
 import { assert } from '../../helper';
+import { CDPSession } from '../Connection';
+import { Page } from '../Page';
 import { readProtocolStream } from '../protocolHelper';
+import { Target } from '../Target';
+import { Worker } from './workers';

-export class Tracing {
+export class Chromium {
  private _client: CDPSession;
  private _recording = false;
  private _path = '';
+  private _tracingClient: CDPSession | undefined;

  constructor(client: CDPSession) {
    this._client = client;
  }

-  async start(options: { path?: string; screenshots?: boolean; categories?: string[]; } = {}) {
+  createCDPSession(target: Target): Promise<CDPSession> {
+    return target._sessionFactory();
+  }
+
+  serviceWorker(target: Target): Promise<Worker | null> {
+    return target._worker();
+  }
+
+  async startTracing(page: Page | undefined, options: { path?: string; screenshots?: boolean; categories?: string[]; } = {}) {
    assert(!this._recording, 'Cannot start recording trace while already recording trace.');
+    this._tracingClient = page ? page._client : this._client;

    const defaultCategories = [
      '-*', 'devtools.timeline', 'v8.execute', 'disabled-by-default-devtools.timeline',
@ -47,19 +60,20 @@ export class Tracing {

    this._path = path;
    this._recording = true;
-    await this._client.send('Tracing.start', {
+    await this._tracingClient.send('Tracing.start', {
      transferMode: 'ReturnAsStream',
      categories: categories.join(',')
    });
  }

-  async stop(): Promise<Buffer> {
+  async stopTracing(): Promise<Buffer> {
+    assert(this._tracingClient, 'Tracing was not started.');
    let fulfill: (buffer: Buffer) => void;
    const contentPromise = new Promise<Buffer>(x => fulfill = x);
-    this._client.once('Tracing.tracingComplete', event => {
-      readProtocolStream(this._client, event.stream, this._path).then(fulfill);
+    this._tracingClient.once('Tracing.tracingComplete', event => {
+      readProtocolStream(this._tracingClient, event.stream, this._path).then(fulfill);
    });
-    await this._client.send('Tracing.end');
+    await this._tracingClient.send('Tracing.end');
    this._recording = false;
    return contentPromise;
  }
--- a/src/chromium/features/permissions.ts
+++ b/src/chromium/features/permissions.ts
@ -16,14 +16,14 @@
 */

 import { Protocol } from '../protocol';
-import { Connection } from './../Connection';
+import { CDPSession } from './../Connection';

 export class Permissions {
-  private _client: Connection;
+  private _client: CDPSession;
  private _browserContextId: string;

-  constructor(connection: Connection, browserContextId: string | null) {
-    this._client = connection;
+  constructor(client: CDPSession, browserContextId: string | null) {
+    this._client = client;
    this._browserContextId = browserContextId;
  }

--- a/src/chromium/features/tracing.spec.js
+++ b/src/chromium/features/tracing.spec.js
@ -22,7 +22,7 @@ module.exports.addTests = function({testRunner, expect, defaultBrowserOptions, p
  const {it, fit, xit} = testRunner;
  const {beforeAll, beforeEach, afterAll, afterEach} = testRunner;

-  describe('Tracing', function() {
+  describe('Chromium.startTracing', function() {
    beforeEach(async function(state) {
      state.outputFile = path.join(ASSETS_DIR, `trace-${state.parallelIndex}.json`);
      state.browser = await playwright.launch(defaultBrowserOptions);
@ -37,56 +37,56 @@ module.exports.addTests = function({testRunner, expect, defaultBrowserOptions, p
        state.outputFile = null;
      }
    });
-    it('should output a trace', async({page, server, outputFile}) => {
-      await page.tracing.start({screenshots: true, path: outputFile});
+    it('should output a trace', async({browser, page, server, outputFile}) => {
+      await browser.chromium.startTracing(page, {screenshots: true, path: outputFile});
      await page.goto(server.PREFIX + '/grid.html');
-      await page.tracing.stop();
+      await browser.chromium.stopTracing();
      expect(fs.existsSync(outputFile)).toBe(true);
    });
-    it('should run with custom categories if provided', async({page, outputFile}) => {
-      await page.tracing.start({path: outputFile, categories: ['disabled-by-default-v8.cpu_profiler.hires']});
-      await page.tracing.stop();
+    it('should run with custom categories if provided', async({browser, page, outputFile}) => {
+      await browser.chromium.startTracing(page, {path: outputFile, categories: ['disabled-by-default-v8.cpu_profiler.hires']});
+      await browser.chromium.stopTracing();

      const traceJson = JSON.parse(fs.readFileSync(outputFile).toString());
      expect(traceJson.metadata['trace-config']).toContain('disabled-by-default-v8.cpu_profiler.hires');
    });
-    it('should throw if tracing on two pages', async({page, server, browser, outputFile}) => {
-      await page.tracing.start({path: outputFile});
+    it('should throw if tracing on two pages', async({browser, page, server, outputFile}) => {
+      await browser.chromium.startTracing(page, {path: outputFile});
      const newPage = await browser.newPage();
      let error = null;
-      await newPage.tracing.start({path: outputFile}).catch(e => error = e);
+      await browser.chromium.startTracing(newPage, {path: outputFile}).catch(e => error = e);
      await newPage.close();
      expect(error).toBeTruthy();
-      await page.tracing.stop();
+      await browser.chromium.stopTracing();
    });
-    it('should return a buffer', async({page, server, outputFile}) => {
-      await page.tracing.start({screenshots: true, path: outputFile});
+    it('should return a buffer', async({browser, page, server, outputFile}) => {
+      await browser.chromium.startTracing(page, {screenshots: true, path: outputFile});
      await page.goto(server.PREFIX + '/grid.html');
-      const trace = await page.tracing.stop();
+      const trace = await browser.chromium.stopTracing();
      const buf = fs.readFileSync(outputFile);
      expect(trace.toString()).toEqual(buf.toString());
    });
-    it('should work without options', async({page, server, outputFile}) => {
-      await page.tracing.start();
+    it('should work without options', async({browser, page, server, outputFile}) => {
+      await browser.chromium.startTracing(page);
      await page.goto(server.PREFIX + '/grid.html');
-      const trace = await page.tracing.stop();
+      const trace = await browser.chromium.stopTracing();
      expect(trace).toBeTruthy();
    });
-    it('should return null in case of Buffer error', async({page, server}) => {
-      await page.tracing.start({screenshots: true});
+    it('should return null in case of Buffer error', async({browser, page, server}) => {
+      await browser.chromium.startTracing(page, {screenshots: true});
      await page.goto(server.PREFIX + '/grid.html');
      const oldBufferConcat = Buffer.concat;
      Buffer.concat = bufs => {
        throw 'error';
      };
-      const trace = await page.tracing.stop();
+      const trace = await browser.chromium.stopTracing();
      expect(trace).toEqual(null);
      Buffer.concat = oldBufferConcat;
    });
-    it('should support a buffer without a path', async({page, server}) => {
-      await page.tracing.start({screenshots: true});
+    it('should support a buffer without a path', async({browser, page, server}) => {
+      await browser.chromium.startTracing(page, {screenshots: true});
      await page.goto(server.PREFIX + '/grid.html');
-      const trace = await page.tracing.stop();
+      const trace = await browser.chromium.stopTracing();
      expect(trace.toString()).toContain('screenshot');
    });
  });
--- a/src/webkit/api.ts
+++ b/src/webkit/api.ts
@ -11,3 +11,5 @@ export { ElementHandle, JSHandle } from './JSHandle';
 export { Request, Response } from './NetworkManager';
 export { ConsoleMessage, Page } from './Page';
 export { Playwright } from './Playwright';
+export { Target } from './Target';
+
--- a/test/CDPSession.spec.js
+++ b/test/CDPSession.spec.js
@ -21,9 +21,9 @@ module.exports.addTests = function({testRunner, expect, FFOX, CHROME, WEBKIT}) {
  const {it, fit, xit} = testRunner;
  const {beforeAll, beforeEach, afterAll, afterEach} = testRunner;

-  describe('Target.createCDPSession', function() {
-    it('should work', async function({page, server}) {
-      const client = await page.target().createCDPSession();
+  describe('Chromium.createCDPSession', function() {
+    it('should work', async function({page, browser, server}) {
+      const client = await browser.chromium.createCDPSession(page.target());

      await Promise.all([
        client.send('Runtime.enable'),
@ -32,16 +32,16 @@ module.exports.addTests = function({testRunner, expect, FFOX, CHROME, WEBKIT}) {
      const foo = await page.evaluate(() => window.foo);
      expect(foo).toBe('bar');
    });
-    it('should send events', async function({page, server}) {
-      const client = await page.target().createCDPSession();
+    it('should send events', async function({page, browser, server}) {
+      const client = await browser.chromium.createCDPSession(page.target());
      await client.send('Network.enable');
      const events = [];
      client.on('Network.requestWillBeSent', event => events.push(event));
      await page.goto(server.EMPTY_PAGE);
      expect(events.length).toBe(1);
    });
-    it('should enable and disable domains independently', async function({page, server}) {
-      const client = await page.target().createCDPSession();
+    it('should enable and disable domains independently', async function({page, browser, server}) {
+      const client = await browser.chromium.createCDPSession(page.target());
      await client.send('Runtime.enable');
      await client.send('Debugger.enable');
      // JS coverage enables and then disables Debugger domain.
@ -55,8 +55,8 @@ module.exports.addTests = function({testRunner, expect, FFOX, CHROME, WEBKIT}) {
      // expect events to be dispatched.
      expect(event.url).toBe('foo.js');
    });
-    it('should be able to detach session', async function({page, server}) {
-      const client = await page.target().createCDPSession();
+    it('should be able to detach session', async function({page, browser, server}) {
+      const client = await browser.chromium.createCDPSession(page.target());
      await client.send('Runtime.enable');
      const evalResponse = await client.send('Runtime.evaluate', {expression: '1 + 2', returnByValue: true});
      expect(evalResponse.result.value).toBe(3);
@ -69,8 +69,8 @@ module.exports.addTests = function({testRunner, expect, FFOX, CHROME, WEBKIT}) {
      }
      expect(error.message).toContain('Session closed.');
    });
-    it('should throw nice errors', async function({page}) {
-      const client = await page.target().createCDPSession();
+    it('should throw nice errors', async function({page, browser}) {
+      const client = await browser.chromium.createCDPSession(page.target());
      const error = await theSourceOfTheProblems().catch(error => error);
      expect(error.stack).toContain('theSourceOfTheProblems');
      expect(error.message).toContain('ThisCommand.DoesNotExist');
--- a/test/ignorehttpserrors.spec.js
+++ b/test/ignorehttpserrors.spec.js
@ -44,7 +44,7 @@ module.exports.addTests = function({testRunner, expect, defaultBrowserOptions, p
    });
    it('should work with request interception', async({page, server, httpsServer}) => {
      await page.interception.enable();
-      page.on('request', request => request.continue());
+      page.on('request', request => page.interception.continue(request));
      const response = await page.goto(httpsServer.EMPTY_PAGE);
      expect(response.status()).toBe(200);
    });
--- a/test/network.spec.js
+++ b/test/network.spec.js
@ -238,9 +238,9 @@ module.exports.addTests = function({testRunner, expect, FFOX, CHROME, WEBKIT}) {
      await page.interception.enable();
      page.on('request', request => {
        if (request.url().endsWith('css'))
-          request.abort();
+          page.interception.abort(request);
        else
-          request.continue();
+          page.interception.continue(request);
      });
      const failedRequests = [];
      page.on('requestfailed', request => failedRequests.push(request));
@ -316,7 +316,7 @@ module.exports.addTests = function({testRunner, expect, FFOX, CHROME, WEBKIT}) {
      const requests = new Map();
      page.on('request', request => {
        requests.set(request.url().split('/').pop(), request);
-        request.continue();
+        page.interception.continue(request);
      });
      await page.interception.enable();
      server.setRedirect('/rrredirect', '/frames/one-frame.html');
--- a/test/oopif.spec.js
+++ b/test/oopif.spec.js
@ -45,7 +45,7 @@ module.exports.addTests = function({testRunner, expect, defaultBrowserOptions, p
    });
    it('should load oopif iframes with subresources and request interception', async function({page, server, context}) {
      await page.interception.enable();
-      page.on('request', request => request.continue());
+      page.on('request', request => page.interception.continue(request));
      await page.goto(server.PREFIX + '/dynamic-oopif.html');
      expect(oopifs(context).length).toBe(1);
    });
--- a/test/target.spec.js
+++ b/test/target.spec.js
@ -85,20 +85,20 @@ module.exports.addTests = function({testRunner, expect, playwright, FFOX, CHROME
      await page.evaluate(() => window.registrationPromise.then(registration => registration.unregister()));
      expect(await destroyedTarget).toBe(await createdTarget);
    });
-    it.skip(FFOX || WEBKIT)('should create a worker from a service worker', async({page, server, context}) => {
+    it.skip(FFOX || WEBKIT)('should create a worker from a service worker', async({browser, page, server, context}) => {
      await page.goto(server.PREFIX + '/serviceworkers/empty/sw.html');

      const target = await context.waitForTarget(target => target.type() === 'service_worker');
-      const worker = await target.worker();
+      const worker = await browser.chromium.serviceWorker(target);
      expect(await worker.evaluate(() => self.toString())).toBe('[object ServiceWorkerGlobalScope]');
    });
-    it.skip(FFOX || WEBKIT)('should create a worker from a shared worker', async({page, server, context}) => {
+    it.skip(FFOX || WEBKIT)('should create a worker from a shared worker', async({browser, page, server, context}) => {
      await page.goto(server.EMPTY_PAGE);
      await page.evaluate(() => {
        new SharedWorker('data:text/javascript,console.log("hi")');
      });
      const target = await context.waitForTarget(target => target.type() === 'shared_worker');
-      const worker = await target.worker();
+      const worker = await browser.chromium.serviceWorker(target);
      expect(await worker.evaluate(() => self.toString())).toBe('[object SharedWorkerGlobalScope]');
    });
    it.skip(WEBKIT)('should report when a target url changes', async({page, server, context}) => {