apparition 0.0.1 → 0.0.2

data/lib/capybara/apparition/keyboard.rb

@@ -16,8 +16,7 @@ module Capybara::Apparition
 
     def press(key)
       if key.is_a? Symbol
-        orig_key = key
-        key = key.to_s.gsub(/([a-z\d])([A-Z])/, '\1_\2').downcase.to_sym
+        orig_key, key = key, key.to_s.gsub(/([a-z\d])([A-Z])/, '\1_\2').downcase.to_sym
         warn "The use of :#{orig_key} is deprecated, please use :#{key} instead" unless key == orig_key
       end
       description = key_description(key)
@@ -55,9 +54,8 @@ module Capybara::Apparition
                     location: description.location)
     end
 
-    def yield_with_keys(keys = [])
-      old_pressed_keys = @pressed_keys
-      @pressed_keys = {}
+    def with_keys(keys = [])
+      old_pressed_keys, @pressed_keys = @pressed_keys, {}
       keys.each do |key|
         press key
       end
@@ -69,17 +67,13 @@ module Capybara::Apparition
   private
 
     def type_with_modifiers(keys)
-      keys = Array(keys)
-      old_pressed_keys = @pressed_keys
-      @pressed_keys = {}
+      old_pressed_keys, @pressed_keys = @pressed_keys, {}
 
-      keys.each do |sequence|
-        if sequence.is_a? Array
-          type_with_modifiers(sequence)
-        elsif sequence.is_a? String
-          sequence.each_char { |char| press char }
-        else
-          press sequence
+      Array(keys).each do |sequence|
+        case sequence
+        when Array then type_with_modifiers(sequence)
+        when String then sequence.each_char { |char| press char }
+        else press sequence
         end
       end
 
@@ -94,7 +88,7 @@ module Capybara::Apparition
     end
 
     def key_description(key)
-      shift = (@modifiers & 8).nonzero?
+      shift = (@modifiers & modifier_bit('Shift')).nonzero?
       description = OpenStruct.new(
         key: '',
         keyCode: 0,
@@ -123,20 +117,14 @@ module Capybara::Apparition
       description.text = definition.shiftText if shift && definition.shiftText
 
       # if any modifiers besides shift are pressed, no text should be sent
-      description.text = '' if (@modifiers & ~8).nonzero?
+      description.text = '' if (@modifiers & ~modifier_bit('Shift')).nonzero?
 
       description
     end
 
+    MODIFIERS = { 'Alt' => 1, 'Control' => 2, 'Meta' => 4, 'Shift' => 8 }.tap { |h| h.default = 0 }
     def modifier_bit(key)
-      case key
-      when 'Alt' then 1
-      when 'Control' then 2
-      when 'Meta' then 4
-      when 'Shift' then 8
-      else
-        0
-      end
+      MODIFIERS[key]
     end
 
     # /**
@@ -151,7 +139,6 @@ module Capybara::Apparition
     #  * @property {number=} location
     #  */
 
-    # rubocop:disable Metrics/LineLength
     KEY_DEFINITIONS = {
       '0': { 'keyCode': 48, 'key': '0', 'code': 'Digit0' },
       '1': { 'keyCode': 49, 'key': '1', 'code': 'Digit1' },
@@ -163,14 +150,43 @@ module Capybara::Apparition
       '7': { 'keyCode': 55, 'key': '7', 'code': 'Digit7' },
       '8': { 'keyCode': 56, 'key': '8', 'code': 'Digit8' },
       '9': { 'keyCode': 57, 'key': '9', 'code': 'Digit9' },
+      # 'numpad0': { 'keyCode': 45, 'shiftKeyCode': 96, 'key': 'Insert', 'code': 'Numpad0', 'shiftKey': '0', 'location': 3 },
+      # 'numpad1': { 'keyCode': 35, 'shiftKeyCode': 97, 'key': 'End', 'code': 'Numpad1', 'shiftKey': '1', 'location': 3 },
+      # 'numpad2': { 'keyCode': 40, 'shiftKeyCode': 98, 'key': 'ArrowDown', 'code': 'Numpad2', 'shiftKey': '2', 'location': 3 },
+      # 'numpad3': { 'keyCode': 34, 'shiftKeyCode': 99, 'key': 'PageDown', 'code': 'Numpad3', 'shiftKey': '3', 'location': 3 },
+      # 'numpad4': { 'keyCode': 37, 'shiftKeyCode': 100, 'key': 'ArrowLeft', 'code': 'Numpad4', 'shiftKey': '4', 'location': 3 },
+      # 'numpad5': { 'keyCode': 12, 'shiftKeyCode': 101, 'key': 'Clear', 'code': 'Numpad5', 'shiftKey': '5', 'location': 3 },
+      # 'numpad6': { 'keyCode': 39, 'shiftKeyCode': 102, 'key': 'ArrowRight', 'code': 'Numpad6', 'shiftKey': '6', 'location': 3 },
+      # 'numpad7': { 'keyCode': 36, 'shiftKeyCode': 103, 'key': 'Home', 'code': 'Numpad7', 'shiftKey': '7', 'location': 3 },
+      # 'numpad8': { 'keyCode': 38, 'shiftKeyCode': 104, 'key': 'ArrowUp', 'code': 'Numpad8', 'shiftKey': '8', 'location': 3 },
+      # 'numpad9': { 'keyCode': 33, 'shiftKeyCode': 105, 'key': 'PageUp', 'code': 'Numpad9', 'shiftKey': '9', 'location': 3 },
+      # 'multiply': { 'keyCode': 106, 'code': 'NumpadMultiply', 'key': '*', 'location': 3 },
+      # 'add': { 'keyCode': 107, 'code': 'NumpadAdd', 'key': '+', 'location': 3 },
+      # 'subtract': { 'keyCode': 109, 'code': 'NumpadSubtract', 'key': '-', 'location': 3 },
+      # 'divide': { 'keyCode': 111, 'code': 'NumpadDivide', 'key': '/', 'location': 3 },
+      # 'decimal': { 'keyCode': 46, 'shiftKeyCode': 110, 'code': 'NumpadDecimal', 'key': "\u0000", 'shiftKey': '.', 'location': 3 },
+      'numpad0': { 'keyCode': 96, 'code': 'Numpad0', 'key': '0', 'location': 3 },
+      'numpad1': { 'keyCode': 97, 'code': 'Numpad1', 'key': '1', 'location': 3 },
+      'numpad2': { 'keyCode': 98, 'code': 'Numpad2', 'key': '2', 'location': 3 },
+      'numpad3': { 'keyCode': 99, 'code': 'Numpad3', 'key': '3', 'location': 3 },
+      'numpad4': { 'keyCode': 100, 'code': 'Numpad4', 'key': '4', 'location': 3 },
+      'numpad5': { 'keyCode': 101, 'code': 'Numpad5', 'key': '5', 'location': 3 },
+      'numpad6': { 'keyCode': 102, 'code': 'Numpad6', 'key': '6', 'location': 3 },
+      'numpad7': { 'keyCode': 103, 'code': 'Numpad7', 'key': '7', 'location': 3 },
+      'numpad8': { 'keyCode': 104, 'code': 'Numpad8', 'key': '8', 'location': 3 },
+      'numpad9': { 'keyCode': 104, 'code': 'Numpad9', 'key': '9', 'location': 3 },
+      'multiply': { 'keyCode': 106, 'code': 'NumpadMultiply', 'key': '*', 'location': 3 },
+      'add': { 'keyCode': 107, 'code': 'NumpadAdd', 'key': '+', 'location': 3 },
+      'subtract': { 'keyCode': 109, 'code': 'NumpadSubtract', 'key': '-', 'location': 3 },
+      'decimal': { 'keyCode': 110, 'code': 'NumpadDecimal', 'key': '.', 'location': 3 },
+      'divide': { 'keyCode': 111, 'code': 'NumpadDivide', 'key': '/', 'location': 3 },
+      'numpad_enter': { 'keyCode': 13, 'code': 'NumpadEnter', 'key': 'Enter', 'text': "\r", 'location': 3 },
       'power': { 'key': 'Power', 'code': 'Power' },
       'eject': { 'key': 'Eject', 'code': 'Eject' },
       'abort': { 'keyCode': 3, 'code': 'Abort', 'key': 'Cancel' },
       'help': { 'keyCode': 6, 'code': 'Help', 'key': 'Help' },
       'backspace': { 'keyCode': 8, 'code': 'Backspace', 'key': 'Backspace' },
       'tab': { 'keyCode': 9, 'code': 'Tab', 'key': 'Tab' },
-      'numpad5': { 'keyCode': 12, 'shiftKeyCode': 101, 'key': 'Clear', 'code': 'Numpad5', 'shiftKey': '5', 'location': 3 },
-      'numpad_enter': { 'keyCode': 13, 'code': 'NumpadEnter', 'key': 'Enter', 'text': "\r", 'location': 3 },
       'enter': { 'keyCode': 13, 'code': 'Enter', 'key': 'Enter', 'text': "\r" },
       "\r": { 'keyCode': 13, 'code': 'Enter', 'key': 'Enter', 'text': "\r" },
       "\n": { 'keyCode': 13, 'code': 'Enter', 'key': 'Enter', 'text': "\r" },
@@ -186,29 +202,19 @@ module Capybara::Apparition
       'convert': { 'keyCode': 28, 'code': 'Convert', 'key': 'Convert' },
       'non_convert': { 'keyCode': 29, 'code': 'NonConvert', 'key': 'NonConvert' },
       'space': { 'keyCode': 32, 'code': 'Space', 'key': ' ' },
-      'numpad9': { 'keyCode': 33, 'shiftKeyCode': 105, 'key': 'PageUp', 'code': 'Numpad9', 'shiftKey': '9', 'location': 3 },
       'page_up': { 'keyCode': 33, 'code': 'PageUp', 'key': 'PageUp' },
-      'numpad3': { 'keyCode': 34, 'shiftKeyCode': 99, 'key': 'PageDown', 'code': 'Numpad3', 'shiftKey': '3', 'location': 3 },
       'page_down': { 'keyCode': 34, 'code': 'PageDown', 'key': 'PageDown' },
       'end': { 'keyCode': 35, 'code': 'End', 'key': 'End' },
-      'numpad1': { 'keyCode': 35, 'shiftKeyCode': 97, 'key': 'End', 'code': 'Numpad1', 'shiftKey': '1', 'location': 3 },
       'home': { 'keyCode': 36, 'code': 'Home', 'key': 'Home' },
-      'numpad7': { 'keyCode': 36, 'shiftKeyCode': 103, 'key': 'Home', 'code': 'Numpad7', 'shiftKey': '7', 'location': 3 },
       'left': { 'keyCode': 37, 'code': 'ArrowLeft', 'key': 'ArrowLeft' },
-      'numpad4': { 'keyCode': 37, 'shiftKeyCode': 100, 'key': 'ArrowLeft', 'code': 'Numpad4', 'shiftKey': '4', 'location': 3 },
-      'numpad8': { 'keyCode': 38, 'shiftKeyCode': 104, 'key': 'ArrowUp', 'code': 'Numpad8', 'shiftKey': '8', 'location': 3 },
       'up': { 'keyCode': 38, 'code': 'ArrowUp', 'key': 'ArrowUp' },
       'right': { 'keyCode': 39, 'code': 'ArrowRight', 'key': 'ArrowRight' },
-      'numpad6': { 'keyCode': 39, 'shiftKeyCode': 102, 'key': 'ArrowRight', 'code': 'Numpad6', 'shiftKey': '6', 'location': 3 },
-      'numpad2': { 'keyCode': 40, 'shiftKeyCode': 98, 'key': 'ArrowDown', 'code': 'Numpad2', 'shiftKey': '2', 'location': 3 },
       'down': { 'keyCode': 40, 'code': 'ArrowDown', 'key': 'ArrowDown' },
       'select': { 'keyCode': 41, 'code': 'Select', 'key': 'Select' },
       'open': { 'keyCode': 43, 'code': 'Open', 'key': 'Execute' },
       'print_screen': { 'keyCode': 44, 'code': 'PrintScreen', 'key': 'PrintScreen' },
       'insert': { 'keyCode': 45, 'code': 'Insert', 'key': 'Insert' },
-      'numpad0': { 'keyCode': 45, 'shiftKeyCode': 96, 'key': 'Insert', 'code': 'Numpad0', 'shiftKey': '0', 'location': 3 },
       'delete': { 'keyCode': 46, 'code': 'Delete', 'key': 'Delete' },
-      'decimal': { 'keyCode': 46, 'shiftKeyCode': 110, 'code': 'NumpadDecimal', 'key': "\u0000", 'shiftKey': '.', 'location': 3 },
       'digit0': { 'keyCode': 48, 'code': 'Digit0', 'shiftKey': ')', 'key': '0' },
       'digit1': { 'keyCode': 49, 'code': 'Digit1', 'shiftKey': '!', 'key': '1' },
       'digit2': { 'keyCode': 50, 'code': 'Digit2', 'shiftKey': '@', 'key': '2' },
@@ -222,10 +228,6 @@ module Capybara::Apparition
       'meta_left': { 'keyCode': 91, 'code': 'MetaLeft', 'key': 'Meta' },
       'meta_right': { 'keyCode': 92, 'code': 'MetaRight', 'key': 'Meta' },
       'context_menu': { 'keyCode': 93, 'code': 'ContextMenu', 'key': 'ContextMenu' },
-      'multiply': { 'keyCode': 106, 'code': 'NumpadMultiply', 'key': '*', 'location': 3 },
-      'add': { 'keyCode': 107, 'code': 'NumpadAdd', 'key': '+', 'location': 3 },
-      'subtract': { 'keyCode': 109, 'code': 'NumpadSubtract', 'key': '-', 'location': 3 },
-      'divide': { 'keyCode': 111, 'code': 'NumpadDivide', 'key': '/', 'location': 3 },
       'F1': { 'keyCode': 112, 'code': 'F1', 'key': 'F1' },
       'f2': { 'keyCode': 113, 'code': 'F2', 'key': 'F2' },
       'f3': { 'keyCode': 114, 'code': 'F3', 'key': 'F3' },
@@ -378,6 +380,5 @@ module Capybara::Apparition
       '}': { 'keyCode': 221, 'key': '}', 'code': 'BracketRight' },
       '"': { 'keyCode': 222, 'key': '"', 'code': 'Quote' }
     }.freeze
-    # rubocop:enable Metrics/LineLength
   end
 end

data/lib/capybara/apparition/launcher.rb

@@ -5,47 +5,48 @@ module Capybara::Apparition
     class Launcher
       KILL_TIMEOUT = 2
 
-      BROWSER_HOST = '127.0.0.1'
-      BROWSER_PORT = '0'
-
       # Chromium command line options
       # https://peter.sh/experiments/chromium-command-line-switches/
-      DEFAULT_OPTIONS = {
-        'disable-background-networking' => nil,
-        'disable-background-timer-throttling' => nil,
-        'disable-breakpad' => nil,
-        'disable-client-side-phishing-detection' => nil,
-        'disable-default-apps' => nil,
-        'disable-dev-shm-usage' => nil,
-        'disable-extensions' => nil,
-        'disable-features=site-per-process' => nil,
-        'disable-hang-monitor' => nil,
-        'disable-popup-blocking' => nil,
-        'disable-prompt-on-repost' => nil,
-        'disable-sync' => nil,
-        'disable-translate' => nil,
-        'metrics-recording-only' => nil,
-        'no-first-run' => nil,
-        'safebrowsing-disable-auto-update' => nil,
-        'enable-automation' => nil,
-        'password-store=basic' => nil,
-        'use-mock-keychain' => nil,
-        'keep-alive-for-test' => nil,
+      DEFAULT_BOOLEAN_OPTIONS = %w[
+        disable-background-networking
+        disable-background-timer-throttling
+        disable-breakpad
+        disable-client-side-phishing-detection
+        disable-default-apps
+        disable-dev-shm-usage
+        disable-extensions
+        disable-features=site-per-process
+        disable-hang-monitor
+        disable-infobars
+        disable-popup-blocking
+        disable-prompt-on-repost
+        disable-sync
+        disable-translate
+        metrics-recording-only
+        no-first-run
+        safebrowsing-disable-auto-update
+        enable-automation
+        password-store=basic
+        use-mock-keychain
+        keep-alive-for-test
+      ].freeze
+      # Note: --no-sandbox is not needed if you properly setup a user in the container.
+      # https://github.com/ebidel/lighthouse-ci/blob/master/builder/Dockerfile#L35-L40
+      # no-sandbox
+      # disable-web-security
+      DEFAULT_VALUE_OPTIONS = {
         'window-size' => '1024,768',
         'homepage' => 'about:blank',
-        # Note: --no-sandbox is not needed if you properly setup a user in the container.
-        # https://github.com/ebidel/lighthouse-ci/blob/master/builder/Dockerfile#L35-L40
-        # "no-sandbox" => nil,
-        # "disable-web-security" => nil,
-        'remote-debugging-port' => BROWSER_PORT,
-        'remote-debugging-address' => BROWSER_HOST
+        'remote-debugging-address' => '127.0.0.1'
       }.freeze
-
+      DEFAULT_OPTIONS = DEFAULT_BOOLEAN_OPTIONS.each_with_object({}) { |opt, hsh| hsh[opt] = nil }
+                                               .merge(DEFAULT_VALUE_OPTIONS)
+                                               .freeze
       HEADLESS_OPTIONS = {
         'headless' => nil,
         'hide-scrollbars' => nil,
         'mute-audio' => nil
-      }
+      }.freeze
 
       def self.start(*args)
         new(*args).tap(&:start)
@@ -58,10 +59,10 @@ module Capybara::Apparition
               ::Process.kill('KILL', pid)
             else
               ::Process.kill('TERM', pid)
-              start = Time.now
+              timer = Capybara::Helpers.timer(expire_in: KILL_TIMEOUT)
               while ::Process.wait(pid, ::Process::WNOHANG).nil?
                 sleep 0.05
-                next unless (Time.now - start) > KILL_TIMEOUT
+                next unless timer.expired?
 
                 ::Process.kill('KILL', pid)
                 ::Process.wait(pid)
@@ -102,8 +103,6 @@ module Capybara::Apparition
           @pid = ::Process.spawn(*cmd, process_options)
           ObjectSpace.define_finalizer(self, self.class.process_killer(@pid))
         end
-
-        sleep 3
       end
 
       def stop

data/lib/capybara/apparition/mouse.rb

@@ -5,38 +5,42 @@ module Capybara::Apparition
     def initialize(page, keyboard)
       @page = page
       @keyboard = keyboard
+      @current_pos = { x: 0, y: 0 }
     end
 
     def click_at(x:, y:, button: 'left', count: 1, modifiers: [])
-      move_to(x: x, y: y)
-      @keyboard.yield_with_keys(modifiers) do
-        down(x: x, y: y, button: button, count: count)
-        up(x: x, y: y, button: button, count: count)
+      move_to x: x, y: y
+      @keyboard.with_keys(modifiers) do
+        mouse_params = { x: x, y: y, button: button, count: count }
+        down mouse_params
+        up mouse_params
       end
+      self
     end
 
-    def move_to(x:, y:, button: 'none')
-      @page.command('Input.dispatchMouseEvent',
-                    type: 'mouseMoved',
-                    button: button,
-                    x: x,
-                    y: y,
-                    modifiers: @keyboard.modifiers)
+    def move_to(x:, y:, **options)
+      @current_pos = { x: x, y: y }
+      mouse_event('mouseMoved', x: x, y: y, **options)
+      self
     end
 
-    def down(x:, y:, button: 'left', count: 1)
-      @page.command('Input.dispatchMouseEvent',
-                    type: 'mousePressed',
-                    button: button,
-                    x: x,
-                    y: y,
-                    modifiers: @keyboard.modifiers,
-                    clickCount: count)
+    def down(**options)
+      options = @current_pos.merge(options)
+      mouse_event('mousePressed', options)
+      self
     end
 
-    def up(x:, y:, button: 'left', count: 1)
+    def up(**options)
+      options = @current_pos.merge(options)
+      mouse_event('mouseReleased', options)
+      self
+    end
+
+  private
+
+    def mouse_event(type, x:, y:, button: 'left', count: 1)
       @page.command('Input.dispatchMouseEvent',
-                    type: 'mouseReleased',
+                    type: type,
                     button: button,
                     x: x,
                     y: y,

data/lib/capybara/apparition/node.rb

@@ -1,8 +1,13 @@
 # frozen_string_literal: true
 
 require 'ostruct'
+require 'capybara/apparition/node/drag'
+
 module Capybara::Apparition
   class Node < Capybara::Driver::Node
+    include Drag
+    extend Forwardable
+
     attr_reader :page_id
 
     def initialize(driver, page, remote_object)
@@ -11,39 +16,21 @@ module Capybara::Apparition
       @remote_object = remote_object
     end
 
+    delegate browser: :driver
+
     def id
       @remote_object
     end
 
-    def browser
-      driver.browser
-    end
-
     def parents
       find('xpath', 'ancestor::*').reverse
     end
 
     def find(method, selector)
-      results = if method == :css
-        evaluate_on <<~JS, value: selector
-          function(selector){
-            return Array.from(this.querySelectorAll(selector));
-          }
-        JS
-      else
-        evaluate_on <<~JS, value: selector
-          function(selector){
-            const xpath = document.evaluate(selector, this, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
-            let results = [];
-            for (let i=0; i < xpath.snapshotLength; i++){
-              results.push(xpath.snapshotItem(i));
-            }
-            return results;
-          }
-        JS
+      js = method == :css ? FIND_CSS_JS : FIND_XPATH_JS
+      evaluate_on(js, value: selector).map do |r_o|
+        Capybara::Apparition::Node.new(driver, @page, r_o['objectId'])
       end
-
-      results.map { |r_o| Capybara::Apparition::Node.new(driver, @page, r_o['objectId']) }
     rescue ::Capybara::Apparition::BrowserError => e
       raise unless e.name =~ /is not a valid (XPath expression|selector)/
 
@@ -70,17 +57,7 @@ module Capybara::Apparition
     def visible_text
       return '' unless visible?
 
-      text = evaluate_on <<~JS
-        function(){
-          if (this.nodeName == 'TEXTAREA'){
-            return this.textContent;
-          } else if (this instanceof SVGElement) {
-            return this.textContent;
-          } else {
-            return this.innerText;
-          }
-        }
-      JS
+      text = evaluate_on ELEMENT_VISIBLE_TEXT_JS
       text.to_s.gsub(/\A[[:space:]&&[^\u00a0]]+/, '')
           .gsub(/[[:space:]&&[^\u00a0]]+\z/, '')
           .gsub(/\n+/, "\n")
@@ -102,44 +79,24 @@ module Capybara::Apparition
     def [](name)
       # Although the attribute matters, the property is consistent. Return that in
       # preference to the attribute for links and images.
-      if ((tag_name == 'img') && (name == 'src')) || ((tag_name == 'a') && (name == 'href'))
-        # if attribute exists get the property
-        return attribute(name) && property(name)
-      end
-
-      value = property(name)
-      value = attribute(name) if value.nil? || value.is_a?(Hash)
-
-      value
+      return evaluate_on ELEMENT_PROP_OR_ATTR_JS, value: name
+      # if ((tag_name == 'img') && (name == 'src')) || ((tag_name == 'a') && (name == 'href'))
+      #   # if attribute exists get the property
+      #   return attribute(name) && property(name)
+      # end
+      #
+      # value = property(name)
+      # value = attribute(name) if value.nil? || value.is_a?(Hash)
+      #
+      # value
     end
 
     def attributes
-      evaluate_on <<~JS
-        function(){
-          let attrs = {};
-          for (let attr of this.attributes)
-            attrs[attr.name] = attr.value.replace("\\n","\\\\n");
-          return attrs;
-        }
-      JS
+      evaluate_on GET_ATTRIBUTES_JS
     end
 
     def value
-      evaluate_on <<~JS
-        function(){
-          if ((this.tagName == 'SELECT') && this.multiple){
-            let selected = [];
-            for (let option of this.children) {
-              if (option.selected) {
-                selected.push(option.value);
-              }
-            }
-            return selected;
-          } else {
-            return this.value;
-          }
-        }
-      JS
+      evaluate_on GET_VALUE_JS
     end
 
     def set(value, **_options)
@@ -172,44 +129,15 @@ module Capybara::Apparition
     def select_option
       return false if disabled?
 
-      evaluate_on <<~JS
-        function(){
-          let sel = this.parentNode;
-          if (sel.tagName == 'OPTGROUP'){
-            sel = sel.parentNode;
-          }
-          let event_options = { bubbles: true, cancelable: true };
-          sel.dispatchEvent(new FocusEvent('focus', event_options));
-
-          this.selected = true
-
-          sel.dispatchEvent(new Event('change', event_options));
-          sel.dispatchEvent(new FocusEvent('blur', event_options));
-
-        }
-      JS
+      evaluate_on SELECT_OPTION_JS
       true
     end
 
     def unselect_option
       return false if disabled?
 
-      res = evaluate_on <<~JS
-        function(){
-          let sel = this.parentNode;
-          if (sel.tagName == 'OPTGROUP') {
-            sel = sel.parentNode;
-          }
-
-          if (!sel.multiple){
-            return false;
-          }
-
-          this.selected = false;
-          return true;
-        }
-      JS
-      res || raise(Capybara::UnselectNotAllowed, 'Cannot unselect option from single select box.')
+      evaluate_on(UNSELECT_OPTION_JS) ||
+        raise(Capybara::UnselectNotAllowed, 'Cannot unselect option from single select box.')
     end
 
     def tag_name
@@ -217,30 +145,7 @@ module Capybara::Apparition
     end
 
     def visible?
-      # if an area element, check visibility of relevant image
-      evaluate_on <<~JS
-        function(){
-          el = this;
-          if (el.tagName == 'AREA'){
-            const map_name = document.evaluate('./ancestor::map/@name', el, null, XPathResult.STRING_TYPE, null).stringValue;
-            el = document.querySelector(`img[usemap='#${map_name}']`);
-            if (!el){
-             return false;
-            }
-          }
-
-          while (el) {
-            const style = window.getComputedStyle(el);
-            if ((style.display == 'none') ||
-                (style.visibility == 'hidden') ||
-                (parseFloat(style.opacity) == 0)) {
-              return false;
-            }
-            el = el.parentElement;
-          }
-          return true;
-        }
-      JS
+      evaluate_on VISIBLE_JS
     end
 
     def checked?
@@ -252,34 +157,23 @@ module Capybara::Apparition
     end
 
     def disabled?
-      evaluate_on <<~JS
-        function() {
-          const xpath = 'parent::optgroup[@disabled] | \
-                         ancestor::select[@disabled] | \
-                         parent::fieldset[@disabled] | \
-                         ancestor::*[not(self::legend) or preceding-sibling::legend][parent::fieldset[@disabled]]';
-          return this.disabled || document.evaluate(xpath, this, null, XPathResult.BOOLEAN_TYPE, null).booleanValue
-        }
-      JS
+      evaluate_on ELEMENT_DISABLED_JS
     end
 
     def click(keys = [], button: 'left', count: 1, **options)
-      pos = if options[:x] && options[:y]
-        visible_top_left.tap do |p|
-          p[:x] += options[:x]
-          p[:y] += options[:y]
-        end
-      else
-        visible_center
-      end
+      pos = element_click_pos(options)
       raise ::Capybara::Apparition::MouseEventImpossible.new(self, 'args' => ['click']) if pos.nil?
 
       test = mouse_event_test(pos)
       raise ::Capybara::Apparition::MouseEventFailed.new(self, 'args' => ['click', test.selector, pos]) unless test.success
 
       @page.mouse.click_at pos.merge(button: button, count: count, modifiers: keys)
-      puts 'Waiting to see if click triggered page load' if ENV['DEBUG']
-      sleep 0.1
+      if ENV['DEBUG']
+        new_pos = element_click_pos(options)
+        puts "Element moved from #{pos} to #{new_pos}" unless pos == new_pos
+      end
+      # Wait a short time to see if click triggers page load
+      sleep 0.05
       @page.wait_for_loaded(allow_obsolete: true)
     end
 
@@ -298,43 +192,6 @@ module Capybara::Apparition
       @page.mouse.move_to(pos)
     end
 
-    def drag_to(other, delay: 0.1)
-      pos = visible_center
-      raise ::Capybara::Apparition::MouseEventImpossible.new(self, 'args' => ['drag_to']) if pos.nil?
-
-      test = mouse_event_test(pos)
-      raise ::Capybara::Apparition::MouseEventFailed.new(self, 'args' => ['drag', test.selector, pos]) unless test.success
-
-      begin
-        @page.mouse.move_to(pos)
-        @page.mouse.down(pos)
-        sleep delay
-
-        other_pos = other.visible_center
-        raise ::Capybara::Apparition::MouseEventImpossible.new(self, 'args' => ['drag_to']) if other_pos.nil?
-
-        @page.mouse.move_to(other_pos.merge(button: 'left'))
-        sleep delay
-      ensure
-        @page.mouse.up(other_pos)
-      end
-    end
-
-    def drag_by(x, y, delay: 0.1)
-      pos = visible_center
-      raise ::Capybara::Apparition::MouseEventImpossible.new(self, 'args' => ['hover']) if pos.nil?
-
-      other_pos = { x: pos[:x] + x, y: pos[:y] + y }
-      raise ::Capybara::Apparition::MouseEventFailed.new(self, 'args' => ['drag', test['selector'], pos]) unless mouse_event_test?(pos)
-
-      @page.mouse.move_to(pos)
-      @page.mouse.down(pos)
-      sleep delay
-      @page.mouse.move_to(other_pos.merge(button: 'left'))
-      sleep delay
-      @page.mouse.up(other_pos)
-    end
-
     EVENTS = {
       blur: ['FocusEvent'],
       focus: ['FocusEvent'],
@@ -353,15 +210,9 @@ module Capybara::Apparition
     def trigger(name, **options)
       raise ArgumentError, 'Unknown event' unless EVENTS.key?(name.to_sym)
 
-      event_type, opts = EVENTS[name.to_sym]
-      opts ||= {}
+      event_type, opts = *EVENTS[name.to_sym], {}
 
-      evaluate_on <<~JS, { value: name }, value: opts.merge(options)
-        function(name, options){
-          var event = new #{event_type}(name, options);
-          this.dispatchEvent(event);
-        }
-      JS
+      evaluate_on DISPATCH_EVENT_JS, { value: event_type }, { value: name }, value: opts.merge(options)
     end
 
     def ==(other)
@@ -371,54 +222,33 @@ module Capybara::Apparition
     end
 
     def send_keys(*keys)
-      selected = evaluate_on <<~JS
-        function(){
-          let selectedNode = document.getSelection().focusNode;
-          if (!selectedNode)
-            return false;
-          if (selectedNode.nodeType == 3)
-            selectedNode = selectedNode.parentNode;
-          return this.contains(selectedNode);
-        }
-      JS
-      click unless selected
+      click unless evaluate_on CURRENT_NODE_SELECTED_JS
       @page.keyboard.type(keys)
     end
     alias_method :send_key, :send_keys
 
     def path
-      evaluate_on <<~JS
-        function(){
-          const xpath = document.evaluate('ancestor-or-self::node()', this, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
-          let elements = [];
-          for (let i=1; i<xpath.snapshotLength; i++){
-            elements.push(xpath.snapshotItem(i));
-          }
-          let selectors = elements.map( el => {
-            prev_siblings = document.evaluate(`./preceding-sibling::${el.tagName}`, el, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
-            return `${el.tagName}[${prev_siblings.snapshotLength + 1}]`;
-          })
-          return '//' + selectors.join('/');
-        }
-      JS
+      evaluate_on GET_PATH_JS
     end
 
-    def visible_top_left
-      evaluate_on('function(){ this.scrollIntoViewIfNeeded() }')
-      # result = @page.command('DOM.getBoxModel', objectId: id)
-      result = evaluate_on <<~JS
-        function(){
-          var rect = this.getBoundingClientRect();
-          return rect.toJSON();
-        }
-      JS
+    def element_click_pos(x: nil, y: nil, **)
+      if x && y
+        visible_top_left.tap do |p|
+          p[:x] += x
+          p[:y] += y
+        end
+      else
+        visible_center
+      end
+    end
 
-      return nil if result.nil?
+    def visible_top_left
+      rect = in_view_bounding_rect
+      return nil if rect.nil?
 
-      result = result['model'] if result['model']
       frame_offset = @page.current_frame_offset
 
-      if (result['width'].zero? || result['height'].zero?) && (tag_name == 'area')
+      if (rect['width'].zero? || rect['height'].zero?) && (tag_name == 'area')
         map = find('xpath', 'ancestor::map').first
         img = find('xpath', "//img[@usemap='##{map[:name]}']").first
         return nil unless img.visible?
@@ -440,27 +270,17 @@ module Capybara::Apparition
         { x: img_pos[:x] + offset_pos[:x] + frame_offset[:x],
           y: img_pos[:y] + offset_pos[:y] + frame_offset[:y] }
       else
-        { x: result['left'] + frame_offset[:x],
-          y: result['top'] + frame_offset[:y] }
+        { x: rect['left'] + frame_offset[:x], y: rect['top'] + frame_offset[:y] }
       end
     end
 
     def visible_center
-      evaluate_on('function(){ this.scrollIntoViewIfNeeded() }')
-      # result = @page.command('DOM.getBoxModel', objectId: id)
-      result = evaluate_on <<~JS
-        function(){
-          var rect = this.getBoundingClientRect();
-          return rect.toJSON();
-        }
-      JS
+      rect = in_view_bounding_rect
+      return nil if rect.nil?
 
-      return nil if result.nil?
-
-      result = result['model'] if result['model']
       frame_offset = @page.current_frame_offset
 
-      if (result['width'].zero? || result['height'].zero?) && (tag_name == 'area')
+      if (rect['width'].zero? || rect['height'].zero?) && (tag_name == 'area')
         map = find('xpath', 'ancestor::map').first
         img = find('xpath', "//img[@usemap='##{map[:name]}']").first
         return nil unless img.visible?
@@ -484,11 +304,8 @@ module Capybara::Apparition
           y: img_pos[:y] + offset_pos[:y] + frame_offset[:y] }
       else
         lm = @page.command('Page.getLayoutMetrics')
-        # quad = result["border"]
-        # xs,ys = quad.partition.with_index { |_, idx| idx.even? }
-        xs = [result['left'], result['right']]
-        ys = [result['top'], result['bottom']]
-        x_extents, y_extents = xs.minmax, ys.minmax
+        x_extents = [rect['left'], rect['right']].minmax
+        y_extents = [rect['top'], rect['bottom']].minmax
 
         x_extents[1] = [x_extents[1], lm['layoutViewport']['clientWidth']].min
         y_extents[1] = [y_extents[1], lm['layoutViewport']['clientHeight']].min
@@ -499,30 +316,15 @@ module Capybara::Apparition
     end
 
     def top_left
-      result = evaluate_on <<~JS
-        function(){
-          rect = this.getBoundingClientRect();
-          return rect.toJSON();
-        }
-      JS
-      # @page.command('DOM.getBoxModel', objectId: id)
+      result = evaluate_on GET_BOUNDING_CLIENT_RECT_JS
       return nil if result.nil?
 
-      # { x: result["model"]["content"][0],
-      #   y: result["model"]["content"][1] }
-      { x: result['x'],
-        y: result['y'] }
+      { x: result['x'], y: result['y'] }
     end
 
     def scroll_by(x, y)
-      driver.execute_script <<~JS, self, x, y
-        var el = arguments[0];
-        if (el.scrollBy){
-          el.scrollBy(arguments[1], arguments[2]);
-        } else {
-          el.scrollTop = el.scrollTop + arguments[2];
-          el.scrollLeft = el.scrollLeft + arguments[1];
-        }
+      evaluate_on <<~JS, { value: x }, value: y
+        function(x, y){ this.scrollBy(x,y); }
       JS
     end
 
@@ -538,11 +340,7 @@ module Capybara::Apparition
       self
     end
 
-  private
-
-    def filter_text(text)
-      text.to_s.gsub(/[[:space:]]+/, ' ').strip
-    end
+  protected
 
     def evaluate_on(page_function, *args)
       obsolete_checked_function = <<~JS
@@ -560,6 +358,25 @@ module Capybara::Apparition
       process_response(response)
     end
 
+    def scroll_if_needed
+      driver.execute_script <<~JS, self
+        arguments[0].scrollIntoViewIfNeeded({behavior: 'instant', block: 'center', inline: 'center'})
+      JS
+    end
+
+  private
+
+    def in_view_bounding_rect
+      evaluate_on('function(){ this.scrollIntoViewIfNeeded() }')
+      result = evaluate_on GET_BOUNDING_CLIENT_RECT_JS
+      result = result['model'] if result && result['model']
+      result
+    end
+
+    def filter_text(text)
+      text.to_s.gsub(/[[:space:]]+/, ' ').strip
+    end
+
     def process_response(response)
       exception_details = response['exceptionDetails']
       if exception_details && (exception = exception_details['exception'])
@@ -716,9 +533,7 @@ module Capybara::Apparition
       else
         raise ArgumentError, "Invalid scroll_to location: #{location}"
       end
-      driver.execute_script <<~JS, element
-        arguments[0].scrollIntoView(#{scroll_opts})
-      JS
+      element.evaluate_on "function(){ this.scrollIntoView(#{scroll_opts}) }"
     end
 
     def scroll_to_location(location)
@@ -726,55 +541,21 @@ module Capybara::Apparition
       when :top
         '0'
       when :bottom
-        'arguments[0].scrollHeight'
+        'this.scrollHeight'
       when :center
-        '(arguments[0].scrollHeight - arguments[0].clientHeight)/2'
+        '(this.scrollHeight - this.clientHeight)/2'
       end
-
-      driver.execute_script <<~JS, self
-        arguments[0].scrollTo(0, #{scroll_y});
-      JS
+      evaluate_on "function(){ this.scrollTo(0, #{scroll_y}) }"
     end
 
     def scroll_to_coords(x, y)
-      driver.execute_script <<~JS, self, x, y
-        arguments[0].scrollTo(arguments[1], arguments[2]);
+      evaluate_on <<~JS, { value: x }, value: y
+        function(x,y){ this.scrollTo(x,y) }
       JS
     end
 
-    #   evaluate_on("function(hit_node){
-    #     if ((this == hit_node) || (this.contains(hit_node)))
-    #       return { status: 'success' };
-    #
-    #     const getSelector = function(element){
-    #       let selector = '';
-    #       if (element.tagName != 'HTML')
-    #         selector = getSelector(element.parentNode) + ' ';
-    #       selector += element.tagName.toLowerCase();
-    #       if (element.id)
-    #         selector += `#${element.id}`;
-    #
-    #       for (let className of element.classList){
-    #         if (className != '')
-    #           selector += `.${className}`;
-    #       }
-    #       return selector;
-    #     }
-    #
-    #     return { status: 'failure', selector: getSelector(hit_node)};
-    #   }", objectId: hit_node_id)
-
     def delete_text
-      evaluate_on <<~JS
-        function(){
-          range = document.createRange();
-          range.selectNodeContents(this);
-          window.getSelection().removeAllRanges();
-          window.getSelection().addRange(range);
-          window.getSelection().deleteFromDocument();
-          window.getSelection().removeAllRanges();
-        }
-      JS
+      evaluate_on DELETE_TEXT_JS
     end
 
     # SettableValue encapsulates time/date field formatting
@@ -840,5 +621,194 @@ module Capybara::Apparition
         # releasePromises = [helper.releaseObject(@element._client, remote_object)]
       end
     end
+
+    ####################
+    # JS snippets
+    ####################
+
+    GET_PATH_JS = <<~JS
+      function() {
+        const xpath = document.evaluate('ancestor-or-self::node()', this, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
+        let elements = [];
+        for (let i=1; i<xpath.snapshotLength; i++){
+          elements.push(xpath.snapshotItem(i));
+        }
+        let selectors = elements.map( el => {
+          prev_siblings = document.evaluate(`./preceding-sibling::${el.tagName}`, el, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
+          return `${el.tagName}[${prev_siblings.snapshotLength + 1}]`;
+        })
+        return '//' + selectors.join('/');
+      }
+    JS
+
+    CURRENT_NODE_SELECTED_JS = <<~JS
+      function() {
+        let selectedNode = document.getSelection().focusNode;
+        if (!selectedNode)
+          return false;
+        if (selectedNode.nodeType == 3)
+          selectedNode = selectedNode.parentNode;
+        return this.contains(selectedNode);
+      }
+    JS
+
+    FIND_CSS_JS = <<~JS
+      function(selector){
+        return Array.from(this.querySelectorAll(selector));
+      }
+    JS
+
+    FIND_XPATH_JS = <<~JS
+      function(selector){
+        const xpath = document.evaluate(selector, this, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
+        let results = [];
+        for (let i=0; i < xpath.snapshotLength; i++){
+          results.push(xpath.snapshotItem(i));
+        }
+        return results;
+      }
+    JS
+
+    ELEMENT_VISIBLE_TEXT_JS = <<~JS
+      function(){
+        if (this.nodeName == 'TEXTAREA'){
+          return this.textContent;
+        } else if (this instanceof SVGElement) {
+          return this.textContent;
+        } else {
+          return this.innerText;
+        }
+      }
+    JS
+
+    GET_ATTRIBUTES_JS = <<~JS
+      function(){
+        let attrs = {};
+        for (let attr of this.attributes)
+          attrs[attr.name] = attr.value.replace("\\n","\\\\n");
+        return attrs;
+      }
+    JS
+
+    GET_VALUE_JS = <<~JS
+      function(){
+        if ((this.tagName == 'SELECT') && this.multiple){
+          let selected = [];
+          for (let option of this.children) {
+            if (option.selected) {
+              selected.push(option.value);
+            }
+          }
+          return selected;
+        } else {
+          return this.value;
+        }
+      }
+    JS
+
+    SELECT_OPTION_JS = <<~JS
+      function(){
+        let sel = this.parentNode;
+        if (sel.tagName == 'OPTGROUP'){
+          sel = sel.parentNode;
+        }
+        let event_options = { bubbles: true, cancelable: true };
+        sel.dispatchEvent(new FocusEvent('focus', event_options));
+
+        this.selected = true
+
+        sel.dispatchEvent(new Event('change', event_options));
+        sel.dispatchEvent(new FocusEvent('blur', event_options));
+      }
+    JS
+
+    UNSELECT_OPTION_JS = <<~JS
+      function(){
+        let sel = this.parentNode;
+        if (sel.tagName == 'OPTGROUP') {
+          sel = sel.parentNode;
+        }
+
+        if (!sel.multiple){
+          return false;
+        }
+
+        this.selected = false;
+        return true;
+      }
+    JS
+
+    # if an area element, check visibility of relevant image
+    VISIBLE_JS = <<~JS
+      function(){
+        el = this;
+        if (el.tagName == 'AREA'){
+          const map_name = document.evaluate('./ancestor::map/@name', el, null, XPathResult.STRING_TYPE, null).stringValue;
+          el = document.querySelector(`img[usemap='#${map_name}']`);
+          if (!el){
+           return false;
+          }
+        }
+
+        while (el) {
+          const style = window.getComputedStyle(el);
+          if ((style.display == 'none') ||
+              (style.visibility == 'hidden') ||
+              (parseFloat(style.opacity) == 0)) {
+            return false;
+          }
+          el = el.parentElement;
+        }
+        return true;
+      }
+    JS
+
+    DELETE_TEXT_JS = <<~JS
+      function(){
+        range = document.createRange();
+        range.selectNodeContents(this);
+        window.getSelection().removeAllRanges();
+        window.getSelection().addRange(range);
+        window.getSelection().deleteFromDocument();
+        window.getSelection().removeAllRanges();
+      }
+    JS
+
+    GET_BOUNDING_CLIENT_RECT_JS = <<~JS
+      function(){
+        rect = this.getBoundingClientRect();
+        return rect.toJSON();
+      }
+    JS
+
+    ELEMENT_DISABLED_JS = <<~JS
+      function() {
+        const xpath = 'parent::optgroup[@disabled] | \
+                       ancestor::select[@disabled] | \
+                       parent::fieldset[@disabled] | \
+                       ancestor::*[not(self::legend) or preceding-sibling::legend][parent::fieldset[@disabled]]';
+        return this.disabled || document.evaluate(xpath, this, null, XPathResult.BOOLEAN_TYPE, null).booleanValue
+      }
+    JS
+
+    ELEMENT_PROP_OR_ATTR_JS = <<~JS
+      function(name){
+        if (((this.tagName == 'img') && (name == 'src')) ||
+            ((this.tagName == 'a') && (name == 'href')))
+          return this.getAttribute(name) && this[name];
+
+        let value = this[name];
+        if ((value == null) || ['object', 'function'].includes(typeof value))
+          value = this.getAttribute(name);
+        return value
+      }
+    JS
+
+    DISPATCH_EVENT_JS = <<~JS
+      function(type, name, options){
+        var event = new window[type](name, options);
+        this.dispatchEvent(event);
+      }
+    JS
   end
 end