puppeteer-ruby 0.0.2

data/lib/puppeteer/dom_world.rb

@@ -0,0 +1,447 @@
+require 'thread'
+
+# https://github.com/puppeteer/puppeteer/blob/master/src/DOMWorld.js
+class Puppeteer::DOMWorld
+  using Puppeteer::AsyncAwaitBehavior
+
+  # @param {!Puppeteer.FrameManager} frameManager
+  # @param {!Puppeteer.Frame} frame
+  # @param {!Puppeteer.TimeoutSettings} timeoutSettings
+  def initialize(frame_manager, frame, timeout_settings)
+    @frame_manager = frame_manager
+    @frame = frame
+    @timeout_settings = timeout_settings
+    @context_promise = resolvable_future
+    @wait_tasks = Set.new
+    @detached = false
+  end
+
+  attr_reader :frame
+
+  # @param {?Puppeteer.ExecutionContext} context
+  def context=(context)
+    if context
+      @context_promise.fulfill(context)
+    #   for (const waitTask of this._waitTasks)
+    #     waitTask.rerun();
+    else
+      @document = nil
+      @context_promise = resolvable_future
+    end
+  end
+
+  def has_context?
+    @context_promise.resolved?
+  end
+
+  private def detach
+    @detached = true
+    @wait_tasks.each do |wait_task|
+      wait_task.terminate(Puppeteer::WaitTask::TerminatedError.new('waitForFunction failed: frame got detached.'))
+    end
+  end
+
+  class DetachedError < StandardError ; end
+
+  # @return {!Promise<!Puppeteer.ExecutionContext>}
+  def execution_context
+    if @detached
+      raise DetachedError.new("Execution Context is not available in detached frame \"#{@frame.url}\" (are you trying to evaluate?)")
+    end
+    @context_promise.value!
+  end
+
+  # @param {Function|string} pageFunction
+  # @param {!Array<*>} args
+  # @return {!Promise<!Puppeteer.JSHandle>}
+  def evaluate_handle(page_function, *args)
+    execution_context.evaluate_handle(page_function, *args)
+  end
+
+  # @param {Function|string} pageFunction
+  # @param {!Array<*>} args
+  # @return {!Promise<*>}
+  def evaluate(page_function, *args)
+    execution_context.evaluate(page_function, *args)
+  end
+
+  # `$()` in JavaScript. $ is not allowed to use as a method name in Ruby.
+  # @param {string} selector
+  # @return {!Promise<?Puppeteer.ElementHandle>}
+  def S(selector)
+    document.S(selector)
+  end
+
+  private def document
+    @document ||= execution_context.evaluate_handle('document').as_element
+  end
+
+  # `$x()` in JavaScript. $ is not allowed to use as a method name in Ruby.
+  # @param {string} expression
+  # @return {!Promise<!Array<!Puppeteer.ElementHandle>>}
+  def Sx(expression)
+    document.Sx(expression)
+  end
+
+  # `$eval()` in JavaScript. $ is not allowed to use as a method name in Ruby.
+  # @param {string} selector
+  # @param {Function|string} pageFunction
+  # @param {!Array<*>} args
+  # @return {!Promise<(!Object|undefined)>}
+  def Seval(selector, page_function, *args)
+    document.Seval(selector, page_function, *args)
+  end
+
+  # `$$eval()` in JavaScript. $ is not allowed to use as a method name in Ruby.
+  # @param {string} selector
+  # @param {Function|string} pageFunction
+  # @param {!Array<*>} args
+  # @return {!Promise<(!Object|undefined)>}
+  def SSeval(selector, page_function, *args)
+    document.SSeval(selector, page_function, *args)
+  end
+
+  # `$$()` in JavaScript. $ is not allowed to use as a method name in Ruby.
+  # @param {string} selector
+  # @return {!Promise<!Array<!Puppeteer.ElementHandle>>}
+  def SS(selector)
+    document.SS(selector)
+  end
+
+  # /**
+  #  * @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
+  #  * @param {!{timeout?: number, waitUntil?: string|!Array<string>}=} options
+  #  */
+  # async setContent(html, options = {}) {
+  #   const {
+  #     waitUntil = ['load'],
+  #     timeout = this._timeoutSettings.navigationTimeout(),
+  #   } = options;
+  #   // We rely upon the fact that document.open() will reset frame lifecycle with "init"
+  #   // lifecycle event. @see https://crrev.com/608658
+  #   await this.evaluate(html => {
+  #     document.open();
+  #     document.write(html);
+  #     document.close();
+  #   }, html);
+  #   const watcher = new LifecycleWatcher(this._frameManager, this._frame, waitUntil, timeout);
+  #   const error = await Promise.race([
+  #     watcher.timeoutOrTerminationPromise(),
+  #     watcher.lifecyclePromise(),
+  #   ]);
+  #   watcher.dispose();
+  #   if (error)
+  #     throw error;
+  # }
+
+  # /**
+  #  * @param {!{url?: string, path?: string, content?: string, type?: string}} options
+  #  * @return {!Promise<!Puppeteer.ElementHandle>}
+  #  */
+  # async addScriptTag(options) {
+  #   const {
+  #     url = null,
+  #     path = null,
+  #     content = null,
+  #     type = ''
+  #   } = options;
+  #   if (url !== null) {
+  #     try {
+  #       const context = await this.executionContext();
+  #       return (await context.evaluateHandle(addScriptUrl, url, type)).asElement();
+  #     } catch (error) {
+  #       throw new Error(`Loading script from ${url} failed`);
+  #     }
+  #   }
+
+  #   if (path !== null) {
+  #     let contents = await readFileAsync(path, 'utf8');
+  #     contents += '//# sourceURL=' + path.replace(/\n/g, '');
+  #     const context = await this.executionContext();
+  #     return (await context.evaluateHandle(addScriptContent, contents, type)).asElement();
+  #   }
+
+  #   if (content !== null) {
+  #     const context = await this.executionContext();
+  #     return (await context.evaluateHandle(addScriptContent, content, 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 {!{url?: string, path?: string, content?: string}} options
+  #  * @return {!Promise<!Puppeteer.ElementHandle>}
+  #  */
+  # async addStyleTag(options) {
+  #   const {
+  #     url = null,
+  #     path = null,
+  #     content = null
+  #   } = options;
+  #   if (url !== null) {
+  #     try {
+  #       const context = await this.executionContext();
+  #       return (await context.evaluateHandle(addStyleUrl, url)).asElement();
+  #     } catch (error) {
+  #       throw new Error(`Loading style from ${url} failed`);
+  #     }
+  #   }
+
+  #   if (path !== null) {
+  #     let contents = await readFileAsync(path, 'utf8');
+  #     contents += '/*# sourceURL=' + path.replace(/\n/g, '') + '*/';
+  #     const context = await this.executionContext();
+  #     return (await context.evaluateHandle(addStyleContent, contents)).asElement();
+  #   }
+
+  #   if (content !== null) {
+  #     const context = await this.executionContext();
+  #     return (await context.evaluateHandle(addStyleContent, 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;
+  #   }
+  # }
+
+  # /**
+  #  * @param {string} selector
+  #  * @param {!{delay?: number, button?: "left"|"right"|"middle", 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
+  #  */
+  # 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();
+  # }
+
+  # /**
+  #  * @param {string} selector
+  #  * @param {!Array<string>} values
+  #  * @return {!Promise<!Array<string>>}
+  #  */
+  # async select(selector, ...values) {
+  #   const handle = await this.$(selector);
+  #   assert(handle, 'No node found for selector: ' + selector);
+  #   const result = await handle.select(...values);
+  #   await handle.dispose();
+  #   return result;
+  # }
+
+  # /**
+  #  * @param {string} selector
+  #  */
+  # async tap(selector) {
+  #   const handle = await this.$(selector);
+  #   assert(handle, 'No node found for selector: ' + selector);
+  #   await handle.tap();
+  #   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
+  #  * @param {!{visible?: boolean, hidden?: boolean, timeout?: number}=} options
+  #  * @return {!Promise<?Puppeteer.ElementHandle>}
+  #  */
+  # waitForSelector(selector, options) {
+  #   return this._waitForSelectorOrXPath(selector, false, options);
+  # }
+
+  # /**
+  #  * @param {string} xpath
+  #  * @param {!{visible?: boolean, hidden?: boolean, timeout?: number}=} options
+  #  * @return {!Promise<?Puppeteer.ElementHandle>}
+  #  */
+  # waitForXPath(xpath, options) {
+  #   return this._waitForSelectorOrXPath(xpath, true, options);
+  # }
+
+  # /**
+  #  * @param {Function|string} pageFunction
+  #  * @param {!{polling?: string|number, timeout?: number}=} options
+  #  * @return {!Promise<!Puppeteer.JSHandle>}
+  #  */
+  # waitForFunction(pageFunction, options = {}, ...args) {
+  #   const {
+  #     polling = 'raf',
+  #     timeout = this._timeoutSettings.timeout(),
+  #   } = options;
+  #   return new WaitTask(this, pageFunction, 'function', polling, timeout, ...args).promise;
+  # }
+
+  # /**
+  #  * @return {!Promise<string>}
+  #  */
+  # async title() {
+  #   return this.evaluate(() => document.title);
+  # }
+
+  # /**
+  #  * @param {string} selectorOrXPath
+  #  * @param {boolean} isXPath
+  #  * @param {!{visible?: boolean, hidden?: boolean, timeout?: number}=} options
+  #  * @return {!Promise<?Puppeteer.ElementHandle>}
+  #  */
+  # async _waitForSelectorOrXPath(selectorOrXPath, isXPath, options = {}) {
+  #   const {
+  #     visible: waitForVisible = false,
+  #     hidden: waitForHidden = false,
+  #     timeout = this._timeoutSettings.timeout(),
+  #   } = options;
+  #   const polling = waitForVisible || waitForHidden ? 'raf' : 'mutation';
+  #   const title = `${isXPath ? 'XPath' : 'selector'} "${selectorOrXPath}"${waitForHidden ? ' to be hidden' : ''}`;
+  #   const waitTask = new WaitTask(this, predicate, title, polling, timeout, selectorOrXPath, isXPath, waitForVisible, waitForHidden);
+  #   const handle = await waitTask.promise;
+  #   if (!handle.asElement()) {
+  #     await handle.dispose();
+  #     return null;
+  #   }
+  #   return handle.asElement();
+
+  #   /**
+  #    * @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);
+  #     }
+  #   }
+  # }
+end

data/lib/puppeteer/element_handle.rb

@@ -0,0 +1,433 @@
+class Puppeteer::ElementHandle < Puppeteer::JSHandle
+  include Puppeteer::IfPresent
+  using Puppeteer::AsyncAwaitBehavior
+
+  # @param context [Puppeteer::ExecutionContext]
+  # @param client [Puppeteer::CDPSession]
+  # @param remote_object [Puppeteer::RemoteObject]
+  # @param page [Puppeteer::Page]
+  # @param frame_manager [Puppeteer::FrameManager]
+  def initialize(context:, client:, remote_object:, page:, frame_manager:)
+    super(context: context, client: client, remote_object: remote_object)
+    @page = page
+    @frame_manager = frame_manager
+    @disposed = false
+  end
+
+  def as_element
+    self
+  end
+
+  def content_frame
+    node_info = @remote_object.node_info
+    frame_id = node_info["node"]["frameId"]
+    if frame_id.is_a?(String)
+      @frame_manager.frame(frame_id)
+    else
+      nil
+    end
+  end
+
+  #  async _scrollIntoViewIfNeeded() {
+  #    const error = await this.evaluate(async(element, pageJavascriptEnabled) => {
+  #      if (!element.isConnected)
+  #        return 'Node is detached from document';
+  #      if (element.nodeType !== Node.ELEMENT_NODE)
+  #        return 'Node is not of type HTMLElement';
+  #      // force-scroll if page's javascript is disabled.
+  #      if (!pageJavascriptEnabled) {
+  #        element.scrollIntoView({block: 'center', inline: 'center', behavior: 'instant'});
+  #        return false;
+  #      }
+  #      const visibleRatio = await new Promise(resolve => {
+  #        const observer = new IntersectionObserver(entries => {
+  #          resolve(entries[0].intersectionRatio);
+  #          observer.disconnect();
+  #        });
+  #        observer.observe(element);
+  #      });
+  #      if (visibleRatio !== 1.0)
+  #        element.scrollIntoView({block: 'center', inline: 'center', behavior: 'instant'});
+  #      return false;
+  #    }, this._page._javascriptEnabled);
+  #    if (error)
+  #      throw new Error(error);
+  #  }
+
+  #  /**
+  #   * @return {!Promise<!{x: number, y: number}>}
+  #   */
+  #  async _clickablePoint() {
+  #    const [result, layoutMetrics] = await Promise.all([
+  #      this._client.send('DOM.getContentQuads', {
+  #        objectId: this._remoteObject.objectId
+  #      }).catch(debugError),
+  #      this._client.send('Page.getLayoutMetrics'),
+  #    ]);
+  #    if (!result || !result.quads.length)
+  #      throw new Error('Node is either not visible or not an HTMLElement');
+  #    // Filter out quads that have too small area to click into.
+  #    const {clientWidth, clientHeight} = layoutMetrics.layoutViewport;
+  #    const quads = result.quads.map(quad => this._fromProtocolQuad(quad)).map(quad => this._intersectQuadWithViewport(quad, clientWidth, clientHeight)).filter(quad => computeQuadArea(quad) > 1);
+  #    if (!quads.length)
+  #      throw new Error('Node is either not visible or not an HTMLElement');
+  #    // Return the middle point of the first quad.
+  #    const quad = quads[0];
+  #    let x = 0;
+  #    let y = 0;
+  #    for (const point of quad) {
+  #      x += point.x;
+  #      y += point.y;
+  #    }
+  #    return {
+  #      x: x / 4,
+  #      y: y / 4
+  #    };
+  #  }
+
+  #  /**
+  #   * @return {!Promise<void|Protocol.DOM.getBoxModelReturnValue>}
+  #   */
+  #  _getBoxModel() {
+  #    return this._client.send('DOM.getBoxModel', {
+  #      objectId: this._remoteObject.objectId
+  #    }).catch(error => debugError(error));
+  #  }
+
+  #  /**
+  #   * @param {!Array<number>} quad
+  #   * @return {!Array<{x: number, y: number}>}
+  #   */
+  #  _fromProtocolQuad(quad) {
+  #    return [
+  #      {x: quad[0], y: quad[1]},
+  #      {x: quad[2], y: quad[3]},
+  #      {x: quad[4], y: quad[5]},
+  #      {x: quad[6], y: quad[7]}
+  #    ];
+  #  }
+
+  #  /**
+  #   * @param {!Array<{x: number, y: number}>} quad
+  #   * @param {number} width
+  #   * @param {number} height
+  #   * @return {!Array<{x: number, y: number}>}
+  #   */
+  #  _intersectQuadWithViewport(quad, width, height) {
+  #    return quad.map(point => ({
+  #      x: Math.min(Math.max(point.x, 0), width),
+  #      y: Math.min(Math.max(point.y, 0), height),
+  #    }));
+  #  }
+
+  #  async hover() {
+  #    await this._scrollIntoViewIfNeeded();
+  #    const {x, y} = await this._clickablePoint();
+  #    await this._page.mouse.move(x, y);
+  #  }
+
+  #  /**
+  #   * @param {!{delay?: number, button?: "left"|"right"|"middle", clickCount?: number}=} options
+  #   */
+  #  async click(options) {
+  #    await this._scrollIntoViewIfNeeded();
+  #    const {x, y} = await this._clickablePoint();
+  #    await this._page.mouse.click(x, y, options);
+  #  }
+
+  #  /**
+  #   * @param {!Array<string>} values
+  #   * @return {!Promise<!Array<string>>}
+  #   */
+  #  async select(...values) {
+  #    for (const value of values)
+  #      assert(helper.isString(value), 'Values must be strings. Found value "' + value + '" of type "' + (typeof value) + '"');
+  #    return this.evaluate((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 {!Array<string>} filePaths
+  #   */
+  #  async uploadFile(...filePaths) {
+  #    const isMultiple = await this.evaluate(element => element.multiple);
+  #    assert(filePaths.length <= 1 || isMultiple, 'Multiple file uploads only work with <input type=file multiple>');
+  #    // These imports are only needed for `uploadFile`, so keep them
+  #    // scoped here to avoid paying the cost unnecessarily.
+  #    const path = require('path');
+  #    const mime = require('mime-types');
+  #    const fs = require('fs');
+  #    const readFileAsync = helper.promisify(fs.readFile);
+
+  #    const promises = filePaths.map(filePath => readFileAsync(filePath));
+  #    const files = [];
+  #    for (let i = 0; i < filePaths.length; i++) {
+  #      const buffer = await promises[i];
+  #      const filePath = path.basename(filePaths[i]);
+  #      const file = {
+  #        name: filePath,
+  #        content: buffer.toString('base64'),
+  #        mimeType: mime.lookup(filePath),
+  #      };
+  #      files.push(file);
+  #    }
+  #    await this.evaluateHandle(async(element, files) => {
+  #      const dt = new DataTransfer();
+  #      for (const item of files) {
+  #        const response = await fetch(`data:${item.mimeType};base64,${item.content}`);
+  #        const file = new File([await response.blob()], item.name);
+  #        dt.items.add(file);
+  #      }
+  #      element.files = dt.files;
+  #      element.dispatchEvent(new Event('input', { bubbles: true }));
+  #      element.dispatchEvent(new Event('change', { bubbles: true }));
+  #    }, files);
+  #  }
+
+  #  async tap() {
+  #    await this._scrollIntoViewIfNeeded();
+  #    const {x, y} = await this._clickablePoint();
+  #    await this._page.touchscreen.tap(x, y);
+  #  }
+
+
+  def focus
+    evaluate('element => element.focus()')
+  end
+
+  async def async_focus
+    focus
+  end
+
+  # @param text [String]
+  # @param delay [number|nil]
+  def type_text(text, delay: nil)
+    focus
+    @page.keyboard.type_text(text, delay: delay)
+  end
+
+  # @param text [String]
+  # @param delay [number|nil]
+  # @return [Future]
+  async def async_type_text(text, delay: nil)
+    type_text(text, delay: delay)
+  end
+
+  # @param key [String]
+  # @param delay [number|nil]
+  def press(key, delay: nil)
+    focus
+    @page.keyboard.press(key, delay: delay)
+  end
+
+  # @param key [String]
+  # @param delay [number|nil]
+  # @return [Future]
+  async def async_press(key, delay: nil)
+    press(key, delay: delay)
+  end
+
+  #  /**
+  #   * @return {!Promise<?{x: number, y: number, width: number, height: number}>}
+  #   */
+  #  async boundingBox() {
+  #    const result = await this._getBoxModel();
+
+  #    if (!result)
+  #      return null;
+
+  #    const quad = result.model.border;
+  #    const x = Math.min(quad[0], quad[2], quad[4], quad[6]);
+  #    const y = Math.min(quad[1], quad[3], quad[5], quad[7]);
+  #    const width = Math.max(quad[0], quad[2], quad[4], quad[6]) - x;
+  #    const height = Math.max(quad[1], quad[3], quad[5], quad[7]) - y;
+
+  #    return {x, y, width, height};
+  #  }
+
+  #  /**
+  #   * @return {!Promise<?BoxModel>}
+  #   */
+  #  async boxModel() {
+  #    const result = await this._getBoxModel();
+
+  #    if (!result)
+  #      return null;
+
+  #    const {content, padding, border, margin, width, height} = result.model;
+  #    return {
+  #      content: this._fromProtocolQuad(content),
+  #      padding: this._fromProtocolQuad(padding),
+  #      border: this._fromProtocolQuad(border),
+  #      margin: this._fromProtocolQuad(margin),
+  #      width,
+  #      height
+  #    };
+  #  }
+
+  #  /**
+  #   *
+  #   * @param {!Object=} options
+  #   * @returns {!Promise<string|!Buffer>}
+  #   */
+  #  async screenshot(options = {}) {
+  #    let needsViewportReset = false;
+
+  #    let boundingBox = await this.boundingBox();
+  #    assert(boundingBox, 'Node is either not visible or not an HTMLElement');
+
+  #    const viewport = this._page.viewport();
+
+  #    if (viewport && (boundingBox.width > viewport.width || boundingBox.height > viewport.height)) {
+  #      const newViewport = {
+  #        width: Math.max(viewport.width, Math.ceil(boundingBox.width)),
+  #        height: Math.max(viewport.height, Math.ceil(boundingBox.height)),
+  #      };
+  #      await this._page.setViewport(Object.assign({}, viewport, newViewport));
+
+  #      needsViewportReset = true;
+  #    }
+
+  #    await this._scrollIntoViewIfNeeded();
+
+  #    boundingBox = await this.boundingBox();
+  #    assert(boundingBox, 'Node is either not visible or not an HTMLElement');
+  #    assert(boundingBox.width !== 0, 'Node has 0 width.');
+  #    assert(boundingBox.height !== 0, 'Node has 0 height.');
+
+  #    const { layoutViewport: { pageX, pageY } } = await this._client.send('Page.getLayoutMetrics');
+
+  #    const clip = Object.assign({}, boundingBox);
+  #    clip.x += pageX;
+  #    clip.y += pageY;
+
+  #    const imageData = await this._page.screenshot(Object.assign({}, {
+  #      clip
+  #    }, options));
+
+  #    if (needsViewportReset)
+  #      await this._page.setViewport(viewport);
+
+  #    return imageData;
+  #  }
+
+  # `$()` in JavaScript. $ is not allowed to use as a method name in Ruby.
+  # @param selector [String]
+  def S(selector)
+    handle = evaluate_handle(
+      "(element, selector) => element.querySelector(selector)",
+      selector,
+    )
+    element = handle.as_element
+
+    if element
+      return element
+    end
+    handle.dispose
+    nil
+  end
+
+  # `$$()` in JavaScript. $ is not allowed to use as a method name in Ruby.
+  # @param selector [String]
+  def SS(selector)
+    handles = evaluate_handle(
+      "(element, selector) => element.querySelectorAll(selector)",
+      selector,
+    )
+    properties = handles.properties
+    handles.dispose
+    properties.values.map(&:as_element).compact
+  end
+
+  class ElementNotFoundError < StandardError
+    def initialize(selector)
+      super("failed to find element matching selector \"#{selector}\"")
+    end
+  end
+
+  # `$eval()` in JavaScript. $ is not allowed to use as a method name in Ruby.
+  # @param selector [String]
+  # @param page_function [String]
+  # @return [Object]
+  def Seval(selector, page_function, *args)
+    element_handle = S(selector)
+    unless element_handle
+      raise ElementNotFoundError.new(selector)
+    end
+    result = element_handle.evaluate(page_function, *args)
+    element_handle.dispose
+
+    result
+  end
+
+  # `$$eval()` in JavaScript. $ is not allowed to use as a method name in Ruby.
+  # @param selector [String]
+  # @param page_function [String]
+  # @return [Object]
+  def SSeval(selector, page_function, *args)
+    handles = evaluate_handle(
+                '(element, selector) => Array.from(element.querySelectorAll(selector))',
+                selector)
+    result = handles.evaluate(page_function, *args)
+    handles.dispose
+
+    result
+  end
+
+  #  /**
+  #   * @param {string} expression
+  #   * @return {!Promise<!Array<!ElementHandle>>}
+  #   */
+  #  async $x(expression) {
+  #    const arrayHandle = await this.evaluateHandle(
+  #        (element, expression) => {
+  #          const document = element.ownerDocument || element;
+  #          const iterator = document.evaluate(expression, element, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE);
+  #          const array = [];
+  #          let item;
+  #          while ((item = iterator.iterateNext()))
+  #            array.push(item);
+  #          return array;
+  #        },
+  #        expression
+  #    );
+  #    const properties = await arrayHandle.getProperties();
+  #    await arrayHandle.dispose();
+  #    const result = [];
+  #    for (const property of properties.values()) {
+  #      const elementHandle = property.asElement();
+  #      if (elementHandle)
+  #        result.push(elementHandle);
+  #    }
+  #    return result;
+  #  }
+
+  #  /**
+  #   * @returns {!Promise<boolean>}
+  #   */
+  #  isIntersectingViewport() {
+  #    return this.evaluate(async element => {
+  #      const visibleRatio = await new Promise(resolve => {
+  #        const observer = new IntersectionObserver(entries => {
+  #          resolve(entries[0].intersectionRatio);
+  #          observer.disconnect();
+  #        });
+  #        observer.observe(element);
+  #      });
+  #      return visibleRatio > 0;
+  #    });
+  #  }
+end