puppeteer-ruby 0.0.3 → 0.0.8

data/lib/puppeteer/element_handle.rb

@@ -1,3 +1,5 @@
+require 'mime/types'
+
 class Puppeteer::ElementHandle < Puppeteer::JSHandle
   include Puppeteer::IfPresent
   using Puppeteer::AsyncAwaitBehavior
@@ -28,62 +30,80 @@ class Puppeteer::ElementHandle < Puppeteer::JSHandle
     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);
-  #  }
+  class ScrollIntoViewError < StandardError; end
+
+  def scroll_into_view_if_needed
+    js = <<~JAVASCRIPT
+      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';
+
+        element.scrollIntoViewIfNeeded({block: 'center', inline: 'center', behavior: 'instant'});
+        return false;
+      }
+    JAVASCRIPT
+    error = evaluate(js, @page.javascript_enabled) # returns String or false
+    if error
+      raise ScrollIntoViewError.new(error)
+    end
+    # clickpoint is often calculated before scrolling is completed.
+    # So, just sleep about 10 frames
+    sleep 0.16
+  end
 
-  #  /**
-  #   * @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
-  #    };
-  #  }
+  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
+  end
+
+  class ElementNotVisibleError < StandardError
+    def initialize
+      super("Node is either not visible or not an HTMLElement")
+    end
+  end
+
+  def clickable_point
+    result = @remote_object.content_quads(@client)
+    if !result || result["quads"].empty?
+      raise ElementNotVisibleError.new
+    end
+
+    # Filter out quads that have too small area to click into.
+    layout_metrics = @client.send_message('Page.getLayoutMetrics')
+    client_width = layout_metrics["layoutViewport"]["clientWidth"]
+    client_height = layout_metrics["layoutViewport"]["clientHeight"]
+
+    quads = result["quads"].
+              map { |quad| from_protocol_quad(quad) }.
+              map { |quad| intersect_quad_with_viewport(quad, client_width, client_height) }.
+              select { |quad| compute_quad_area(quad) > 1 }
+    if quads.empty?
+      raise ElementNotVisibleError.new
+    end
+
+    # Return the middle point of the first quad.
+    quads.first.reduce(:+) / 4
+  end
 
   #  /**
   #   * @return {!Promise<void|Protocol.DOM.getBoxModelReturnValue>}
@@ -94,31 +114,26 @@ class Puppeteer::ElementHandle < Puppeteer::JSHandle
   #    }).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 quad [Array<number>]
+  # @return [Array<Point>]
+  private def from_protocol_quad(quad)
+    quad.each_slice(2).map do |x, y|
+      Point.new(x: x, y: y)
+    end
+  end
 
-  #  /**
-  #   * @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),
-  #    }));
-  #  }
+  # @param quad [Array<Point>]
+  # @param width [number]
+  # @param height [number]
+  # @return [Array<Point>]
+  private def intersect_quad_with_viewport(quad, width, height)
+    quad.map do |point|
+      Point.new(
+        x: [[point.x, 0].max, width].min,
+        y: [[point.y, 0].max, height].min,
+      )
+    end
+  end
 
   #  async hover() {
   #    await this._scrollIntoViewIfNeeded();
@@ -126,83 +141,93 @@ class Puppeteer::ElementHandle < Puppeteer::JSHandle
   #    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 delay [Number]
+  # @param button [String] "left"|"right"|"middle"
+  # @param click_count [Number]
+  def click(delay: nil, button: nil, click_count: nil)
+    scroll_into_view_if_needed
+    point = clickable_point
+    @page.mouse.click(point.x, point.y, 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);
-  #  }
+  # @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>} 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);
-  #  }
+  # @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
 
-  #  async tap() {
-  #    await this._scrollIntoViewIfNeeded();
-  #    const {x, y} = await this._clickablePoint();
-  #    await this._page.touchscreen.tap(x, y);
-  #  }
+    fn = <<~JAVASCRIPT
+    (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);
+    }
+    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()')
@@ -373,47 +398,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>}
@@ -430,4 +465,11 @@ class Puppeteer::ElementHandle < Puppeteer::JSHandle
   #      return visibleRatio > 0;
   #    });
   #  }
+
+  # @param quad [Array<Point>]
+  private def compute_quad_area(quad)
+    # Compute sum of all directed areas of adjacent triangles
+    # https://en.wikipedia.org/wiki/Polygon#Simple_polygons
+    quad.zip(quad.rotate).map { |p1, p2| (p1.x * p2.y - p2.x * p1.y) / 2 }.reduce(:+).abs
+  end
 end