puppeteer-ruby 0.0.4 → 0.0.10

data/lib/puppeteer/element_handle.rb

@@ -1,3 +1,7 @@
+require_relative './element_handle/bounding_box'
+require_relative './element_handle/box_model'
+require_relative './element_handle/point'
+
 class Puppeteer::ElementHandle < Puppeteer::JSHandle
   include Puppeteer::IfPresent
   using Puppeteer::AsyncAwaitBehavior
@@ -37,20 +41,8 @@ class Puppeteer::ElementHandle < Puppeteer::JSHandle
           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'});
+
+        element.scrollIntoViewIfNeeded({block: 'center', inline: 'center', behavior: 'instant'});
         return false;
       }
     JAVASCRIPT
@@ -58,29 +50,9 @@ class Puppeteer::ElementHandle < Puppeteer::JSHandle
     if error
       raise ScrollIntoViewError.new(error)
     end
-  end
-
-  class Point
-    def initialize(x:, y:)
-      @x = x
-      @y = y
-    end
-
-    def +(other)
-      Point.new(
-        x: @x + other.x,
-        y: @y + other.y,
-      )
-    end
-
-    def /(num)
-      Point.new(
-        x: @x / num,
-        y: @y / num,
-      )
-    end
-
-    attr_reader :x, :y
+    # clickpoint is often calculated before scrolling is completed.
+    # So, just sleep about 10 frames
+    sleep 0.16
   end
 
   class ElementNotVisibleError < StandardError
@@ -112,15 +84,6 @@ class Puppeteer::ElementHandle < Puppeteer::JSHandle
     quads.first.reduce(:+) / 4
   end
 
-  #  /**
-  #   * @return {!Promise<void|Protocol.DOM.getBoxModelReturnValue>}
-  #   */
-  #  _getBoxModel() {
-  #    return this._client.send('DOM.getBoxModel', {
-  #      objectId: this._remoteObject.objectId
-  #    }).catch(error => debugError(error));
-  #  }
-
   # @param quad [Array<number>]
   # @return [Array<Point>]
   private def from_protocol_quad(quad)
@@ -157,83 +120,84 @@ class Puppeteer::ElementHandle < Puppeteer::JSHandle
     @page.mouse.click(point.x, point.y, delay: delay, button: button, click_count: click_count)
   end
 
-  #  /**
-  #   * @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 delay [Number]
+  # @param button [String] "left"|"right"|"middle"
+  # @param click_count [Number]
+  async def async_click(delay: nil, button: nil, click_count: nil)
+    click(delay: delay, button: button, click_count: click_count)
+  end
 
-  #  /**
-  #   * @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);
-  #  }
+  # @return [Array<String>]
+  def select(*values)
+    if nonstring = values.find { |value| !value.is_a?(String) }
+      raise ArgumentError.new("Values must be strings. Found value \"#{nonstring}\" of type \"#{nonstring.class}\"")
+    end
 
-  #  /**
-  #   * @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);
-  #  }
+    fn = <<~JAVASCRIPT
+    (element, values) => {
+      if (element.nodeName.toLowerCase() !== 'select') {
+        throw new Error('Element is not a <select> element.');
+      }
 
-  #  async tap() {
-  #    await this._scrollIntoViewIfNeeded();
-  #    const {x, y} = await this._clickablePoint();
-  #    await this._page.touchscreen.tap(x, y);
-  #  }
+      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);
+    }
+    JAVASCRIPT
+    evaluate(fn, values)
+  end
+
+  # @param file_paths [Array<String>]
+  def upload_file(*file_paths)
+    is_multiple = evaluate("el => el.multiple")
+    if !is_multiple && file_paths.length >= 2
+      raise ArgumentError.new('Multiple file uploads only work with <input type=file multiple>')
+    end
+
+    if error_path = file_paths.find { |file_path| !File.exist?(file_path) }
+      raise ArgmentError.new("#{error_path} does not exist or is not readable")
+    end
+
+    backend_node_id = @remote_object.node_info(@client)["node"]["backendNodeId"]
+
+    # The zero-length array is a special case, it seems that DOM.setFileInputFiles does
+    # not actually update the files in that case, so the solution is to eval the element
+    # value to a new FileList directly.
+    if file_paths.empty?
+      fn = <<~JAVASCRIPT
+      (element) => {
+        element.files = new DataTransfer().files;
+
+        // Dispatch events for this case because it should behave akin to a user action.
+        element.dispatchEvent(new Event('input', { bubbles: true }));
+        element.dispatchEvent(new Event('change', { bubbles: true }));
+      }
+      JAVASCRIPT
+      await this.evaluate(fn)
+    else
+      @remote_object.set_file_input_files(@client, file_paths, backend_node_id)
+    end
+  end
+
+  def tap(&block)
+    return super(&block) if block
+
+    scroll_into_view_if_needed
+    point = clickable_point
+    @page.touchscreen.tap(point.x, point.y)
+  end
 
+  async def async_tap
+    tap
+  end
 
   def focus
     evaluate('element => element.focus()')
@@ -271,89 +235,77 @@ class Puppeteer::ElementHandle < Puppeteer::JSHandle
     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;
-  #    }
+  # @return [BoundingBox|nil]
+  def bounding_box
+    if_present(box_model) do |result_model|
+      quads = result_model.border
+
+      x = quads.map(&:x).min
+      y = quads.map(&:y).min
+      BoundingBox.new(
+        x: x,
+        y: y,
+        width: quads.map(&:x).max - x,
+        height: quads.map(&:y).max - y,
+      )
+    end
+  end
 
-  #    await this._scrollIntoViewIfNeeded();
+  # @return [BoxModel|nil]
+  def box_model
+    if_present(@remote_object.box_model(@client)) do |result|
+      BoxModel.new(result['model'])
+    end
+  end
 
-  #    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.');
+  def screenshot(options = {})
+    needs_viewport_reset = false
 
-  #    const { layoutViewport: { pageX, pageY } } = await this._client.send('Page.getLayoutMetrics');
+    box = bounding_box
+    unless box
+      raise ElementNotVisibleError.new
+    end
 
-  #    const clip = Object.assign({}, boundingBox);
-  #    clip.x += pageX;
-  #    clip.y += pageY;
+    viewport = @page.viewport
+    if viewport && (box.width > viewport.width || box.height > viewport.height)
+      new_viewport = viewport.merge(
+        width: [viewport.width, box.width.to_i].min,
+        height: [viewport.height, box.height.to_i].min,
+      )
+      @page.viewport = new_viewport
 
-  #    const imageData = await this._page.screenshot(Object.assign({}, {
-  #      clip
-  #    }, options));
+      needs_viewport_reset = true
+    end
+    scroll_into_view_if_needed
 
-  #    if (needsViewportReset)
-  #      await this._page.setViewport(viewport);
+    box = bounding_box
+    unless box
+      raise ElementNotVisibleError.new
+    end
+    if box.width == 0
+      raise 'Node has 0 width.'
+    end
+    if box.height == 0
+      raise 'Node has 0 height.'
+    end
 
-  #    return imageData;
-  #  }
+    layout_metrics = @client.send_message('Page.getLayoutMetrics')
+    page_x = layout_metrics["layoutViewport"]["pageX"]
+    page_y = layout_metrics["layoutViewport"]["pageY"]
+
+    clip = {
+      x: page_x + box.x,
+      y: page_y + box.y,
+      width: box.width,
+      height: box.height,
+    }
+
+    @page.screenshot({ clip: clip }.merge(options))
+  ensure
+    if needs_viewport_reset
+      @page.viewport = viewport
+    end
+  end
 
   # `$()` in JavaScript. $ is not allowed to use as a method name in Ruby.
   # @param selector [String]
@@ -404,47 +356,57 @@ class Puppeteer::ElementHandle < Puppeteer::JSHandle
     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]
+  async def async_Seval(selector, page_function, *args)
+    Seval(selector, page_function, *args)
+  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)
+      '(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;
-  #  }
+  # `$$eval()` in JavaScript. $ is not allowed to use as a method name in Ruby.
+  # @param selector [String]
+  # @param page_function [String]
+  # @return [Object]
+  async def async_SSeval(selector, page_function, *args)
+    SSeval(selector, page_function, *args)
+  end
+
+  # `$x()` in JavaScript. $ is not allowed to use as a method name in Ruby.
+  # @param expression [String]
+  # @return [Array<ElementHandle>]
+  def Sx(expression)
+    fn = <<~JAVASCRIPT
+    (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;
+    }
+    JAVASCRIPT
+    handles = evaluate_handle(fn, expression)
+    properties = handles.properties
+    handles.dispose
+    properties.values.map(&:as_element).compact
+  end
 
   #  /**
   #   * @returns {!Promise<boolean>}