capybara-playwright-driver 0.0.0.pre.r1

data/lib/capybara/playwright/browser_options.rb

@@ -0,0 +1,32 @@
+module Capybara
+  module Playwright
+    class BrowserOptions
+      def initialize(options)
+        @options = options
+      end
+
+      LAUNCH_PARAMS = {
+        args: nil,
+        channel: nil,
+        chromiumSandbox: nil,
+        devtools: nil,
+        downloadsPath: nil,
+        env: nil,
+        executablePath: nil,
+        firefoxUserPrefs: nil,
+        handleSIGHUP: nil,
+        handleSIGINT: nil,
+        handleSIGTERM: nil,
+        headless: nil,
+        ignoreDefaultArgs: nil,
+        proxy: nil,
+        slowMo: nil,
+        timeout: nil,
+      }.keys
+
+      def value
+        @options.select { |k, _| LAUNCH_PARAMS.include?(k) }
+      end
+    end
+  end
+end

data/lib/capybara/playwright/dialog_event_handler.rb

@@ -0,0 +1,58 @@
+require 'securerandom'
+
+module Capybara
+  module Playwright
+    # LILO event handler
+    class DialogEventHandler
+      class Item
+        def initialize(dialog_proc)
+          @id = SecureRandom.uuid
+          @proc = dialog_proc
+        end
+
+        attr_reader :id
+
+        def call(dialog)
+          @proc.call(dialog)
+        end
+      end
+
+      def initialize
+        @handlers = []
+        @mutex = Mutex.new
+      end
+
+      attr_writer :default_handler
+
+      def add_handler(callable)
+        item = Item.new(callable)
+        @mutex.synchronize {
+          @handlers << item
+        }
+        item.id
+      end
+
+      def remove_handler(id)
+        @mutex.synchronize {
+          @handlers.reject! { |item| item.id == id }
+        }
+      end
+
+      def with_handler(callable, &block)
+        id = add_handler(callable)
+        begin
+          block.call
+        ensure
+          remove_handler(id)
+        end
+      end
+
+      def handle_dialog(dialog)
+        handler = @mutex.synchronize {
+          @handlers.pop || @default_handler
+        }
+        handler&.call(dialog)
+      end
+    end
+  end
+end

data/lib/capybara/playwright/driver.rb

@@ -0,0 +1,102 @@
+module Capybara
+  module Playwright
+    class Driver < ::Capybara::Driver::Base
+      extend Forwardable
+
+      def initialize(app, **options)
+        @playwright_cli_executable_path = options[:playwright_cli_executable_path] || 'npx playwright'
+        @browser_type = options[:browser_type] || :chromium
+        unless %i(chromium firefox webkit).include?(@browser_type)
+          raise ArgumentError.new("Unknown browser_type: #{@browser_type}")
+        end
+
+        @browser_options = BrowserOptions.new(options)
+        @page_options = PageOptions.new(options)
+      end
+
+      def wait?; true; end
+      def needs_server?; true; end
+
+      def browser
+        @browser ||= create_browser
+      end
+
+      private def create_browser
+        main = Process.pid
+        at_exit do
+          # Store the exit status of the test run since it goes away after calling the at_exit proc...
+          @exit_status = $ERROR_INFO.status if $ERROR_INFO.is_a?(SystemExit)
+          quit if Process.pid == main
+          exit @exit_status if @exit_status # Force exit with stored status
+        end
+
+        @execution = execute_playwright
+        ::Capybara::Playwright::Browser.new(
+          playwright: @execution.playwright,
+          driver: self,
+          browser_type: @browser_type,
+          browser_options: @browser_options.value,
+          page_options: @page_options.value,
+        )
+      end
+
+      private def execute_playwright
+        ::Playwright.create(playwright_cli_executable_path: @playwright_cli_executable_path)
+      end
+
+      private def quit
+        @browser&.quit
+        @execution&.stop
+      end
+
+      def reset!
+        quit
+        @browser = nil
+      end
+
+      def invalid_element_errors
+        @invalid_element_errors ||= [
+          Node::NotActionableError,
+          Node::StaleReferenceError,
+        ].freeze
+      end
+
+      def no_such_window_error
+        Browser::NoSuchWindowError
+      end
+
+      # ref: https://github.com/teamcapybara/capybara/blob/master/lib/capybara/driver/base.rb
+      def_delegator(:browser, :current_url)
+      def_delegator(:browser, :visit)
+      def_delegator(:browser, :refresh)
+      def_delegator(:browser, :find_xpath)
+      def_delegator(:browser, :find_css)
+      def_delegator(:browser, :title)
+      def_delegator(:browser, :html)
+      def_delegator(:browser, :go_back)
+      def_delegator(:browser, :go_forward)
+      def_delegator(:browser, :execute_script)
+      def_delegator(:browser, :evaluate_script)
+      def_delegator(:browser, :evaluate_async_script)
+      def_delegator(:browser, :save_screenshot)
+      def_delegator(:browser, :response_headers)
+      def_delegator(:browser, :status_code)
+      def_delegator(:browser, :send_keys)
+      def_delegator(:browser, :switch_to_frame)
+      def_delegator(:browser, :current_window_handle)
+      def_delegator(:browser, :window_size)
+      def_delegator(:browser, :resize_window_to)
+      def_delegator(:browser, :maximize_window)
+      def_delegator(:browser, :fullscreen_window)
+      def_delegator(:browser, :close_window)
+      def_delegator(:browser, :window_handles)
+      def_delegator(:browser, :open_new_window)
+      def_delegator(:browser, :switch_to_window)
+      def_delegator(:browser, :accept_modal)
+      def_delegator(:browser, :dismiss_modal)
+
+      # capybara-playwright-driver specific methods
+      def_delegator(:browser, :with_playwright_page)
+    end
+  end
+end

data/lib/capybara/playwright/node.rb

@@ -0,0 +1,839 @@
+module Capybara
+  module ElementClickOptionPatch
+    def perform_click_action(keys, **options)
+      # Expose `wait` value to the block given to perform_click_action.
+      if options[:wait].is_a?(Numeric)
+        options[:_playwright_wait] = options[:wait]
+      end
+
+      # Playwright has own auto-waiting feature.
+      # So disable Capybara's retry logic.
+      options[:wait] = 0
+      super
+    end
+  end
+  Node::Element.prepend(ElementClickOptionPatch)
+
+  module WithElementHandlePatch
+    def with_playwright_element_handle(&block)
+      raise ArgumentError.new('block must be given') unless block
+
+      if native.is_a?(::Playwright::ElementHandle)
+        block.call(native)
+      else
+        raise "#{native.inspect} is not a Playwirght::ElementHandle"
+      end
+    end
+  end
+  Node::Element.prepend(WithElementHandlePatch)
+
+  module CapybaraObscuredPatch
+    # ref: https://github.com/teamcapybara/capybara/blob/f7ab0b5cd5da86185816c2d5c30d58145fe654ed/lib/capybara/selenium/node.rb#L523
+    OBSCURED_OR_OFFSET_SCRIPT = <<~JAVASCRIPT
+    (el, [x, y]) => {
+      var box = el.getBoundingClientRect();
+      if (!x && x != 0) x = box.width/2;
+      if (!y && y != 0) y = box.height/2;
+      var px = box.left + x,
+          py = box.top + y,
+          e = document.elementFromPoint(px, py);
+      if (!el.contains(e))
+        return true;
+      return { x: px, y: py };
+    }
+    JAVASCRIPT
+
+    def capybara_obscured?(x: nil, y: nil)
+      res = evaluate(OBSCURED_OR_OFFSET_SCRIPT, arg: [x, y])
+      return true if res == true
+
+      # ref: https://github.com/teamcapybara/capybara/blob/f7ab0b5cd5da86185816c2d5c30d58145fe654ed/lib/capybara/selenium/driver.rb#L182
+      frame = owner_frame
+      return false unless frame.parent_frame
+
+      frame.frame_element.capybara_obscured?(x: res['x'], y: res['y'])
+    end
+  end
+  ::Playwright::ElementHandle.prepend(CapybaraObscuredPatch)
+
+  module Playwright
+    # Selector and checking methods are derived from twapole/apparition
+    # Action methods (click, select_option, ...) uses playwright.
+    #
+    # ref:
+    #   selenium:   https://github.com/teamcapybara/capybara/blob/master/lib/capybara/selenium/node.rb
+    #   apparition: https://github.com/twalpole/apparition/blob/master/lib/capybara/apparition/node.rb
+    class Node < ::Capybara::Driver::Node
+      def initialize(driver, page, element)
+        super(driver, element)
+        @page = page
+        @element = element
+      end
+
+      protected def element
+        @element
+      end
+
+      private def assert_element_not_stale
+        # Playwright checks the staled state only when
+        # actionable methods. (click, select_option, hover, ...)
+        # Capybara expects stale checking also when getting inner text, and so on.
+        @element.enabled?
+      rescue ::Playwright::Error => err
+        case err.message
+        when /Element is not attached to the DOM/
+          raise StaleReferenceError.new(err)
+        when /Cannot find context with specified id/
+          raise StaleReferenceError.new(err)
+        when /Unable to adopt element handle from a different document/ # for WebKit.
+          raise StaleReferenceError.new(err)
+        when /error in channel "content::page": exception while running method "adoptNode"/ # for Firefox
+          raise StaleReferenceError.new(err)
+        else
+          raise
+        end
+      end
+
+      private def capybara_default_wait_time
+        Capybara.default_max_wait_time * 1100 # with 10% buffer for allowing overhead.
+      end
+
+      class NotActionableError < StandardError ; end
+      class StaleReferenceError < StandardError ; end
+
+      def all_text
+        assert_element_not_stale
+
+        text = @element.text_content
+        text.to_s.gsub(/[\u200b\u200e\u200f]/, '')
+            .gsub(/[\ \n\f\t\v\u2028\u2029]+/, ' ')
+            .gsub(/\A[[:space:]&&[^\u00a0]]+/, '')
+            .gsub(/[[:space:]&&[^\u00a0]]+\z/, '')
+            .tr("\u00a0", ' ')
+      end
+
+      def visible_text
+        assert_element_not_stale
+
+        return '' unless visible?
+
+        text = @element.evaluate(<<~JAVASCRIPT)
+          function(el){
+            if (el.nodeName == 'TEXTAREA'){
+              return el.textContent;
+            } else if (el instanceof SVGElement) {
+              return el.textContent;
+            } else {
+              return el.innerText;
+            }
+          }
+        JAVASCRIPT
+        text.to_s.gsub(/\A[[:space:]&&[^\u00a0]]+/, '')
+            .gsub(/[[:space:]&&[^\u00a0]]+\z/, '')
+            .gsub(/\n+/, "\n")
+            .tr("\u00a0", ' ')
+      end
+
+      def [](name)
+        assert_element_not_stale
+
+        property(name) || attribute(name)
+      end
+
+      private def property(name)
+        value = @element.get_property(name)
+        value.evaluate("value => ['object', 'function'].includes(typeof value) ? null : value")
+      end
+
+      private def attribute(name)
+        @element.get_attribute(name)
+      end
+
+      def value
+        assert_element_not_stale
+
+        # ref: https://github.com/teamcapybara/capybara/blob/f7ab0b5cd5da86185816c2d5c30d58145fe654ed/lib/capybara/selenium/node.rb#L31
+        # ref: https://github.com/twalpole/apparition/blob/11aca464b38b77585191b7e302be2e062bdd369d/lib/capybara/apparition/node.rb#L728
+        if tag_name == 'select' && @element.evaluate('el => el.multiple')
+          @element.query_selector_all('option:checked').map do |option|
+            option.evaluate('el => el.value')
+          end
+        else
+          @element.evaluate('el => el.value')
+        end
+      end
+
+      def style(styles)
+        # Capybara provides default implementation.
+        # ref: https://github.com/teamcapybara/capybara/blob/f7ab0b5cd5da86185816c2d5c30d58145fe654ed/lib/capybara/node/element.rb#L92
+        raise NotImplementedError
+      end
+
+      # @param value [String, Array] Array is only allowed if node has 'multiple' attribute
+      # @param options [Hash] Driver specific options for how to set a value on a node
+      def set(value, **options)
+        settable_class =
+          case tag_name
+          when 'input'
+            case attribute('type')
+            when 'radio'
+              RadioButton
+            when 'checkbox'
+              Checkbox
+            when 'file'
+              FileUpload
+            when 'date'
+              DateInput
+            when 'time'
+              TimeInput
+            when 'datetime-local'
+              DateTimeInput
+            when 'color'
+              JSValueInput
+            when 'range'
+              JSValueInput
+            else
+              TextInput
+            end
+          when 'textarea'
+            TextInput
+          else
+            if @element.editable?
+              TextInput
+            else
+              raise NotSupportedByDriverError
+            end
+          end
+
+        settable_class.new(@element, capybara_default_wait_time).set(value, **options)
+      rescue ::Playwright::TimeoutError => err
+        raise NotActionableError.new(err)
+      end
+
+      class Settable
+        def initialize(element, timeout)
+          @element = element
+          @timeout = timeout
+        end
+      end
+
+      class RadioButton < Settable
+        def set(_, **options)
+          @element.check(timeout: @timeout)
+        end
+      end
+
+      class Checkbox < Settable
+        def set(value, **options)
+          if value
+            @element.check(timeout: @timeout)
+          else
+            @element.uncheck(timeout: @timeout)
+          end
+        end
+      end
+
+      class TextInput < Settable
+        def set(value, **options)
+          @element.fill(value.to_s, timeout: @timeout)
+        rescue ::Playwright::TimeoutError
+          raise if @element.editable?
+
+          puts "[INFO] Node#set: element is not editable. #{@element}"
+        end
+      end
+
+      class FileUpload < Settable
+        def set(value, **options)
+          @element.set_input_files(value, timeout: @timeout)
+        end
+      end
+
+      module UpdateValueJS
+        def update_value_js(element, value)
+          # ref: https://github.com/teamcapybara/capybara/blob/f7ab0b5cd5da86185816c2d5c30d58145fe654ed/lib/capybara/selenium/node.rb#L343
+          js = <<~JAVASCRIPT
+          (el, value) => {
+            if (el.readOnly) { return };
+            if (document.activeElement !== el){
+              el.focus();
+            }
+            if (el.value != value) {
+              el.value = value;
+              el.dispatchEvent(new InputEvent('input'));
+              el.dispatchEvent(new Event('change', { bubbles: true }));
+            }
+          }
+          JAVASCRIPT
+          element.evaluate(js, arg: value)
+        end
+      end
+
+      class DateInput < Settable
+        include UpdateValueJS
+
+        def set(value, **options)
+          if !value.is_a?(String) && value.respond_to?(:to_date)
+            update_value_js(@element, value.to_date.iso8601)
+          else
+            @element.fill(value.to_s, timeout: @timeout)
+          end
+        end
+      end
+
+      class TimeInput < Settable
+        include UpdateValueJS
+
+        def set(value, **options)
+          if !value.is_a?(String) && value.respond_to?(:to_time)
+            update_value_js(@element, value.to_time.strftime('%H:%M'))
+          else
+            @element.fill(value.to_s, timeout: @timeout)
+          end
+        end
+      end
+
+      class DateTimeInput < Settable
+        include UpdateValueJS
+
+        def set(value, **options)
+          if !value.is_a?(String) && value.respond_to?(:to_time)
+            update_value_js(@element, value.to_time.strftime('%Y-%m-%dT%H:%M'))
+          else
+            @element.fill(value.to_s, timeout: @timeout)
+          end
+        end
+      end
+
+      class JSValueInput < Settable
+        include UpdateValueJS
+
+        def set(value, **options)
+          update_value_js(@element, value)
+        end
+      end
+
+      def select_option
+        return false if disabled?
+
+        select_element = parent_select_element
+        if select_element.evaluate('el => el.multiple')
+          selected_options = select_element.query_selector_all('option:checked')
+          selected_options << @element
+          select_element.select_option(element: selected_options, timeout: capybara_default_wait_time)
+        else
+          select_element.select_option(element: @element, timeout: capybara_default_wait_time)
+        end
+      end
+
+      def unselect_option
+        if parent_select_element.evaluate('el => el.multiple')
+          return false if disabled?
+
+          @element.evaluate('el => el.selected = false')
+        else
+          raise Capybara::UnselectNotAllowed, 'Cannot unselect option from single select box.'
+        end
+      end
+
+      private def parent_select_element
+        @element.query_selector('xpath=ancestor::select')
+      end
+
+      def click(keys = [], **options)
+        click_options = ClickOptions.new(@element, keys, options, capybara_default_wait_time)
+        @element.click(**click_options.as_params)
+      end
+
+      def right_click(keys = [], **options)
+        click_options = ClickOptions.new(@element, keys, options, capybara_default_wait_time)
+        params = click_options.as_params
+        params[:button] = 'right'
+        @element.click(**params)
+      end
+
+      def double_click(keys = [], **options)
+        click_options = ClickOptions.new(@element, keys, options, capybara_default_wait_time)
+        @element.dblclick(**click_options.as_params)
+      end
+
+      class ClickOptions
+        def initialize(element, keys, options, default_timeout)
+          @element = element
+          @modifiers = keys.map do |key|
+            MODIFIERS[key.to_sym] or raise ArgumentError.new("Unknown modifier key: #{key}")
+          end
+          if options[:x] && options[:y]
+            @coords = {
+              x: options[:x],
+              y: options[:y],
+            }
+            @offset_center = options[:offset] == :center
+          end
+          @wait = options[:_playwright_wait]
+          @delay = options[:delay]
+          @default_timeout = default_timeout
+        end
+
+        def as_params
+          {
+            delay: delay_ms,
+            modifiers: modifiers,
+            position: position,
+            timeout: timeout + delay_ms.to_i,
+          }.compact
+        end
+
+        private def timeout
+          if @wait
+            if @wait <= 0
+              raise NotSupportedByDriverError.new("wait should be > 0 (wait = 0 is not supported on this driver)")
+            end
+
+            @wait * 1000
+          else
+            @default_timeout
+          end
+        end
+
+        private def delay_ms
+          if @delay && @delay > 0
+            @delay * 1000
+          else
+            nil
+          end
+        end
+
+        MODIFIERS = {
+          alt: 'Alt',
+          control: 'Control',
+          meta: 'Meta',
+          shift: 'Shift',
+        }.freeze
+
+        private def modifiers
+          if @modifiers.empty?
+            nil
+          else
+            @modifiers
+          end
+        end
+
+        private def position
+          if @offset_center
+            box = @element.bounding_box
+
+            {
+              x: @coords[:x] + box['width'] / 2,
+              y: @coords[:y] + box['height'] / 2,
+            }
+          else
+            @coords
+          end
+        end
+      end
+
+      def send_keys(*args)
+        SendKeys.new(@element, args).execute
+      end
+
+      class SendKeys
+        MODIFIERS = {
+          alt: 'Alt',
+          control: 'Control',
+          meta: 'Meta',
+          shift: 'Shift',
+        }.freeze
+
+        KEYS = {
+          cancel: 'Cancel',
+          help: 'Help',
+          backspace: 'Backspace',
+          tab: 'Tab',
+          clear: 'Clear',
+          return: 'Enter',
+          enter: 'Enter',
+          shift: 'Shift',
+          control: 'Control',
+          alt: 'Alt',
+          pause: 'Pause',
+          escape: 'Escape',
+          space: 'Space',
+          page_up: 'PageUp',
+          page_down: 'PageDown',
+          end: 'End',
+          home: 'Home',
+          left: 'ArrowLeft',
+          up: 'ArrowUp',
+          right: 'ArrowRight',
+          down: 'ArrowDown',
+          insert: 'Insert',
+          delete: 'Delete',
+          semicolon: 'Semicolon',
+          equals: 'Equal',
+          numpad0: 'Numpad0',
+          numpad1: 'Numpad1',
+          numpad2: 'Numpad2',
+          numpad3: 'Numpad3',
+          numpad4: 'Numpad4',
+          numpad5: 'Numpad5',
+          numpad6: 'Numpad6',
+          numpad7: 'Numpad7',
+          numpad8: 'Numpad8',
+          numpad9: 'Numpad9',
+          multiply: 'NumpadMultiply',
+          add: 'NumpadAdd',
+          separator: 'NumpadDecimal',
+          subtract: 'NumpadSubtract',
+          decimal: 'NumpadDecimal',
+          divide: 'NumpadDivide',
+          f1: 'F1',
+          f2: 'F2',
+          f3: 'F3',
+          f4: 'F4',
+          f5: 'F5',
+          f6: 'F6',
+          f7: 'F7',
+          f8: 'F8',
+          f9: 'F9',
+          f10: 'F10',
+          f11: 'F11',
+          f12: 'F12',
+          meta: 'Meta',
+          command: 'Meta',
+        }
+
+        def initialize(element_or_keyboard, keys)
+          @element_or_keyboard = element_or_keyboard
+
+          holding_keys = []
+          @executables = keys.each_with_object([]) do |key, executables|
+            if MODIFIERS[key]
+              holding_keys << key
+            else
+              if holding_keys.empty?
+                case key
+                when String
+                  executables << TypeText.new(key)
+                when Symbol
+                  executables << PressKey.new(
+                    key: key_for(key),
+                    modifiers: [],
+                  )
+                when Array
+                  _key = key.last
+                  code =
+                    if _key.is_a?(String) && _key.length == 1
+                      _key.upcase
+                    elsif _key.is_a?(Symbol)
+                      key_for(_key)
+                    else
+                      raise ArgumentError.new("invalid key: #{_key}. Symbol of 1-length String is expected.")
+                    end
+                  modifiers = key.first(key.size - 1).map { |k| modifier_for(k) }
+                  executables << PressKey.new(
+                    key: code,
+                    modifiers: modifiers,
+                  )
+                end
+              else
+                modifiers = holding_keys.map { |k| modifier_for(k) }
+
+                case key
+                when String
+                  key.each_char do |char|
+                    executables << PressKey.new(
+                      key: char.upcase,
+                      modifiers: modifiers,
+                    )
+                  end
+                when Symbol
+                  executables << PressKey.new(
+                    key: key_for(key),
+                    modifiers: modifiers
+                  )
+                else
+                  raise ArgumentError.new("#{key} cannot be handled with holding key #{holding_keys}")
+                end
+              end
+            end
+          end
+        end
+
+        private def modifier_for(modifier)
+          MODIFIERS[modifier] or raise ArgumentError.new("invalid modifier specified: #{modifier}")
+        end
+
+        private def key_for(key)
+          KEYS[key] or raise ArgumentError.new("invalid key specified: #{key}")
+        end
+
+        def execute
+          @executables.each do |executable|
+            executable.execute_for(@element_or_keyboard)
+          end
+        end
+
+        class PressKey
+          def initialize(key:, modifiers:)
+            puts "PressKey: key=#{key} modifiers: #{modifiers}"
+            if modifiers.empty?
+              @key = key
+            else
+              @key = (modifiers + [key]).join('+')
+            end
+          end
+
+          def execute_for(element)
+            element.press(@key)
+          end
+        end
+
+        class TypeText
+          def initialize(text)
+            @text = text
+          end
+
+          def execute_for(element)
+            element.type(@text)
+          end
+        end
+      end
+
+      def hover
+        @element.hover(timeout: capybara_default_wait_time)
+      end
+
+      def drag_to(element, **options)
+        raise NotImplementedError
+      end
+
+      def drop(*args)
+        raise NotImplementedError
+      end
+
+      def scroll_by(x, y)
+        js = <<~JAVASCRIPT
+        (el, [x, y]) => {
+          if (el.scrollBy){
+            el.scrollBy(x, y);
+          } else {
+            el.scrollTop = el.scrollTop + y;
+            el.scrollLeft = el.scrollLeft + x;
+          }
+        }
+        JAVASCRIPT
+
+        @element.evaluate(js, arg: [x, y])
+      end
+
+      def scroll_to(element, location, position = nil)
+        # location, element = element, nil if element.is_a? Symbol
+        if element.is_a? Capybara::Playwright::Node
+          scroll_element_to_location(element, location)
+        elsif location.is_a? Symbol
+          scroll_to_location(location)
+        else
+          scroll_to_coords(*position)
+        end
+
+        self
+      end
+
+      private def scroll_element_to_location(element, location)
+        scroll_opts =
+          case location
+          when :top
+            'true'
+          when :bottom
+            'false'
+          when :center
+            "{behavior: 'instant', block: 'center'}"
+          else
+            raise ArgumentError, "Invalid scroll_to location: #{location}"
+          end
+
+        element.native.evaluate("(el) => { el.scrollIntoView(#{scroll_opts}) }")
+      end
+
+      SCROLL_POSITIONS = {
+        top: '0',
+        bottom: 'el.scrollHeight',
+        center: '(el.scrollHeight - el.clientHeight)/2'
+      }.freeze
+
+      private def scroll_to_location(location)
+        position = SCROLL_POSITIONS[location]
+
+        @element.evaluate(<<~JAVASCRIPT)
+        (el) => {
+          if (el.scrollTo){
+            el.scrollTo(0, #{position});
+          } else {
+            el.scrollTop = #{position};
+          }
+        }
+        JAVASCRIPT
+      end
+
+      private def scroll_to_coords(x, y)
+        js = <<~JAVASCRIPT
+        (el, [x, y]) => {
+          if (el.scrollTo){
+            el.scrollTo(x, y);
+          } else {
+            el.scrollTop = y;
+            el.scrollLeft = x;
+          }
+        }
+        JAVASCRIPT
+
+        @element.evaluate(js, arg: [x, y])
+      end
+
+      def tag_name
+        @tag_name ||= @element.evaluate('e => e.tagName.toLowerCase()')
+      end
+
+      def visible?
+        # if an area element, check visibility of relevant image
+        @element.evaluate(<<~JAVASCRIPT)
+        function(el) {
+          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;
+            }
+          }
+          var forced_visible = false;
+          while (el) {
+            const style = window.getComputedStyle(el);
+            if (style.visibility == 'visible')
+              forced_visible = true;
+            if ((style.display == 'none') ||
+                ((style.visibility == 'hidden') && !forced_visible) ||
+                (parseFloat(style.opacity) == 0)) {
+              return false;
+            }
+            var parent = el.parentElement;
+            if (parent && (parent.tagName == 'DETAILS') && !parent.open && (el.tagName != 'SUMMARY')) {
+              return false;
+            }
+            el = parent;
+          }
+          return true;
+        }
+        JAVASCRIPT
+      end
+
+      def obscured?
+        @element.capybara_obscured?
+      end
+
+      def checked?
+        @element.evaluate('el => !!el.checked')
+      end
+
+      def selected?
+        @element.evaluate('el => !!el.selected')
+      end
+
+      def disabled?
+        @element.evaluate(<<~JAVASCRIPT)
+        function(el) {
+          const xpath = 'parent::optgroup[@disabled] | \
+                        ancestor::select[@disabled] | \
+                        parent::fieldset[@disabled] | \
+                        ancestor::*[not(self::legend) or preceding-sibling::legend][parent::fieldset[@disabled]]';
+          return el.disabled || document.evaluate(xpath, el, null, XPathResult.BOOLEAN_TYPE, null).booleanValue
+        }
+        JAVASCRIPT
+      end
+
+      def readonly?
+        !@element.editable?
+      end
+
+      def multiple?
+        @element.evaluate('el => el.multiple')
+      end
+
+      def rect
+        assert_element_not_stale
+
+        @element.evaluate(<<~JAVASCRIPT)
+        function(el){
+          const rects = [...el.getClientRects()]
+          const rect = rects.find(r => (r.height && r.width)) || el.getBoundingClientRect();
+          return rect.toJSON();
+        }
+        JAVASCRIPT
+      end
+
+      def path
+        assert_element_not_stale
+
+        @element.evaluate(<<~JAVASCRIPT)
+        (el) => {
+          var xml = document;
+          var xpath = '';
+          var pos, tempitem2;
+          if (el.getRootNode && el.getRootNode() instanceof ShadowRoot) {
+            return "(: Shadow DOM element - no XPath :)";
+          };
+          while(el !== xml.documentElement) {
+            pos = 0;
+            tempitem2 = el;
+            while(tempitem2) {
+              if (tempitem2.nodeType === 1 && tempitem2.nodeName === el.nodeName) { // If it is ELEMENT_NODE of the same name
+                pos += 1;
+              }
+              tempitem2 = tempitem2.previousSibling;
+            }
+            if (el.namespaceURI != xml.documentElement.namespaceURI) {
+              xpath = "*[local-name()='"+el.nodeName+"' and namespace-uri()='"+(el.namespaceURI===null?'':el.namespaceURI)+"']["+pos+']'+'/'+xpath;
+            } else {
+              xpath = el.nodeName.toUpperCase()+"["+pos+"]/"+xpath;
+            }
+            el = el.parentNode;
+          }
+          xpath = '/'+xml.documentElement.nodeName.toUpperCase()+'/'+xpath;
+          xpath = xpath.replace(/\\/$/, '');
+          return xpath;
+        }
+        JAVASCRIPT
+      end
+
+      def trigger(event)
+        @element.dispatch_event(event)
+      end
+
+      def inspect
+        %(#<#{self.class} tag="#{tag_name}" path="#{path}">)
+      end
+
+      def ==(other)
+        return false unless other.is_a?(Node)
+
+        @element.evaluate('(self, other) => self == other', arg: other.element)
+      end
+
+      def find_xpath(query, **options)
+        assert_element_not_stale
+
+        @element.query_selector_all("xpath=#{query}").map do |el|
+          Node.new(@driver, @page, el)
+        end
+      end
+
+      def find_css(query, **options)
+        assert_element_not_stale
+
+        @element.query_selector_all(query).map do |el|
+          Node.new(@driver, @page, el)
+        end
+      end
+    end
+  end
+end