cuprite 0.2.0

data/lib/capybara/cuprite/browser/input.rb

@@ -0,0 +1,123 @@
+module Capybara::Cuprite
+  class Browser
+    module Input
+      def click(node, keys = [], offset = {})
+        x, y, modifiers = prepare_before_click(__method__, node, keys, offset)
+        command("Input.dispatchMouseEvent", type: "mousePressed", modifiers: modifiers, button: "left", x: x, y: y, clickCount: 1)
+        @wait = 0.05 # Potential wait because if network event is triggered then we have to wait until it's over.
+        command("Input.dispatchMouseEvent", type: "mouseReleased", modifiers: modifiers, button: "left", x: x, y: y, clickCount: 1)
+      end
+
+      def right_click(node, keys = [], offset = {})
+        x, y, modifiers = prepare_before_click(__method__, node, keys, offset)
+        command("Input.dispatchMouseEvent", type: "mousePressed", modifiers: modifiers, button: "right", x: x, y: y, clickCount: 1)
+        command("Input.dispatchMouseEvent", type: "mouseReleased", modifiers: modifiers, button: "right", x: x, y: y, clickCount: 1)
+      end
+
+      def double_click(node, keys = [], offset = {})
+        x, y, modifiers = prepare_before_click(__method__, node, keys, offset)
+        command("Input.dispatchMouseEvent", type: "mousePressed", modifiers: modifiers, button: "left", x: x, y: y, clickCount: 2)
+        command("Input.dispatchMouseEvent", type: "mouseReleased", modifiers: modifiers, button: "left", x: x, y: y, clickCount: 2)
+      end
+
+      def click_coordinates(x, y)
+        command("Input.dispatchMouseEvent", type: "mousePressed", button: "left", x: x, y: y, clickCount: 1)
+        @wait = 0.05 # Potential wait because if network event is triggered then we have to wait until it's over.
+        command("Input.dispatchMouseEvent", type: "mouseReleased", button: "left", x: x, y: y, clickCount: 1)
+      end
+
+      def hover(node)
+        evaluate_on(node: node, expr: "_cuprite.scrollIntoViewport(this)")
+        x, y = calculate_quads(node)
+        command("Input.dispatchMouseEvent", type: "mouseMoved", x: x, y: y)
+      end
+
+      def set(node, value)
+        object_id = command("DOM.resolveNode", nodeId: node["nodeId"]).dig("object", "objectId")
+        evaluate("_cuprite.set(arguments[0], arguments[1])", { "objectId" => object_id }, value)
+      end
+
+      def drag(node, other)
+        raise NotImplementedError
+      end
+
+      def drag_by(node, x, y)
+        raise NotImplementedError
+      end
+
+      def select(node, value)
+        evaluate_on(node: node, expr: "_cuprite.select(this, #{value})")
+      end
+
+      def trigger(node, event)
+        options = event.to_s == "click" ? { wait: 0.1 } : {}
+        evaluate_on(node: node, expr: %(_cuprite.trigger(this, "#{event}")), **options)
+      end
+
+      def scroll_to(left, top)
+        raise NotImplementedError
+      end
+
+      def send_keys(node, keys)
+        # value.each_char do |char|
+        #   # Check puppeteer Input.js and USKeyboardLayout.js
+        #   # also send_keys and modifiers from capybara API and unify all that.
+        #   if /\n/.match?(char)
+        #     command("Input.insertText", text: char)
+        #     # command("Input.dispatchKeyEvent", type: "keyDown", code: "Enter", key: "Enter", text: "\r")
+        #     # command("Input.dispatchKeyEvent", type: "keyUp", code: "Enter", key: "Enter")
+        #   else
+        #     command("Input.dispatchKeyEvent", type: "keyDown", text: char)
+        #     command("Input.dispatchKeyEvent", type: "keyUp", text: char)
+        #   end
+        # end
+        # command "send_keys", node, normalize_keys(keys)
+        raise NotImplementedError
+      end
+
+      private
+
+      def prepare_before_click(name, node, keys, offset)
+        evaluate_on(node: node, expr: "_cuprite.scrollIntoViewport(this)")
+        x, y = calculate_quads(node, offset[:x], offset[:y])
+        evaluate_on(node: node, expr: "_cuprite.mouseEventTest(this, '#{name}', #{x}, #{y})")
+
+        click_modifiers = { alt: 1, ctrl: 2, control: 2, meta: 4, command: 4, shift: 8 }
+        modifiers = keys.map { |k| click_modifiers[k.to_sym] }.compact.reduce(0, :|)
+
+        command("Input.dispatchMouseEvent", type: "mouseMoved", x: x, y: y)
+
+        [x, y, modifiers]
+      end
+
+      def calculate_quads(node, offset_x = nil, offset_y = nil)
+        quads = get_content_quads(node)
+        offset_x, offset_y = offset_x.to_i, offset_y.to_i
+
+        if offset_x > 0 || offset_y > 0
+          point = quads.first
+          [point[:x] + offset_x, point[:y] + offset_y]
+        else
+          x, y = quads.inject([0, 0]) do |memo, point|
+            [memo[0] + point[:x],
+             memo[1] + point[:y]]
+          end
+          [x / 4, y / 4]
+        end
+      end
+
+      def get_content_quads(node)
+        result = command("DOM.getContentQuads", nodeId: node["nodeId"])
+        raise "Node is either not visible or not an HTMLElement" if result["quads"].size == 0
+
+        # FIXME: Case when a few quads returned
+        result["quads"].map do |quad|
+          [{x: quad[0], y: quad[1]},
+           {x: quad[2], y: quad[3]},
+           {x: quad[4], y: quad[5]},
+           {x: quad[6], y: quad[7]}]
+        end.first
+      end
+    end
+  end
+end

data/lib/capybara/cuprite/browser/javascripts/index.js

@@ -0,0 +1,407 @@
+class InvalidSelector extends Error {}
+class TimedOutPromise extends Error {}
+class MouseEventFailed extends Error {}
+
+const EVENTS = {
+  FOCUS: ["blur", "focus", "focusin", "focusout"],
+  MOUSE: ["click", "dblclick", "mousedown", "mouseenter", "mouseleave",
+          "mousemove", "mouseover", "mouseout", "mouseup", "contextmenu"],
+  FORM: ["submit"]
+}
+
+class Cuprite {
+  find(method, selector, within = document) {
+    try {
+      let results = [];
+
+      if (method == "xpath") {
+        let xpath = document.evaluate(selector, within, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
+        for (let i = 0; i < xpath.snapshotLength; i++) {
+          results.push(xpath.snapshotItem(i));
+        }
+      } else {
+        results = within.querySelectorAll(selector);
+      }
+
+      return results;
+    } catch (error) {
+      // DOMException.INVALID_EXPRESSION_ERR is undefined, using pure code
+      if (error.code == DOMException.SYNTAX_ERR || error.code == 51) {
+        throw new InvalidSelector;
+      } else {
+        throw error;
+      }
+    }
+  }
+
+  parents(node) {
+    let nodes = [];
+    let parent = node.parentNode;
+    while (parent != document) {
+      nodes.push(parent);
+      parent = parent.parentNode;
+    }
+    return nodes;
+  }
+
+  visibleText(node) {
+    if (this.isVisible(node)) {
+      if (node.nodeName == "TEXTAREA") {
+        return node.textContent;
+      } else {
+        if (node instanceof SVGElement) {
+          return node.textContent;
+        } else {
+          return node.innerText;
+        }
+      }
+    }
+  }
+
+  isVisible(node) {
+    let mapName, style;
+    // if node is area, check visibility of relevant image
+    if (node.tagName === "AREA") {
+      mapName = document.evaluate("./ancestor::map/@name", node, null, XPathResult.STRING_TYPE, null).stringValue;
+      node = document.querySelector(`img[usemap="#${mapName}"]`);
+      if (node == null) {
+        return false;
+      }
+    }
+
+    while (node) {
+      style = window.getComputedStyle(node);
+      if (style.display === "none" || style.visibility === "hidden" || parseFloat(style.opacity) === 0) {
+        return false;
+      }
+      node = node.parentElement;
+    }
+
+    return true;
+  }
+
+
+  isDisabled(node) {
+    let xpath = "parent::optgroup[@disabled] | \
+                 ancestor::select[@disabled] | \
+                 parent::fieldset[@disabled] | \
+                 ancestor::*[not(self::legend) or preceding-sibling::legend][parent::fieldset[@disabled]]";
+
+    return node.disabled || document.evaluate(xpath, node, null, XPathResult.BOOLEAN_TYPE, null).booleanValue;
+  }
+
+  path(node) {
+    let nodes = [node];
+    let parent = node.parentNode;
+    while (parent !== document) {
+      nodes.unshift(parent);
+      parent = parent.parentNode;
+    }
+
+    let selectors = nodes.map(node => {
+      let prevSiblings = [];
+      let xpath = document.evaluate(`./preceding-sibling::${node.tagName}`, node, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
+
+      for (let i = 0; i < xpath.snapshotLength; i++) {
+        prevSiblings.push(xpath.snapshotItem(i));
+      }
+
+      return `${node.tagName}[${(prevSiblings.length + 1)}]`;
+    });
+
+    return `//${selectors.join("/")}`;
+  }
+
+  set(node, value) {
+    if (node.readOnly) return;
+
+    if (node.maxLength >= 0) {
+      value = value.substr(0, node.maxLength);
+    }
+
+    this.trigger(node, "focus");
+    node.value = "";
+
+    if (node.type == "number") {
+      node.value = value
+    } else {
+      for (let i = 0; i < value.length; i++) {
+        let char = value[i];
+        let keyCode = this.characterToKeyCode(char);
+        this.keyupdowned(node, "keydown", keyCode);
+        node.value += char;
+
+        this.keypressed(node, false, false, false, false, char.charCodeAt(0), char.charCodeAt(0));
+        this.keyupdowned(node, "keyup", keyCode);
+      }
+    }
+
+    this.changed(node);
+    this.input(node);
+    this.trigger(node, "blur");
+  }
+
+  input(node) {
+    let event = document.createEvent("HTMLEvents");
+    event.initEvent("input", true, false);
+    node.dispatchEvent(event);
+  }
+
+  keyupdowned(node, eventName, keyCode) {
+    let event = document.createEvent("UIEvents");
+    event.initEvent(eventName, true, true);
+    event.keyCode  = keyCode;
+    event.charCode = 0;
+    node.dispatchEvent(event);
+  }
+
+  keypressed(node, altKey, ctrlKey, shiftKey, metaKey, keyCode, charCode) {
+    event = document.createEvent("UIEvents");
+    event.initEvent("keypress", true, true);
+    event.window   = window;
+    event.altKey   = altKey;
+    event.ctrlKey  = ctrlKey;
+    event.shiftKey = shiftKey;
+    event.metaKey  = metaKey;
+    event.keyCode  = keyCode;
+    event.charCode = charCode;
+    node.dispatchEvent(event);
+  }
+
+  characterToKeyCode(char) {
+    const specialKeys = {
+      96: 192,  // `
+      45: 189,  // -
+      61: 187,  // =
+      91: 219,  // [
+      93: 221,  // ]
+      92: 220,  // \
+      59: 186,  // ;
+      39: 222,  // '
+      44: 188,  // ,
+      46: 190,  // .
+      47: 191,  // /
+      127: 46,  // delete
+      126: 192, // ~
+      33: 49,   // !
+      64: 50,   // @
+      35: 51,   // #
+      36: 52,   // $
+      37: 53,   // %
+      94: 54,   // ^
+      38: 55,   // &
+      42: 56,   // *
+      40: 57,   // (
+      41: 48,   // )
+      95: 189,  // _
+      43: 187,  // +
+      123: 219, // {
+      125: 221, // }
+      124: 220, // |
+      58: 186,  // :
+      34: 222,  // "
+      60: 188,  // <
+      62: 190,  // >
+      63: 191,  // ?
+    }
+
+    let code = char.toUpperCase().charCodeAt(0);
+    return specialKeys[code] || code;
+  }
+
+  scrollIntoViewport(node) {
+    let areaImage = this._getAreaImage(node);
+
+    if (areaImage) {
+      return this.scrollIntoViewport(areaImage);
+    } else {
+      node.scrollIntoViewIfNeeded();
+
+      if (!this._isInViewport(node)) {
+        node.scrollIntoView({block: "center", inline: "center", behavior: "instant"});
+        return this._isInViewport(node);
+      }
+
+      return true;
+    }
+  }
+
+  mouseEventTest(node, name, x, y) {
+    let frameOffset = this._frameOffset();
+    x -= frameOffset.left;
+    y -= frameOffset.top;
+
+    let element = document.elementFromPoint(x, y);
+
+    let el = element;
+    while (el) {
+      if (el == node) {
+        return true;
+      } else {
+        el = el.parentNode;
+      }
+    }
+
+    let selector = element && this._getSelector(element) || "none";
+    throw new MouseEventFailed([name, selector, x, y].join(", "));
+  }
+
+  _getAreaImage(node) {
+    if ("area" == node.tagName.toLowerCase()) {
+      let map = node.parentNode;
+      if (map.tagName.toLowerCase() != "map") {
+        throw new Error("the area is not within a map");
+      }
+
+      let mapName = map.getAttribute("name");
+      if (typeof mapName === "undefined" || mapName === null) {
+        throw new Error("area's parent map must have a name");
+      }
+
+      mapName = `#${mapName.toLowerCase()}`;
+      let imageNode = this.find("css", `img[usemap='${mapName}']`)[0];
+      if (typeof imageNode === "undefined" || imageNode === null) {
+        throw new Error("no image matches the map");
+      }
+
+      return imageNode;
+    }
+  }
+
+  _frameOffset() {
+    let win = window;
+    let offset = { top: 0, left: 0 };
+
+    while (win.frameElement) {
+      let rect = win.frameElement.getClientRects()[0];
+      let style = win.getComputedStyle(win.frameElement);
+      win = win.parent;
+
+      offset.top += rect.top + parseInt(style.getPropertyValue("padding-top"), 10)
+      offset.left += rect.left + parseInt(style.getPropertyValue("padding-left"), 10)
+    }
+
+    return offset;
+  }
+
+  _getSelector(el) {
+    let selector = (el.tagName != 'HTML') ? this._getSelector(el.parentNode) + " " : "";
+    selector += el.tagName.toLowerCase();
+    if (el.id) { selector += `#${el.id}` };
+    el.classList.forEach(c => selector += `.${c}`);
+    return selector;
+  }
+
+  _isInViewport(node) {
+    let rect = node.getBoundingClientRect();
+    return rect.top >= 0 &&
+           rect.left >= 0 &&
+           rect.bottom <= window.innerHeight &&
+           rect.right <= window.innerWidth;
+  }
+
+  select(node, value) {
+    if (this.isDisabled(node)) {
+      return false;
+    } else if (value == false && !node.parentNode.multiple) {
+      return false;
+    } else {
+      this.trigger(node.parentNode, "focus");
+
+      node.selected = value;
+      this.changed(node);
+
+      this.trigger(node.parentNode, "blur");
+      return true;
+    }
+  }
+
+  changed(node) {
+    let element;
+    let event = document.createEvent("HTMLEvents");
+    event.initEvent("change", true, false);
+
+    // In the case of an OPTION tag, the change event should come
+    // from the parent SELECT
+    if (node.nodeName == "OPTION") {
+      element = node.parentNode
+      if (element.nodeName == "OPTGROUP") {
+        element = element.parentNode
+      }
+      element
+    } else {
+      element = node
+    }
+
+    element.dispatchEvent(event)
+  }
+
+  trigger(node, name, options = {}) {
+    let event;
+
+    if (EVENTS.MOUSE.indexOf(name) != -1) {
+      event = document.createEvent("MouseEvent");
+      event.initMouseEvent(
+        name, true, true, window, 0,
+        options["screenX"] || 0, options["screenY"] || 0,
+        options["clientX"] || 0, options["clientY"] || 0,
+        options["ctrlKey"] || false,
+        options["altKey"] || false,
+        options["shiftKey"] || false,
+        options["metaKey"] || false,
+        options["button"] || 0, null
+      )
+    } else if (EVENTS.FOCUS.indexOf(name) != -1) {
+      event = this.obtainEvent(name);
+    } else if (EVENTS.FORM.indexOf(name) != -1) {
+      event = this.obtainEvent(name);
+    } else {
+      throw "Unknown event";
+    }
+
+    node.dispatchEvent(event);
+  }
+
+  obtainEvent(name) {
+    let event = document.createEvent("HTMLEvents");
+    event.initEvent(name, true, true);
+    return event;
+  }
+
+  getAttributes(node) {
+    let attrs = {};
+    for (let i = 0, len = node.attributes.length; i < len; i++) {
+      let attr = node.attributes[i];
+      attrs[attr.name] = attr.value.replace("\n", "\\n");
+    }
+
+    return JSON.stringify(attrs);
+  }
+
+  getAttribute(node, name) {
+    if (name == "checked" || name == "selected") {
+      return node[name];
+    } else {
+      return node.getAttribute(name);
+    }
+  }
+
+  value(node) {
+    if (node.tagName == "SELECT" && node.multiple) {
+      let result = []
+
+      for (let i = 0, len = node.children.length; i < len; i++) {
+        let option = node.children[i];
+        if (option.selected) {
+          result.push(option.value);
+        }
+      }
+
+      return result;
+    } else {
+      return node.value;
+    }
+  }
+}
+
+window._cuprite = new Cuprite;