refactor(firefox): introduce FrameManager (#3964)

Split out frame management from Page into FrameManager.
FrameManager will keep track of page's frames and DOMWorlds.

experimental/puppeteer-firefox/lib/Events.js

@@ -24,6 +24,13 @@ const Events = {
   Connection: {
     Disconnected: Symbol('Events.Connection.Disconnected'),
   },
+
+  FrameManager: {
+    Load: Symbol('Events.FrameManager.Load'),
+    DOMContentLoaded: Symbol('Events.FrameManager.DOMContentLoaded'),
+    FrameAttached: Symbol('Events.FrameManager.FrameAttached'),
+    FrameDetached: Symbol('Events.FrameManager.FrameDetached'),
+  }
 };
 
 module.exports = {Events};

experimental/puppeteer-firefox/lib/FrameManager.js

@@ -0,0 +1,732 @@
+const {helper, assert} = require('./helper');
+const {TimeoutError} = require('./Errors');
+const fs = require('fs');
+const util = require('util');
+const EventEmitter = require('events');
+const {Events} = require('./Events');
+const {ExecutionContext} = require('./ExecutionContext');
+
+const readFileAsync = util.promisify(fs.readFile);
+
+class FrameManager extends EventEmitter {
+  /**
+   * @param {PageSession} session
+   * @param {Page} page
+   */
+  constructor(session, page) {
+    super();
+    this._session = session;
+    this._page = page;
+    this._mainFrame = null;
+    this._frames = new Map();
+    this._eventListeners = [
+      helper.addEventListener(this._session, 'Page.eventFired', this._onEventFired.bind(this)),
+      helper.addEventListener(this._session, 'Page.frameAttached', this._onFrameAttached.bind(this)),
+      helper.addEventListener(this._session, 'Page.frameDetached', this._onFrameDetached.bind(this)),
+    ];
+  }
+
+  frame(frameId) {
+    return this._frames.get(frameId);
+  }
+
+  mainFrame() {
+    return this._mainFrame;
+  }
+
+  frames() {
+    /** @type {!Array<!Frame>} */
+    let frames = [];
+    collect(this._mainFrame);
+    return frames;
+
+    function collect(frame) {
+      frames.push(frame);
+      for (const subframe of frame._children)
+        collect(subframe);
+    }
+  }
+
+  _onFrameAttached(params) {
+    const frame = new Frame(this._session, this, this._page, params.frameId);
+    const parentFrame = this._frames.get(params.parentFrameId) || null;
+    if (parentFrame) {
+      frame._parentFrame = parentFrame;
+      parentFrame._children.add(frame);
+    } else {
+      assert(!this._mainFrame, 'INTERNAL ERROR: re-attaching main frame!');
+      this._mainFrame = frame;
+    }
+    this._frames.set(params.frameId, frame);
+    this.emit(Events.FrameManager.FrameAttached, frame);
+  }
+
+  _onFrameDetached(params) {
+    const frame = this._frames.get(params.frameId);
+    this._frames.delete(params.frameId);
+    frame._detach();
+    this.emit(Events.FrameManager.FrameDetached, frame);
+  }
+
+  _onEventFired({frameId, name}) {
+    const frame = this._frames.get(frameId);
+    frame._firedEvents.add(name.toLowerCase());
+    if (frame === this._mainFrame) {
+      if (name === 'load')
+        this.emit(Events.FrameManager.Load);
+      else if (name === 'DOMContentLoaded')
+        this.emit(Events.FrameManager.DOMContentLoaded);
+    }
+  }
+
+  dispose() {
+    helper.removeEventListeners(this._eventListeners);
+  }
+}
+
+class Frame {
+  /**
+   * @param {*} session
+   * @param {!Page} page
+   * @param {string} frameId
+   */
+  constructor(session, frameManager, page, frameId) {
+    this._session = session;
+    this._frameManager = frameManager;
+    this._page = page;
+    this._frameId = frameId;
+    /** @type {?Frame} */
+    this._parentFrame = null;
+    this._url = '';
+    this._name = '';
+    /** @type {!Set<!Frame>} */
+    this._children = new Set();
+    this._isDetached = false;
+
+    this._firedEvents = new Set();
+
+    /** @type {!Set<!WaitTask>} */
+    this._waitTasks = new Set();
+    this._documentPromise = null;
+
+    this._executionContext = new ExecutionContext(this._session, this, this._frameId);
+  }
+
+  async executionContext() {
+    return this._executionContext;
+  }
+
+  /**
+   * @param {string} selector
+   * @param {!{delay?: number, button?: string, clickCount?: number}=} options
+   */
+  async click(selector, options = {}) {
+    const handle = await this.$(selector);
+    assert(handle, 'No node found for selector: ' + selector);
+    await handle.click(options);
+    await handle.dispose();
+  }
+
+  /**
+   * @param {string} selector
+   * @param {string} text
+   * @param {{delay: (number|undefined)}=} options
+   */
+  async type(selector, text, options) {
+    const handle = await this.$(selector);
+    assert(handle, 'No node found for selector: ' + selector);
+    await handle.type(text, options);
+    await handle.dispose();
+  }
+
+  /**
+   * @param {string} selector
+   */
+  async focus(selector) {
+    const handle = await this.$(selector);
+    assert(handle, 'No node found for selector: ' + selector);
+    await handle.focus();
+    await handle.dispose();
+  }
+
+  /**
+   * @param {string} selector
+   */
+  async hover(selector) {
+    const handle = await this.$(selector);
+    assert(handle, 'No node found for selector: ' + selector);
+    await handle.hover();
+    await handle.dispose();
+  }
+
+  _detach() {
+    this._parentFrame._children.delete(this);
+    this._parentFrame = null;
+    this._isDetached = true;
+    for (const waitTask of this._waitTasks)
+      waitTask.terminate(new Error('waitForFunction failed: frame got detached.'));
+  }
+
+  _navigated(url, name, navigationId) {
+    this._url = url;
+    this._name = name;
+    this._lastCommittedNavigationId = navigationId;
+    this._documentPromise = null;
+    this._firedEvents.clear();
+  }
+
+  /**
+  * @param {string} selector
+  * @param {!Array<string>} values
+  * @return {!Promise<!Array<string>>}
+  */
+  select(selector, ...values) {
+    for (const value of values)
+      assert(helper.isString(value), 'Values must be strings. Found value "' + value + '" of type "' + (typeof value) + '"');
+    return this.$eval(selector, (element, values) => {
+      if (element.nodeName.toLowerCase() !== 'select')
+        throw new Error('Element is not a <select> element.');
+
+      const options = Array.from(element.options);
+      element.value = undefined;
+      for (const option of options) {
+        option.selected = values.includes(option.value);
+        if (option.selected && !element.multiple)
+          break;
+      }
+      element.dispatchEvent(new Event('input', { 'bubbles': true }));
+      element.dispatchEvent(new Event('change', { 'bubbles': true }));
+      return options.filter(option => option.selected).map(option => option.value);
+    }, values);
+  }
+
+  /**
+   * @param {(string|number|Function)} selectorOrFunctionOrTimeout
+   * @param {!{polling?: string|number, timeout?: number, visible?: boolean, hidden?: boolean}=} options
+   * @param {!Array<*>} args
+   * @return {!Promise<!JSHandle>}
+   */
+  waitFor(selectorOrFunctionOrTimeout, options, ...args) {
+    const xPathPattern = '//';
+
+    if (helper.isString(selectorOrFunctionOrTimeout)) {
+      const string = /** @type {string} */ (selectorOrFunctionOrTimeout);
+      if (string.startsWith(xPathPattern))
+        return this.waitForXPath(string, options);
+      return this.waitForSelector(string, options);
+    }
+    if (helper.isNumber(selectorOrFunctionOrTimeout))
+      return new Promise(fulfill => setTimeout(fulfill, /** @type {number} */ (selectorOrFunctionOrTimeout)));
+    if (typeof selectorOrFunctionOrTimeout === 'function')
+      return this.waitForFunction(selectorOrFunctionOrTimeout, options, ...args);
+    return Promise.reject(new Error('Unsupported target type: ' + (typeof selectorOrFunctionOrTimeout)));
+  }
+
+  /**
+   * @param {Function|string} pageFunction
+   * @param {!{polling?: string|number, timeout?: number}=} options
+   * @return {!Promise<!JSHandle>}
+   */
+  waitForFunction(pageFunction, options = {}, ...args) {
+    const {
+      polling = 'raf',
+      timeout = 30000
+    } = options;
+    return new WaitTask(this, pageFunction, 'function', polling, timeout, ...args).promise;
+  }
+
+  /**
+   * @param {string} selector
+   * @param {!{timeout?: number, visible?: boolean, hidden?: boolean}=} options
+   * @return {!Promise<!ElementHandle>}
+   */
+  waitForSelector(selector, options) {
+    return this._waitForSelectorOrXPath(selector, false, options);
+  }
+
+  /**
+   * @param {string} xpath
+   * @param {!{timeout?: number, visible?: boolean, hidden?: boolean}=} options
+   * @return {!Promise<!ElementHandle>}
+   */
+  waitForXPath(xpath, options) {
+    return this._waitForSelectorOrXPath(xpath, true, options);
+  }
+
+  /**
+   * @param {string} selectorOrXPath
+   * @param {boolean} isXPath
+   * @param {!{timeout?: number, visible?: boolean, hidden?: boolean}=} options
+   * @return {!Promise<!ElementHandle>}
+   */
+  _waitForSelectorOrXPath(selectorOrXPath, isXPath, options = {}) {
+    const {
+      visible: waitForVisible = false,
+      hidden: waitForHidden = false,
+      timeout = 30000
+    } = options;
+    const polling = waitForVisible || waitForHidden ? 'raf' : 'mutation';
+    const title = `${isXPath ? 'XPath' : 'selector'} "${selectorOrXPath}"${waitForHidden ? ' to be hidden' : ''}`;
+    return new WaitTask(this, predicate, title, polling, timeout, selectorOrXPath, isXPath, waitForVisible, waitForHidden).promise;
+
+    /**
+     * @param {string} selectorOrXPath
+     * @param {boolean} isXPath
+     * @param {boolean} waitForVisible
+     * @param {boolean} waitForHidden
+     * @return {?Node|boolean}
+     */
+    function predicate(selectorOrXPath, isXPath, waitForVisible, waitForHidden) {
+      const node = isXPath
+        ? document.evaluate(selectorOrXPath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue
+        : document.querySelector(selectorOrXPath);
+      if (!node)
+        return waitForHidden;
+      if (!waitForVisible && !waitForHidden)
+        return node;
+      const element = /** @type {Element} */ (node.nodeType === Node.TEXT_NODE ? node.parentElement : node);
+
+      const style = window.getComputedStyle(element);
+      const isVisible = style && style.visibility !== 'hidden' && hasVisibleBoundingBox();
+      const success = (waitForVisible === isVisible || waitForHidden === !isVisible);
+      return success ? node : null;
+
+      /**
+       * @return {boolean}
+       */
+      function hasVisibleBoundingBox() {
+        const rect = element.getBoundingClientRect();
+        return !!(rect.top || rect.bottom || rect.width || rect.height);
+      }
+    }
+  }
+
+  /**
+   * @return {!Promise<String>}
+   */
+  async content() {
+    return await this.evaluate(() => {
+      let retVal = '';
+      if (document.doctype)
+        retVal = new XMLSerializer().serializeToString(document.doctype);
+      if (document.documentElement)
+        retVal += document.documentElement.outerHTML;
+      return retVal;
+    });
+  }
+
+  /**
+   * @param {string} html
+   */
+  async setContent(html) {
+    await this.evaluate(html => {
+      document.open();
+      document.write(html);
+      document.close();
+    }, html);
+  }
+
+  async evaluate(pageFunction, ...args) {
+    return this._executionContext.evaluate(pageFunction, ...args);
+  }
+
+  _document() {
+    if (!this._documentPromise)
+      this._documentPromise = this.evaluateHandle('document').then(handle => handle.asElement());
+    return this._documentPromise;
+  }
+
+  /**
+   * @param {string} selector
+   * @return {!Promise<?ElementHandle>}
+   */
+  async $(selector) {
+    const document = await this._document();
+    return document.$(selector);
+  }
+
+  /**
+   * @param {string} selector
+   * @return {!Promise<!Array<!ElementHandle>>}
+   */
+  async $$(selector) {
+    const document = await this._document();
+    return document.$$(selector);
+  }
+
+  /**
+   * @param {string} selector
+   * @param {Function|String} pageFunction
+   * @param {!Array<*>} args
+   * @return {!Promise<(!Object|undefined)>}
+   */
+  async $eval(selector, pageFunction, ...args) {
+    const document = await this._document();
+    return document.$eval(selector, pageFunction, ...args);
+  }
+
+  /**
+   * @param {string} selector
+   * @param {Function|String} pageFunction
+   * @param {!Array<*>} args
+   * @return {!Promise<(!Object|undefined)>}
+   */
+  async $$eval(selector, pageFunction, ...args) {
+    const document = await this._document();
+    return document.$$eval(selector, pageFunction, ...args);
+  }
+
+  /**
+   * @param {string} expression
+   * @return {!Promise<!Array<!ElementHandle>>}
+   */
+  async $x(expression) {
+    const document = await this._document();
+    return document.$x(expression);
+  }
+
+  async evaluateHandle(pageFunction, ...args) {
+    return this._executionContext.evaluateHandle(pageFunction, ...args);
+  }
+
+  /**
+   * @param {!{content?: string, path?: string, type?: string, url?: string}} options
+   * @return {!Promise<!ElementHandle>}
+   */
+  async addScriptTag(options) {
+    if (typeof options.url === 'string') {
+      const url = options.url;
+      try {
+        return (await this.evaluateHandle(addScriptUrl, url, options.type)).asElement();
+      } catch (error) {
+        throw new Error(`Loading script from ${url} failed`);
+      }
+    }
+
+    if (typeof options.path === 'string') {
+      let contents = await readFileAsync(options.path, 'utf8');
+      contents += '//# sourceURL=' + options.path.replace(/\n/g, '');
+      return (await this.evaluateHandle(addScriptContent, contents, options.type)).asElement();
+    }
+
+    if (typeof options.content === 'string') {
+      return (await this.evaluateHandle(addScriptContent, options.content, options.type)).asElement();
+    }
+
+    throw new Error('Provide an object with a `url`, `path` or `content` property');
+
+    /**
+     * @param {string} url
+     * @param {string} type
+     * @return {!Promise<!HTMLElement>}
+     */
+    async function addScriptUrl(url, type) {
+      const script = document.createElement('script');
+      script.src = url;
+      if (type)
+        script.type = type;
+      const promise = new Promise((res, rej) => {
+        script.onload = res;
+        script.onerror = rej;
+      });
+      document.head.appendChild(script);
+      await promise;
+      return script;
+    }
+
+    /**
+     * @param {string} content
+     * @param {string} type
+     * @return {!HTMLElement}
+     */
+    function addScriptContent(content, type = 'text/javascript') {
+      const script = document.createElement('script');
+      script.type = type;
+      script.text = content;
+      let error = null;
+      script.onerror = e => error = e;
+      document.head.appendChild(script);
+      if (error)
+        throw error;
+      return script;
+    }
+  }
+
+  /**
+   * @param {!{content?: string, path?: string, url?: string}} options
+   * @return {!Promise<!ElementHandle>}
+   */
+  async addStyleTag(options) {
+    if (typeof options.url === 'string') {
+      const url = options.url;
+      try {
+        return (await this.evaluateHandle(addStyleUrl, url)).asElement();
+      } catch (error) {
+        throw new Error(`Loading style from ${url} failed`);
+      }
+    }
+
+    if (typeof options.path === 'string') {
+      let contents = await readFileAsync(options.path, 'utf8');
+      contents += '/*# sourceURL=' + options.path.replace(/\n/g, '') + '*/';
+      return (await this.evaluateHandle(addStyleContent, contents)).asElement();
+    }
+
+    if (typeof options.content === 'string') {
+      return (await this.evaluateHandle(addStyleContent, options.content)).asElement();
+    }
+
+    throw new Error('Provide an object with a `url`, `path` or `content` property');
+
+    /**
+     * @param {string} url
+     * @return {!Promise<!HTMLElement>}
+     */
+    async function addStyleUrl(url) {
+      const link = document.createElement('link');
+      link.rel = 'stylesheet';
+      link.href = url;
+      const promise = new Promise((res, rej) => {
+        link.onload = res;
+        link.onerror = rej;
+      });
+      document.head.appendChild(link);
+      await promise;
+      return link;
+    }
+
+    /**
+     * @param {string} content
+     * @return {!Promise<!HTMLElement>}
+     */
+    async function addStyleContent(content) {
+      const style = document.createElement('style');
+      style.type = 'text/css';
+      style.appendChild(document.createTextNode(content));
+      const promise = new Promise((res, rej) => {
+        style.onload = res;
+        style.onerror = rej;
+      });
+      document.head.appendChild(style);
+      await promise;
+      return style;
+    }
+  }
+
+  /**
+   * @return {!Promise<string>}
+   */
+  async title() {
+    return this.evaluate(() => document.title);
+  }
+
+  name() {
+    return this._name;
+  }
+
+  isDetached() {
+    return this._isDetached;
+  }
+
+  childFrames() {
+    return Array.from(this._children);
+  }
+
+  url() {
+    return this._url;
+  }
+
+  parentFrame() {
+    return this._parentFrame;
+  }
+}
+
+/**
+ * @internal
+ */
+class WaitTask {
+  /**
+   * @param {!Frame} frame
+   * @param {Function|string} predicateBody
+   * @param {string|number} polling
+   * @param {number} timeout
+   * @param {!Array<*>} args
+   */
+  constructor(frame, predicateBody, title, polling, timeout, ...args) {
+    if (helper.isString(polling))
+      assert(polling === 'raf' || polling === 'mutation', 'Unknown polling option: ' + polling);
+    else if (helper.isNumber(polling))
+      assert(polling > 0, 'Cannot poll with non-positive interval: ' + polling);
+    else
+      throw new Error('Unknown polling options: ' + polling);
+
+    this._frame = frame;
+    this._polling = polling;
+    this._timeout = timeout;
+    this._predicateBody = helper.isString(predicateBody) ? 'return ' + predicateBody : 'return (' + predicateBody + ')(...args)';
+    this._args = args;
+    this._runCount = 0;
+    frame._waitTasks.add(this);
+    this.promise = new Promise((resolve, reject) => {
+      this._resolve = resolve;
+      this._reject = reject;
+    });
+    // Since page navigation requires us to re-install the pageScript, we should track
+    // timeout on our end.
+    if (timeout) {
+      const timeoutError = new TimeoutError(`waiting for ${title} failed: timeout ${timeout}ms exceeded`);
+      this._timeoutTimer = setTimeout(() => this.terminate(timeoutError), timeout);
+    }
+    this.rerun();
+  }
+
+  /**
+   * @param {!Error} error
+   */
+  terminate(error) {
+    this._terminated = true;
+    this._reject(error);
+    this._cleanup();
+  }
+
+  async rerun() {
+    const runCount = ++this._runCount;
+    /** @type {?JSHandle} */
+    let success = null;
+    let error = null;
+    try {
+      success = await this._frame.evaluateHandle(waitForPredicatePageFunction, this._predicateBody, this._polling, this._timeout, ...this._args);
+    } catch (e) {
+      error = e;
+    }
+
+    if (this._terminated || runCount !== this._runCount) {
+      if (success)
+        await success.dispose();
+      return;
+    }
+
+    // Ignore timeouts in pageScript - we track timeouts ourselves.
+    // If the frame's execution context has already changed, `frame.evaluate` will
+    // throw an error - ignore this predicate run altogether.
+    if (!error && await this._frame.evaluate(s => !s, success).catch(e => true)) {
+      await success.dispose();
+      return;
+    }
+
+    // When the page is navigated, the promise is rejected.
+    // Try again right away.
+    if (error && error.message.includes('Execution context was destroyed')) {
+      this.rerun();
+      return;
+    }
+
+    if (error)
+      this._reject(error);
+    else
+      this._resolve(success);
+
+    this._cleanup();
+  }
+
+  _cleanup() {
+    clearTimeout(this._timeoutTimer);
+    this._frame._waitTasks.delete(this);
+    this._runningTask = null;
+  }
+}
+
+/**
+ * @param {string} predicateBody
+ * @param {string} polling
+ * @param {number} timeout
+ * @return {!Promise<*>}
+ */
+async function waitForPredicatePageFunction(predicateBody, polling, timeout, ...args) {
+  const predicate = new Function('...args', predicateBody);
+  let timedOut = false;
+  if (timeout)
+    setTimeout(() => timedOut = true, timeout);
+  if (polling === 'raf')
+    return await pollRaf();
+  if (polling === 'mutation')
+    return await pollMutation();
+  if (typeof polling === 'number')
+    return await pollInterval(polling);
+
+  /**
+   * @return {!Promise<*>}
+   */
+  function pollMutation() {
+    const success = predicate.apply(null, args);
+    if (success)
+      return Promise.resolve(success);
+
+    let fulfill;
+    const result = new Promise(x => fulfill = x);
+    const observer = new MutationObserver(mutations => {
+      if (timedOut) {
+        observer.disconnect();
+        fulfill();
+      }
+      const success = predicate.apply(null, args);
+      if (success) {
+        observer.disconnect();
+        fulfill(success);
+      }
+    });
+    observer.observe(document, {
+      childList: true,
+      subtree: true,
+      attributes: true
+    });
+    return result;
+  }
+
+  /**
+   * @return {!Promise<*>}
+   */
+  function pollRaf() {
+    let fulfill;
+    const result = new Promise(x => fulfill = x);
+    onRaf();
+    return result;
+
+    function onRaf() {
+      if (timedOut) {
+        fulfill();
+        return;
+      }
+      const success = predicate.apply(null, args);
+      if (success)
+        fulfill(success);
+      else
+        requestAnimationFrame(onRaf);
+    }
+  }
+
+  /**
+   * @param {number} pollInterval
+   * @return {!Promise<*>}
+   */
+  function pollInterval(pollInterval) {
+    let fulfill;
+    const result = new Promise(x => fulfill = x);
+    onTimeout();
+    return result;
+
+    function onTimeout() {
+      if (timedOut) {
+        fulfill();
+        return;
+      }
+      const success = predicate.apply(null, args);
+      if (success)
+        fulfill(success);
+      else
+        setTimeout(onTimeout, pollInterval);
+    }
+  }
+}
+
+module.exports = {FrameManager, Frame};

experimental/puppeteer-firefox/lib/JSHandle.js

@@ -131,7 +131,7 @@ class ElementHandle extends JSHandle {
     });
     if (!frameId)
       return null;
-    const frame = this._frame._page._frames.get(frameId);
+    const frame = this._frame._frameManager.frame(frameId);
     return frame;
   }
 

experimental/puppeteer-firefox/lib/Page.js

@@ -1,4 +1,4 @@
-const {helper, assert, debugError} = require('./helper');
+const {helper} = require('./helper');
 const {Keyboard, Mouse} = require('./Input');
 const {constants} = require('./common');
 const {Dialog} = require('./Dialog');
@@ -7,12 +7,11 @@ const fs = require('fs');
 const mime = require('mime');
 const util = require('util');
 const EventEmitter = require('events');
-const {JSHandle, createHandle} = require('./JSHandle');
+const {createHandle} = require('./JSHandle');
 const {Events} = require('./Events');
-const {ExecutionContext} = require('./ExecutionContext');
+const {FrameManager} = require('./FrameManager');
 
 const writeFileAsync = util.promisify(fs.writeFile);
-const readFileAsync = util.promisify(fs.readFile);
 
 /**
  * @internal
@@ -73,18 +72,18 @@ class Page extends EventEmitter {
     this._keyboard = new Keyboard(session);
     this._mouse = new Mouse(session, this._keyboard);
     this._isClosed = false;
-    this._mainFrame = null;
+    this._frameManager = new FrameManager(session, this);
-    this._frames = new Map();
     this._eventListeners = [
-      helper.addEventListener(this._session, 'Page.eventFired', this._onEventFired.bind(this)),
       helper.addEventListener(this._session, 'Page.uncaughtError', this._onUncaughtError.bind(this)),
       helper.addEventListener(this._session, 'Page.consoleAPICalled', this._onConsole.bind(this)),
       helper.addEventListener(this._session, 'Page.dialogOpened', this._onDialogOpened.bind(this)),
       helper.addEventListener(this._session, 'Browser.tabClosed', this._onClosed.bind(this)),
-      helper.addEventListener(this._session, 'Page.frameAttached', this._onFrameAttached.bind(this)),
-      helper.addEventListener(this._session, 'Page.frameDetached', this._onFrameDetached.bind(this)),
       helper.addEventListener(this._session, 'Page.navigationCommitted', this._onNavigationCommitted.bind(this)),
       helper.addEventListener(this._session, 'Page.sameDocumentNavigation', this._onSameDocumentNavigation.bind(this)),
+      helper.addEventListener(this._frameManager, Events.FrameManager.Load, () => this.emit(Events.Page.Load)),
+      helper.addEventListener(this._frameManager, Events.FrameManager.DOMContentLoaded, () => this.emit(Events.Page.DOMContentLoaded)),
+      helper.addEventListener(this._frameManager, Events.FrameManager.FrameAttached, frame => this.emit(Events.Page.FrameAttached, frame)),
+      helper.addEventListener(this._frameManager, Events.FrameManager.FrameDetached, frame => this.emit(Events.Page.FrameDetached, frame)),
     ];
     this._viewport = null;
   }
@@ -139,53 +138,23 @@ class Page extends EventEmitter {
   }
 
   url() {
-    return this._mainFrame.url();
+    return this._frameManager.mainFrame().url();
   }
 
   frames() {
-    /** @type {!Array<!Frame>} */
+    return this._frameManager.frames();
-    let frames = [];
-    collect(this._mainFrame);
-    return frames;
-
-    function collect(frame) {
-      frames.push(frame);
-      for (const subframe of frame._children)
-        collect(subframe);
-    }
   }
 
   _onDialogOpened(params) {
     this.emit(Events.Page.Dialog, new Dialog(this._session, params));
   }
 
-  _onFrameAttached(params) {
-    const frame = new Frame(this._session, this, params.frameId);
-    const parentFrame = this._frames.get(params.parentFrameId) || null;
-    if (parentFrame) {
-      frame._parentFrame = parentFrame;
-      parentFrame._children.add(frame);
-    } else {
-      assert(!this._mainFrame, 'INTERNAL ERROR: re-attaching main frame!');
-      this._mainFrame = frame;
-    }
-    this._frames.set(params.frameId, frame);
-    this.emit(Events.Page.FrameAttached, frame);
-  }
-
   mainFrame() {
-    return this._mainFrame;
+    return this._frameManager.mainFrame();
-  }
-
-  _onFrameDetached(params) {
-    const frame = this._frames.get(params.frameId);
-    this._frames.delete(params.frameId);
-    frame._detach();
-    this.emit(Events.Page.FrameDetached, frame);
   }
 
   _onNavigationCommitted(params) {
-    const frame = this._frames.get(params.frameId);
+    const frame = this._frameManager.frame(params.frameId);
     frame._navigated(params.url, params.name, params.navigationId);
     frame._DOMContentLoadedFired = false;
     frame._loadFired = false;
@@ -193,7 +162,7 @@ class Page extends EventEmitter {
   }
 
   _onSameDocumentNavigation(params) {
-    const frame = this._frames.get(params.frameId);
+    const frame = this._frameManager.frame(params.frameId);
     frame._url = params.url;
     this.emit(Events.Page.FrameNavigated, frame);
   }
@@ -224,7 +193,7 @@ class Page extends EventEmitter {
       timeout = constants.DEFAULT_NAVIGATION_TIMEOUT,
       waitUntil = ['load'],
     } = options;
-    const frame = this._mainFrame;
+    const frame = this._frameManager.mainFrame();
     const normalizedWaitUntil = this._normalizeWaitUntil(waitUntil);
 
     const timeoutError = new TimeoutError('Navigation Timeout Exceeded: ' + timeout + 'ms');
@@ -273,7 +242,7 @@ class Page extends EventEmitter {
       timeout = constants.DEFAULT_NAVIGATION_TIMEOUT,
       waitUntil = ['load'],
     } = options;
-    const frame = this._mainFrame;
+    const frame = this._frameManager.mainFrame();
     const normalizedWaitUntil = this._normalizeWaitUntil(waitUntil);
     const {navigationId} = await this._session.send('Page.navigate', {
       frameId: frame._frameId,
@@ -306,7 +275,7 @@ class Page extends EventEmitter {
       timeout = constants.DEFAULT_NAVIGATION_TIMEOUT,
       waitUntil = ['load'],
     } = options;
-    const frame = this._mainFrame;
+    const frame = this._frameManager.mainFrame();
     const normalizedWaitUntil = this._normalizeWaitUntil(waitUntil);
     const {navigationId, navigationURL} = await this._session.send('Page.goBack', {
       frameId: frame._frameId,
@@ -338,7 +307,7 @@ class Page extends EventEmitter {
       timeout = constants.DEFAULT_NAVIGATION_TIMEOUT,
       waitUntil = ['load'],
     } = options;
-    const frame = this._mainFrame;
+    const frame = this._frameManager.mainFrame();
     const normalizedWaitUntil = this._normalizeWaitUntil(waitUntil);
     const {navigationId, navigationURL} = await this._session.send('Page.goForward', {
       frameId: frame._frameId,
@@ -370,7 +339,7 @@ class Page extends EventEmitter {
       timeout = constants.DEFAULT_NAVIGATION_TIMEOUT,
       waitUntil = ['load'],
     } = options;
-    const frame = this._mainFrame;
+    const frame = this._frameManager.mainFrame();
     const normalizedWaitUntil = this._normalizeWaitUntil(waitUntil);
     const {navigationId, navigationURL} = await this._session.send('Page.reload', {
       frameId: frame._frameId,
@@ -411,7 +380,7 @@ class Page extends EventEmitter {
   }
 
   async evaluate(pageFunction, ...args) {
-    return await this._mainFrame.evaluate(pageFunction, ...args);
+    return await this._frameManager.mainFrame().evaluate(pageFunction, ...args);
   }
 
   /**
@@ -419,7 +388,7 @@ class Page extends EventEmitter {
    * @return {!Promise<!ElementHandle>}
    */
   async addScriptTag(options) {
-    return await this._mainFrame.addScriptTag(options);
+    return await this._frameManager.mainFrame().addScriptTag(options);
   }
 
   /**
@@ -427,7 +396,7 @@ class Page extends EventEmitter {
    * @return {!Promise<!ElementHandle>}
    */
   async addStyleTag(options) {
-    return await this._mainFrame.addStyleTag(options);
+    return await this._frameManager.mainFrame().addStyleTag(options);
   }
 
   /**
@@ -435,7 +404,7 @@ class Page extends EventEmitter {
    * @param {!{delay?: number, button?: string, clickCount?: number}=} options
    */
   async click(selector, options = {}) {
-    return await this._mainFrame.click(selector, options);
+    return await this._frameManager.mainFrame().click(selector, options);
   }
 
   /**
@@ -444,21 +413,21 @@ class Page extends EventEmitter {
    * @param {{delay: (number|undefined)}=} options
    */
   async type(selector, text, options) {
-    return await this._mainFrame.type(selector, text, options);
+    return await this._frameManager.mainFrame().type(selector, text, options);
   }
 
   /**
    * @param {string} selector
    */
   async focus(selector) {
-    return await this._mainFrame.focus(selector);
+    return await this._frameManager.mainFrame().focus(selector);
   }
 
   /**
    * @param {string} selector
    */
   async hover(selector) {
-    return await this._mainFrame.hover(selector);
+    return await this._frameManager.mainFrame().hover(selector);
   }
 
   /**
@@ -468,7 +437,7 @@ class Page extends EventEmitter {
    * @return {!Promise<!JSHandle>}
    */
   async waitFor(selectorOrFunctionOrTimeout, options = {}, ...args) {
-    return await this._mainFrame.waitFor(selectorOrFunctionOrTimeout, options, ...args);
+    return await this._frameManager.mainFrame().waitFor(selectorOrFunctionOrTimeout, options, ...args);
   }
 
   /**
@@ -477,7 +446,7 @@ class Page extends EventEmitter {
    * @return {!Promise<!JSHandle>}
    */
   async waitForFunction(pageFunction, options = {}, ...args) {
-    return await this._mainFrame.waitForFunction(pageFunction, options, ...args);
+    return await this._frameManager.mainFrame().waitForFunction(pageFunction, options, ...args);
   }
 
   /**
@@ -486,7 +455,7 @@ class Page extends EventEmitter {
    * @return {!Promise<!ElementHandle>}
    */
   async waitForSelector(selector, options = {}) {
-    return await this._mainFrame.waitForSelector(selector, options);
+    return await this._frameManager.mainFrame().waitForSelector(selector, options);
   }
 
   /**
@@ -495,14 +464,14 @@ class Page extends EventEmitter {
    * @return {!Promise<!ElementHandle>}
    */
   async waitForXPath(xpath, options = {}) {
-    return await this._mainFrame.waitForXPath(xpath, options);
+    return await this._frameManager.mainFrame().waitForXPath(xpath, options);
   }
 
   /**
    * @return {!Promise<string>}
    */
   async title() {
-    return await this._mainFrame.title();
+    return await this._frameManager.mainFrame().title();
   }
 
   /**
@@ -510,7 +479,7 @@ class Page extends EventEmitter {
    * @return {!Promise<?ElementHandle>}
    */
   async $(selector) {
-    return await this._mainFrame.$(selector);
+    return await this._frameManager.mainFrame().$(selector);
   }
 
   /**
@@ -518,7 +487,7 @@ class Page extends EventEmitter {
    * @return {!Promise<!Array<!ElementHandle>>}
    */
   async $$(selector) {
-    return await this._mainFrame.$$(selector);
+    return await this._frameManager.mainFrame().$$(selector);
   }
 
   /**
@@ -528,7 +497,7 @@ class Page extends EventEmitter {
    * @return {!Promise<(!Object|undefined)>}
    */
   async $eval(selector, pageFunction, ...args) {
-    return await this._mainFrame.$eval(selector, pageFunction, ...args);
+    return await this._frameManager.mainFrame().$eval(selector, pageFunction, ...args);
   }
 
   /**
@@ -538,7 +507,7 @@ class Page extends EventEmitter {
    * @return {!Promise<(!Object|undefined)>}
    */
   async $$eval(selector, pageFunction, ...args) {
-    return await this._mainFrame.$$eval(selector, pageFunction, ...args);
+    return await this._frameManager.mainFrame().$$eval(selector, pageFunction, ...args);
   }
 
   /**
@@ -546,11 +515,11 @@ class Page extends EventEmitter {
    * @return {!Promise<!Array<!ElementHandle>>}
    */
   async $x(expression) {
-    return await this._mainFrame.$x(expression);
+    return await this._frameManager.mainFrame().$x(expression);
   }
 
   async evaluateHandle(pageFunction, ...args) {
-    return await this._mainFrame.evaluateHandle(pageFunction, ...args);
+    return await this._frameManager.mainFrame().evaluateHandle(pageFunction, ...args);
   }
 
   /**
@@ -559,7 +528,7 @@ class Page extends EventEmitter {
   * @return {!Promise<!Array<string>>}
   */
   async select(selector, ...values) {
-    return await this._mainFrame.select(selector, ...values);
+    return await this._frameManager.mainFrame().select(selector, ...values);
   }
 
   async close() {
@@ -567,40 +536,25 @@ class Page extends EventEmitter {
   }
 
   async content() {
-    return await this._mainFrame.content();
+    return await this._frameManager.mainFrame().content();
   }
 
   /**
    * @param {string} html
    */
   async setContent(html) {
-    return await this._mainFrame.setContent(html);
+    return await this._frameManager.mainFrame().setContent(html);
   }
 
   _onClosed() {
     this._isClosed = true;
+    this._frameManager.dispose();
     helper.removeEventListeners(this._eventListeners);
     this.emit(Events.Page.Close);
   }
 
-  _onEventFired({frameId, name}) {
-    const frame = this._frames.get(frameId);
-    frame._firedEvents.add(name.toLowerCase());
-    if (frame === this._mainFrame) {
-      if (name === 'load')
-        this.emit(Events.Page.Load);
-      else if (name === 'DOMContentLoaded')
-        this.emit(Events.Page.DOMContentLoaded);
-    }
-  }
-
-  _onLoadFired({frameId}) {
-    const frame = this._frames.get(frameId);
-    frame._firedEvents.add('load');
-  }
-
   _onConsole({type, args, frameId}) {
-    const frame = this._frames.get(frameId);
+    const frame = this._frameManager.frame(frameId);
     this.emit(Events.Page.Console, new ConsoleMessage(type, args.map(arg => createHandle(frame._executionContext, arg))));
   }
 
@@ -667,650 +621,6 @@ function getScreenshotMimeType(options) {
   return 'image/png';
 }
 
-class Frame {
-  /**
-   * @param {*} session
-   * @param {!Page} page
-   * @param {string} frameId
-   */
-  constructor(session, page, frameId) {
-    this._session = session;
-    this._page = page;
-    this._frameId = frameId;
-    /** @type {?Frame} */
-    this._parentFrame = null;
-    this._url = '';
-    this._name = '';
-    /** @type {!Set<!Frame>} */
-    this._children = new Set();
-    this._isDetached = false;
-
-    this._firedEvents = new Set();
-
-    /** @type {!Set<!WaitTask>} */
-    this._waitTasks = new Set();
-    this._documentPromise = null;
-
-    this._executionContext = new ExecutionContext(this._session, this, this._frameId);
-  }
-
-  async executionContext() {
-    return this._executionContext;
-  }
-
-  /**
-   * @param {string} selector
-   * @param {!{delay?: number, button?: string, clickCount?: number}=} options
-   */
-  async click(selector, options = {}) {
-    const handle = await this.$(selector);
-    assert(handle, 'No node found for selector: ' + selector);
-    await handle.click(options);
-    await handle.dispose();
-  }
-
-  /**
-   * @param {string} selector
-   * @param {string} text
-   * @param {{delay: (number|undefined)}=} options
-   */
-  async type(selector, text, options) {
-    const handle = await this.$(selector);
-    assert(handle, 'No node found for selector: ' + selector);
-    await handle.type(text, options);
-    await handle.dispose();
-  }
-
-  /**
-   * @param {string} selector
-   */
-  async focus(selector) {
-    const handle = await this.$(selector);
-    assert(handle, 'No node found for selector: ' + selector);
-    await handle.focus();
-    await handle.dispose();
-  }
-
-  /**
-   * @param {string} selector
-   */
-  async hover(selector) {
-    const handle = await this.$(selector);
-    assert(handle, 'No node found for selector: ' + selector);
-    await handle.hover();
-    await handle.dispose();
-  }
-
-  _detach() {
-    this._parentFrame._children.delete(this);
-    this._parentFrame = null;
-    this._isDetached = true;
-    for (const waitTask of this._waitTasks)
-      waitTask.terminate(new Error('waitForFunction failed: frame got detached.'));
-  }
-
-  _navigated(url, name, navigationId) {
-    this._url = url;
-    this._name = name;
-    this._lastCommittedNavigationId = navigationId;
-    this._documentPromise = null;
-    this._firedEvents.clear();
-  }
-
-  /**
-  * @param {string} selector
-  * @param {!Array<string>} values
-  * @return {!Promise<!Array<string>>}
-  */
-  select(selector, ...values) {
-    for (const value of values)
-      assert(helper.isString(value), 'Values must be strings. Found value "' + value + '" of type "' + (typeof value) + '"');
-    return this.$eval(selector, (element, values) => {
-      if (element.nodeName.toLowerCase() !== 'select')
-        throw new Error('Element is not a <select> element.');
-
-      const options = Array.from(element.options);
-      element.value = undefined;
-      for (const option of options) {
-        option.selected = values.includes(option.value);
-        if (option.selected && !element.multiple)
-          break;
-      }
-      element.dispatchEvent(new Event('input', { 'bubbles': true }));
-      element.dispatchEvent(new Event('change', { 'bubbles': true }));
-      return options.filter(option => option.selected).map(option => option.value);
-    }, values);
-  }
-
-  /**
-   * @param {(string|number|Function)} selectorOrFunctionOrTimeout
-   * @param {!{polling?: string|number, timeout?: number, visible?: boolean, hidden?: boolean}=} options
-   * @param {!Array<*>} args
-   * @return {!Promise<!JSHandle>}
-   */
-  waitFor(selectorOrFunctionOrTimeout, options, ...args) {
-    const xPathPattern = '//';
-
-    if (helper.isString(selectorOrFunctionOrTimeout)) {
-      const string = /** @type {string} */ (selectorOrFunctionOrTimeout);
-      if (string.startsWith(xPathPattern))
-        return this.waitForXPath(string, options);
-      return this.waitForSelector(string, options);
-    }
-    if (helper.isNumber(selectorOrFunctionOrTimeout))
-      return new Promise(fulfill => setTimeout(fulfill, /** @type {number} */ (selectorOrFunctionOrTimeout)));
-    if (typeof selectorOrFunctionOrTimeout === 'function')
-      return this.waitForFunction(selectorOrFunctionOrTimeout, options, ...args);
-    return Promise.reject(new Error('Unsupported target type: ' + (typeof selectorOrFunctionOrTimeout)));
-  }
-
-  /**
-   * @param {Function|string} pageFunction
-   * @param {!{polling?: string|number, timeout?: number}=} options
-   * @return {!Promise<!JSHandle>}
-   */
-  waitForFunction(pageFunction, options = {}, ...args) {
-    const {
-      polling = 'raf',
-      timeout = 30000
-    } = options;
-    return new WaitTask(this, pageFunction, 'function', polling, timeout, ...args).promise;
-  }
-
-  /**
-   * @param {string} selector
-   * @param {!{timeout?: number, visible?: boolean, hidden?: boolean}=} options
-   * @return {!Promise<!ElementHandle>}
-   */
-  waitForSelector(selector, options) {
-    return this._waitForSelectorOrXPath(selector, false, options);
-  }
-
-  /**
-   * @param {string} xpath
-   * @param {!{timeout?: number, visible?: boolean, hidden?: boolean}=} options
-   * @return {!Promise<!ElementHandle>}
-   */
-  waitForXPath(xpath, options) {
-    return this._waitForSelectorOrXPath(xpath, true, options);
-  }
-
-  /**
-   * @param {string} selectorOrXPath
-   * @param {boolean} isXPath
-   * @param {!{timeout?: number, visible?: boolean, hidden?: boolean}=} options
-   * @return {!Promise<!ElementHandle>}
-   */
-  _waitForSelectorOrXPath(selectorOrXPath, isXPath, options = {}) {
-    const {
-      visible: waitForVisible = false,
-      hidden: waitForHidden = false,
-      timeout = 30000
-    } = options;
-    const polling = waitForVisible || waitForHidden ? 'raf' : 'mutation';
-    const title = `${isXPath ? 'XPath' : 'selector'} "${selectorOrXPath}"${waitForHidden ? ' to be hidden' : ''}`;
-    return new WaitTask(this, predicate, title, polling, timeout, selectorOrXPath, isXPath, waitForVisible, waitForHidden).promise;
-
-    /**
-     * @param {string} selectorOrXPath
-     * @param {boolean} isXPath
-     * @param {boolean} waitForVisible
-     * @param {boolean} waitForHidden
-     * @return {?Node|boolean}
-     */
-    function predicate(selectorOrXPath, isXPath, waitForVisible, waitForHidden) {
-      const node = isXPath
-        ? document.evaluate(selectorOrXPath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue
-        : document.querySelector(selectorOrXPath);
-      if (!node)
-        return waitForHidden;
-      if (!waitForVisible && !waitForHidden)
-        return node;
-      const element = /** @type {Element} */ (node.nodeType === Node.TEXT_NODE ? node.parentElement : node);
-
-      const style = window.getComputedStyle(element);
-      const isVisible = style && style.visibility !== 'hidden' && hasVisibleBoundingBox();
-      const success = (waitForVisible === isVisible || waitForHidden === !isVisible);
-      return success ? node : null;
-
-      /**
-       * @return {boolean}
-       */
-      function hasVisibleBoundingBox() {
-        const rect = element.getBoundingClientRect();
-        return !!(rect.top || rect.bottom || rect.width || rect.height);
-      }
-    }
-  }
-
-  /**
-   * @return {!Promise<String>}
-   */
-  async content() {
-    return await this.evaluate(() => {
-      let retVal = '';
-      if (document.doctype)
-        retVal = new XMLSerializer().serializeToString(document.doctype);
-      if (document.documentElement)
-        retVal += document.documentElement.outerHTML;
-      return retVal;
-    });
-  }
-
-  /**
-   * @param {string} html
-   */
-  async setContent(html) {
-    await this.evaluate(html => {
-      document.open();
-      document.write(html);
-      document.close();
-    }, html);
-  }
-
-  async evaluate(pageFunction, ...args) {
-    return this._executionContext.evaluate(pageFunction, ...args);
-  }
-
-  _document() {
-    if (!this._documentPromise)
-      this._documentPromise = this.evaluateHandle('document').then(handle => handle.asElement());
-    return this._documentPromise;
-  }
-
-  /**
-   * @param {string} selector
-   * @return {!Promise<?ElementHandle>}
-   */
-  async $(selector) {
-    const document = await this._document();
-    return document.$(selector);
-  }
-
-  /**
-   * @param {string} selector
-   * @return {!Promise<!Array<!ElementHandle>>}
-   */
-  async $$(selector) {
-    const document = await this._document();
-    return document.$$(selector);
-  }
-
-  /**
-   * @param {string} selector
-   * @param {Function|String} pageFunction
-   * @param {!Array<*>} args
-   * @return {!Promise<(!Object|undefined)>}
-   */
-  async $eval(selector, pageFunction, ...args) {
-    const document = await this._document();
-    return document.$eval(selector, pageFunction, ...args);
-  }
-
-  /**
-   * @param {string} selector
-   * @param {Function|String} pageFunction
-   * @param {!Array<*>} args
-   * @return {!Promise<(!Object|undefined)>}
-   */
-  async $$eval(selector, pageFunction, ...args) {
-    const document = await this._document();
-    return document.$$eval(selector, pageFunction, ...args);
-  }
-
-  /**
-   * @param {string} expression
-   * @return {!Promise<!Array<!ElementHandle>>}
-   */
-  async $x(expression) {
-    const document = await this._document();
-    return document.$x(expression);
-  }
-
-  async evaluateHandle(pageFunction, ...args) {
-    return this._executionContext.evaluateHandle(pageFunction, ...args);
-  }
-
-  /**
-   * @param {!{content?: string, path?: string, type?: string, url?: string}} options
-   * @return {!Promise<!ElementHandle>}
-   */
-  async addScriptTag(options) {
-    if (typeof options.url === 'string') {
-      const url = options.url;
-      try {
-        return (await this.evaluateHandle(addScriptUrl, url, options.type)).asElement();
-      } catch (error) {
-        throw new Error(`Loading script from ${url} failed`);
-      }
-    }
-
-    if (typeof options.path === 'string') {
-      let contents = await readFileAsync(options.path, 'utf8');
-      contents += '//# sourceURL=' + options.path.replace(/\n/g, '');
-      return (await this.evaluateHandle(addScriptContent, contents, options.type)).asElement();
-    }
-
-    if (typeof options.content === 'string') {
-      return (await this.evaluateHandle(addScriptContent, options.content, options.type)).asElement();
-    }
-
-    throw new Error('Provide an object with a `url`, `path` or `content` property');
-
-    /**
-     * @param {string} url
-     * @param {string} type
-     * @return {!Promise<!HTMLElement>}
-     */
-    async function addScriptUrl(url, type) {
-      const script = document.createElement('script');
-      script.src = url;
-      if (type)
-        script.type = type;
-      const promise = new Promise((res, rej) => {
-        script.onload = res;
-        script.onerror = rej;
-      });
-      document.head.appendChild(script);
-      await promise;
-      return script;
-    }
-
-    /**
-     * @param {string} content
-     * @param {string} type
-     * @return {!HTMLElement}
-     */
-    function addScriptContent(content, type = 'text/javascript') {
-      const script = document.createElement('script');
-      script.type = type;
-      script.text = content;
-      let error = null;
-      script.onerror = e => error = e;
-      document.head.appendChild(script);
-      if (error)
-        throw error;
-      return script;
-    }
-  }
-
-  /**
-   * @param {!{content?: string, path?: string, url?: string}} options
-   * @return {!Promise<!ElementHandle>}
-   */
-  async addStyleTag(options) {
-    if (typeof options.url === 'string') {
-      const url = options.url;
-      try {
-        return (await this.evaluateHandle(addStyleUrl, url)).asElement();
-      } catch (error) {
-        throw new Error(`Loading style from ${url} failed`);
-      }
-    }
-
-    if (typeof options.path === 'string') {
-      let contents = await readFileAsync(options.path, 'utf8');
-      contents += '/*# sourceURL=' + options.path.replace(/\n/g, '') + '*/';
-      return (await this.evaluateHandle(addStyleContent, contents)).asElement();
-    }
-
-    if (typeof options.content === 'string') {
-      return (await this.evaluateHandle(addStyleContent, options.content)).asElement();
-    }
-
-    throw new Error('Provide an object with a `url`, `path` or `content` property');
-
-    /**
-     * @param {string} url
-     * @return {!Promise<!HTMLElement>}
-     */
-    async function addStyleUrl(url) {
-      const link = document.createElement('link');
-      link.rel = 'stylesheet';
-      link.href = url;
-      const promise = new Promise((res, rej) => {
-        link.onload = res;
-        link.onerror = rej;
-      });
-      document.head.appendChild(link);
-      await promise;
-      return link;
-    }
-
-    /**
-     * @param {string} content
-     * @return {!Promise<!HTMLElement>}
-     */
-    async function addStyleContent(content) {
-      const style = document.createElement('style');
-      style.type = 'text/css';
-      style.appendChild(document.createTextNode(content));
-      const promise = new Promise((res, rej) => {
-        style.onload = res;
-        style.onerror = rej;
-      });
-      document.head.appendChild(style);
-      await promise;
-      return style;
-    }
-  }
-
-  /**
-   * @return {!Promise<string>}
-   */
-  async title() {
-    return this.evaluate(() => document.title);
-  }
-
-  name() {
-    return this._name;
-  }
-
-  isDetached() {
-    return this._isDetached;
-  }
-
-  childFrames() {
-    return Array.from(this._children);
-  }
-
-  url() {
-    return this._url;
-  }
-
-  parentFrame() {
-    return this._parentFrame;
-  }
-}
-
-/**
- * @internal
- */
-class WaitTask {
-  /**
-   * @param {!Frame} frame
-   * @param {Function|string} predicateBody
-   * @param {string|number} polling
-   * @param {number} timeout
-   * @param {!Array<*>} args
-   */
-  constructor(frame, predicateBody, title, polling, timeout, ...args) {
-    if (helper.isString(polling))
-      assert(polling === 'raf' || polling === 'mutation', 'Unknown polling option: ' + polling);
-    else if (helper.isNumber(polling))
-      assert(polling > 0, 'Cannot poll with non-positive interval: ' + polling);
-    else
-      throw new Error('Unknown polling options: ' + polling);
-
-    this._frame = frame;
-    this._polling = polling;
-    this._timeout = timeout;
-    this._predicateBody = helper.isString(predicateBody) ? 'return ' + predicateBody : 'return (' + predicateBody + ')(...args)';
-    this._args = args;
-    this._runCount = 0;
-    frame._waitTasks.add(this);
-    this.promise = new Promise((resolve, reject) => {
-      this._resolve = resolve;
-      this._reject = reject;
-    });
-    // Since page navigation requires us to re-install the pageScript, we should track
-    // timeout on our end.
-    if (timeout) {
-      const timeoutError = new TimeoutError(`waiting for ${title} failed: timeout ${timeout}ms exceeded`);
-      this._timeoutTimer = setTimeout(() => this.terminate(timeoutError), timeout);
-    }
-    this.rerun();
-  }
-
-  /**
-   * @param {!Error} error
-   */
-  terminate(error) {
-    this._terminated = true;
-    this._reject(error);
-    this._cleanup();
-  }
-
-  async rerun() {
-    const runCount = ++this._runCount;
-    /** @type {?JSHandle} */
-    let success = null;
-    let error = null;
-    try {
-      success = await this._frame.evaluateHandle(waitForPredicatePageFunction, this._predicateBody, this._polling, this._timeout, ...this._args);
-    } catch (e) {
-      error = e;
-    }
-
-    if (this._terminated || runCount !== this._runCount) {
-      if (success)
-        await success.dispose();
-      return;
-    }
-
-    // Ignore timeouts in pageScript - we track timeouts ourselves.
-    // If the frame's execution context has already changed, `frame.evaluate` will
-    // throw an error - ignore this predicate run altogether.
-    if (!error && await this._frame.evaluate(s => !s, success).catch(e => true)) {
-      await success.dispose();
-      return;
-    }
-
-    // When the page is navigated, the promise is rejected.
-    // Try again right away.
-    if (error && error.message.includes('Execution context was destroyed')) {
-      this.rerun();
-      return;
-    }
-
-    if (error)
-      this._reject(error);
-    else
-      this._resolve(success);
-
-    this._cleanup();
-  }
-
-  _cleanup() {
-    clearTimeout(this._timeoutTimer);
-    this._frame._waitTasks.delete(this);
-    this._runningTask = null;
-  }
-}
-
-/**
- * @param {string} predicateBody
- * @param {string} polling
- * @param {number} timeout
- * @return {!Promise<*>}
- */
-async function waitForPredicatePageFunction(predicateBody, polling, timeout, ...args) {
-  const predicate = new Function('...args', predicateBody);
-  let timedOut = false;
-  if (timeout)
-    setTimeout(() => timedOut = true, timeout);
-  if (polling === 'raf')
-    return await pollRaf();
-  if (polling === 'mutation')
-    return await pollMutation();
-  if (typeof polling === 'number')
-    return await pollInterval(polling);
-
-  /**
-   * @return {!Promise<*>}
-   */
-  function pollMutation() {
-    const success = predicate.apply(null, args);
-    if (success)
-      return Promise.resolve(success);
-
-    let fulfill;
-    const result = new Promise(x => fulfill = x);
-    const observer = new MutationObserver(mutations => {
-      if (timedOut) {
-        observer.disconnect();
-        fulfill();
-      }
-      const success = predicate.apply(null, args);
-      if (success) {
-        observer.disconnect();
-        fulfill(success);
-      }
-    });
-    observer.observe(document, {
-      childList: true,
-      subtree: true,
-      attributes: true
-    });
-    return result;
-  }
-
-  /**
-   * @return {!Promise<*>}
-   */
-  function pollRaf() {
-    let fulfill;
-    const result = new Promise(x => fulfill = x);
-    onRaf();
-    return result;
-
-    function onRaf() {
-      if (timedOut) {
-        fulfill();
-        return;
-      }
-      const success = predicate.apply(null, args);
-      if (success)
-        fulfill(success);
-      else
-        requestAnimationFrame(onRaf);
-    }
-  }
-
-  /**
-   * @param {number} pollInterval
-   * @return {!Promise<*>}
-   */
-  function pollInterval(pollInterval) {
-    let fulfill;
-    const result = new Promise(x => fulfill = x);
-    onTimeout();
-    return result;
-
-    function onTimeout() {
-      if (timedOut) {
-        fulfill();
-        return;
-      }
-      const success = predicate.apply(null, args);
-      if (success)
-        fulfill(success);
-      else
-        setTimeout(onTimeout, pollInterval);
-    }
-  }
-}
-
 /**
  * @internal
  */
@@ -1410,4 +720,4 @@ class NavigationWatchdog {
   }
 }
 
-module.exports = {Page, Frame, ConsoleMessage};
+module.exports = {Page, ConsoleMessage};

experimental/puppeteer-firefox/lib/api.js

@@ -6,7 +6,7 @@ module.exports = {
   Dialog: require('./Dialog').Dialog,
   ElementHandle: require('./JSHandle').ElementHandle,
   ExecutionContext: require('./ExecutionContext').ExecutionContext,
-  Frame: require('./Page').Frame,
+  Frame: require('./FrameManager').Frame,
   JSHandle: require('./JSHandle').JSHandle,
   Keyboard: require('./Input').Keyboard,
   Mouse: require('./Input').Mouse,