puppeteer-ruby 0.28.1 → 0.31.3

data/lib/puppeteer.rb

@@ -1,6 +1,6 @@
 require 'concurrent'
 
-class Puppeteer; end
+module Puppeteer; end
 
 require 'puppeteer/env'
 
@@ -19,12 +19,14 @@ require 'puppeteer/event_callbackable'
 require 'puppeteer/if_present'
 
 # Classes & values.
+require 'puppeteer/aria_query_handler'
 require 'puppeteer/browser'
 require 'puppeteer/browser_context'
 require 'puppeteer/browser_runner'
 require 'puppeteer/cdp_session'
 require 'puppeteer/connection'
 require 'puppeteer/console_message'
+require 'puppeteer/custom_query_handler'
 require 'puppeteer/devices'
 require 'puppeteer/dialog'
 require 'puppeteer/dom_world'
@@ -41,6 +43,8 @@ require 'puppeteer/lifecycle_watcher'
 require 'puppeteer/mouse'
 require 'puppeteer/network_manager'
 require 'puppeteer/page'
+require 'puppeteer/puppeteer'
+require 'puppeteer/query_handler_manager'
 require 'puppeteer/remote_object'
 require 'puppeteer/request'
 require 'puppeteer/response'
@@ -56,9 +60,9 @@ require 'puppeteer/web_socket_transport'
 require 'puppeteer/element_handle'
 
 # ref: https://github.com/puppeteer/puppeteer/blob/master/lib/Puppeteer.js
-class Puppeteer
-  def self.method_missing(method, *args, **kwargs, &block)
-    @puppeteer ||= Puppeteer.new(
+module Puppeteer
+  module_function def method_missing(method, *args, **kwargs, &block)
+    @puppeteer ||= ::Puppeteer::Puppeteer.new(
       project_root: __dir__,
       preferred_revision: '706915',
       is_puppeteer_core: true,
@@ -70,167 +74,4 @@ class Puppeteer
       @puppeteer.public_send(method, *args, **kwargs, &block)
     end
   end
-
-  # @param project_root [String]
-  # @param prefereed_revision [String]
-  # @param is_puppeteer_core [String]
-  def initialize(project_root:, preferred_revision:, is_puppeteer_core:)
-    @project_root = project_root
-    @preferred_revision = preferred_revision
-    @is_puppeteer_core = is_puppeteer_core
-  end
-
-  # @param product [String]
-  # @param executable_path [String]
-  # @param ignore_default_args [Array<String>|nil]
-  # @param handle_SIGINT [Boolean]
-  # @param handle_SIGTERM [Boolean]
-  # @param handle_SIGHUP [Boolean]
-  # @param timeout [Integer]
-  # @param dumpio [Boolean]
-  # @param env [Hash]
-  # @param pipe [Boolean]
-  # @param args [Array<String>]
-  # @param user_data_dir [String]
-  # @param devtools [Boolean]
-  # @param headless [Boolean]
-  # @param ignore_https_errors [Boolean]
-  # @param default_viewport [Puppeteer::Viewport|nil]
-  # @param slow_mo [Integer]
-  # @return [Puppeteer::Browser]
-  def launch(
-    product: nil,
-    executable_path: nil,
-    ignore_default_args: nil,
-    handle_SIGINT: nil,
-    handle_SIGTERM: nil,
-    handle_SIGHUP: nil,
-    timeout: nil,
-    dumpio: nil,
-    env: nil,
-    pipe: nil,
-    args: nil,
-    user_data_dir: nil,
-    devtools: nil,
-    headless: nil,
-    ignore_https_errors: nil,
-    default_viewport: nil,
-    slow_mo: nil
-  )
-    options = {
-      executable_path: executable_path,
-      ignore_default_args: ignore_default_args,
-      handle_SIGINT: handle_SIGINT,
-      handle_SIGTERM: handle_SIGTERM,
-      handle_SIGHUP: handle_SIGHUP,
-      timeout: timeout,
-      dumpio: dumpio,
-      env: env,
-      pipe: pipe,
-      args: args,
-      user_data_dir: user_data_dir,
-      devtools: devtools,
-      headless: headless,
-      ignore_https_errors: ignore_https_errors,
-      default_viewport: default_viewport,
-      slow_mo: slow_mo,
-    }
-
-    @product_name ||= product
-    browser = launcher.launch(options)
-    if block_given?
-      begin
-        yield(browser)
-      ensure
-        browser.close
-      end
-    else
-      browser
-    end
-  end
-
-  # @param browser_ws_endpoint [String]
-  # @param browser_url [String]
-  # @param transport [Puppeteer::WebSocketTransport]
-  # @param ignore_https_errors [Boolean]
-  # @param default_viewport [Puppeteer::Viewport|nil]
-  # @param slow_mo [Integer]
-  # @return [Puppeteer::Browser]
-  def connect(
-    browser_ws_endpoint: nil,
-    browser_url: nil,
-    transport: nil,
-    ignore_https_errors: nil,
-    default_viewport: nil,
-    slow_mo: nil
-  )
-    options = {
-      browser_ws_endpoint: browser_ws_endpoint,
-      browser_url: browser_url,
-      transport: transport,
-      ignore_https_errors: ignore_https_errors,
-      default_viewport: default_viewport,
-      slow_mo: slow_mo,
-    }.compact
-    browser = launcher.connect(options)
-    if block_given?
-      begin
-        yield(browser)
-      ensure
-        browser.disconnect
-      end
-    else
-      browser
-    end
-  end
-
-  # @return [String]
-  def executable_path
-    launcher.executable_path
-  end
-
-  private def launcher
-    @launcher ||= Puppeteer::Launcher.new(
-      project_root: @project_root,
-      preferred_revision: @preferred_revision,
-      is_puppeteer_core: @is_puppeteer_core,
-      product: @product_name,
-    )
-  end
-
-  # @return [String]
-  def product
-    launcher.product
-  end
-
-  # @return [Puppeteer::Devices]
-  def devices
-    Puppeteer::Devices
-  end
-
-  # # @return {Object}
-  # def errors
-  #   # ???
-  # end
-
-  # @param args [Array<String>]
-  # @param user_data_dir [String]
-  # @param devtools [Boolean]
-  # @param headless [Boolean]
-  # @return [Array<String>]
-  def default_args(args: nil, user_data_dir: nil, devtools: nil, headless: nil)
-    options = {
-      args: args,
-      user_data_dir: user_data_dir,
-      devtools: devtools,
-      headless: headless,
-    }.compact
-    launcher.default_args(options)
-  end
-
-  # @param {!BrowserFetcher.Options=} options
-  # @return {!BrowserFetcher}
-  def createBrowserFetcher(options = {})
-    BrowserFetcher.new(@project_root, options)
-  end
 end

data/lib/puppeteer/aria_query_handler.rb

@@ -0,0 +1,71 @@
+class Puppeteer::AriaQueryHandler
+  private def normalize(value)
+    value.gsub(/ +/, ' ').strip
+  end
+
+  # @param selector [String]
+  private def parse_aria_selector(selector)
+    known_attributes = %w(name role)
+    query_options = {}
+    attribute_regexp = /\[\s*(?<attribute>\w+)\s*=\s*"(?<value>\\.|[^"\\]*)"\s*\]/
+    default_name = selector.gsub(attribute_regexp) do
+      attribute = $1.strip
+      value = $2
+      unless known_attributes.include?(attribute)
+        raise ArgumentError.new("Unkown aria attribute \"#{attribute}\" in selector")
+      end
+      query_options[attribute.to_sym] = normalize(value)
+      ''
+    end
+
+    if default_name.length > 0
+      query_options[:name] ||= normalize(default_name)
+    end
+
+    query_options
+  end
+
+  def query_one(element, selector)
+    context = element.execution_context
+    parse_result = parse_aria_selector(selector)
+    res = element.query_ax_tree(accessible_name: parse_result[:name], role: parse_result[:role])
+    if res.empty?
+      nil
+    else
+      context.adopt_backend_node_id(res.first['backendDOMNodeId'])
+    end
+  end
+
+  def wait_for(dom_world, selector, visible: nil, hidden: nil, timeout: nil)
+    binding_function = Puppeteer::DOMWorld::BindingFunction.new(
+      name: 'ariaQuerySelector',
+      proc: -> (selector) { query_one(dom_world.send(:document), selector) },
+    )
+    dom_world.send(:wait_for_selector_in_page,
+      '(_, selector) => globalThis.ariaQuerySelector(selector)',
+      selector,
+      visible: visible,
+      hidden: hidden,
+      timeout: timeout,
+      binding_function: binding_function)
+  end
+
+  def query_all(element, selector)
+    context = element.execution_context
+    parse_result = parse_aria_selector(selector)
+    res = element.query_ax_tree(accessible_name: parse_result[:name], role: parse_result[:role])
+    if res.empty?
+      nil
+    else
+      promises = res.map do |ax_node|
+        context.send(:async_adopt_backend_node_id, ax_node['backendDOMNodeId'])
+      end
+      await_all(*promises)
+    end
+  end
+
+  def query_all_array(element, selector)
+    element_handles = query_all(element, selector)
+    element.execution_context.evaluate_handle('(...elements) => elements', *element_handles)
+  end
+end

data/lib/puppeteer/browser_runner.rb

@@ -111,7 +111,7 @@ class Puppeteer::BrowserRunner
       end
     end
 
-    if @launch_options.handle_SIGHUP?
+    if @launch_options.handle_SIGHUP? && !Puppeteer.env.windows?
       trap(:HUP) do
         close
       end

data/lib/puppeteer/connection.rb

@@ -273,6 +273,16 @@ class Puppeteer::Connection
   def create_session(target_info)
     result = send_message('Target.attachToTarget', targetId: target_info.target_id, flatten: true)
     session_id = result['sessionId']
-    @sessions[session_id]
+
+    # Target.attachedToTarget is often notified after the result of Target.attachToTarget.
+    # D, [2020-04-04T23:04:30.736311 #91875] DEBUG -- : RECV << {"id"=>2, "result"=>{"sessionId"=>"DA002F8A95B04710502CB40D8430B95A"}}
+    # D, [2020-04-04T23:04:30.736649 #91875] DEBUG -- : RECV << {"method"=>"Target.attachedToTarget", "params"=>{"sessionId"=>"DA002F8A95B04710502CB40D8430B95A", "targetInfo"=>{"targetId"=>"EBAB949A7DE63F12CB94268AD3A9976B", "type"=>"page", "title"=>"about:blank", "url"=>"about:blank", "attached"=>true, "browserContextId"=>"46D23767E9B79DD9E589101121F6DADD"}, "waitingForDebugger"=>false}}
+    # So we have to wait for "Target.attachedToTarget" a bit.
+    20.times do
+      if @sessions[session_id]
+        return @sessions[session_id]
+      end
+      sleep 0.1
+    end
   end
 end

data/lib/puppeteer/custom_query_handler.rb

@@ -0,0 +1,51 @@
+class Puppeteer::CustomQueryHandler
+  # @param query_one [String] JS function (element: Element | Document, selector: string) => Element | null;
+  # @param query_all [String] JS function (element: Element | Document, selector: string) => Element[] | NodeListOf<Element>;
+  def initialize(query_one: nil, query_all: nil)
+    @query_one = query_one
+    @query_all = query_all
+  end
+
+  def query_one(element, selector)
+    unless @query_one
+      raise NotImplementedError.new("#{self.class}##{__method__} is not implemented.")
+    end
+
+    handle = element.evaluate_handle(@query_one, selector)
+    element = handle.as_element
+
+    if element
+      return element
+    end
+    handle.dispose
+    nil
+  end
+
+  def wait_for(dom_world, selector, visible: nil, hidden: nil, timeout: nil)
+    unless @query_one
+      raise NotImplementedError.new("#{self.class}##{__method__} is not implemented.")
+    end
+
+    dom_world.send(:wait_for_selector_in_page, @query_one, selector, visible: visible, hidden: hidden, timeout: timeout)
+  end
+
+  def query_all(element, selector)
+    unless @query_all
+      raise NotImplementedError.new("#{self.class}##{__method__} is not implemented.")
+    end
+
+    handles = element.evaluate_handle(@query_all, selector)
+    properties = handles.properties
+    handles.dispose
+    properties.values.map(&:as_element).compact
+  end
+
+  def query_all_array(element, selector)
+    unless @query_all
+      raise NotImplementedError.new("#{self.class}##{__method__} is not implemented.")
+    end
+
+    handles = element.evaluate_handle(@query_all, selector)
+    handles.evaluate_handle('(res) => Array.from(res)')
+  end
+end

data/lib/puppeteer/dom_world.rb

@@ -4,6 +4,47 @@ require 'thread'
 class Puppeteer::DOMWorld
   using Puppeteer::DefineAsyncMethod
 
+  class BindingFunction
+    def initialize(name:, proc:)
+      @name = name
+      @proc = proc
+    end
+
+    def call(*args)
+      @proc.call(*args)
+    end
+
+    attr_reader :name
+
+    def page_binding_init_string
+      <<~JAVASCRIPT
+      (type, bindingName) => {
+        /* Cast window to any here as we're about to add properties to it
+         * via win[bindingName] which TypeScript doesn't like.
+         */
+        const win = window;
+        const binding = win[bindingName];
+
+        win[bindingName] = (...args) => {
+          const me = window[bindingName];
+          let callbacks = me.callbacks;
+          if (!callbacks) {
+            callbacks = new Map();
+            me.callbacks = callbacks;
+          }
+          const seq = (me.lastSeq || 0) + 1;
+          me.lastSeq = seq;
+          const promise = new Promise((resolve, reject) =>
+            callbacks.set(seq, { resolve, reject })
+          );
+          binding(JSON.stringify({ type, name: bindingName, seq, args }));
+          return promise;
+        };
+      }
+      JAVASCRIPT
+    end
+  end
+
   # @param {!Puppeteer.FrameManager} frameManager
   # @param {!Puppeteer.Frame} frame
   # @param {!Puppeteer.TimeoutSettings} timeoutSettings
@@ -13,19 +54,29 @@ class Puppeteer::DOMWorld
     @timeout_settings = timeout_settings
     @context_promise = resolvable_future
     @wait_tasks = Set.new
+    @bound_functions = {}
+    @ctx_bindings = Set.new
     @detached = false
+
+    frame_manager.client.on_event('Runtime.bindingCalled', &method(:handle_binding_called))
   end
 
   attr_reader :frame
 
   # only used in Puppeteer::WaitTask#initialize
-  def _wait_tasks
+  private def _wait_tasks
     @wait_tasks
   end
 
+  # only used in Puppeteer::WaitTask#initialize
+  private def _bound_functions
+    @bound_functions
+  end
+
   # @param context [Puppeteer::ExecutionContext]
   def context=(context)
     if context
+      @ctx_bindings.clear
       unless @context_promise.resolved?
         @context_promise.fulfill(context)
       end
@@ -75,12 +126,13 @@ class Puppeteer::DOMWorld
     execution_context.evaluate(page_function, *args)
   end
 
-  # `$()` in JavaScript. $ is not allowed to use as a method name in Ruby.
+  # `$()` in JavaScript.
   # @param {string} selector
   # @return {!Promise<?Puppeteer.ElementHandle>}
-  def S(selector)
-    document.S(selector)
+  def query_selector(selector)
+    document.query_selector(selector)
   end
+  alias_method :S, :query_selector
 
   private def evaluate_document
     # sometimes execution_context.evaluate_handle('document') returns null object.
@@ -107,30 +159,33 @@ class Puppeteer::DOMWorld
     document.Sx(expression)
   end
 
-  # `$eval()` in JavaScript. $ is not allowed to use as a method name in Ruby.
+  # `$eval()` in JavaScript.
   # @param {string} selector
   # @param {Function|string} pageFunction
   # @param {!Array<*>} args
   # @return {!Promise<(!Object|undefined)>}
-  def Seval(selector, page_function, *args)
-    document.Seval(selector, page_function, *args)
+  def eval_on_selector(selector, page_function, *args)
+    document.eval_on_selector(selector, page_function, *args)
   end
+  alias_method :Seval, :eval_on_selector
 
-  # `$$eval()` in JavaScript. $ is not allowed to use as a method name in Ruby.
+  # `$$eval()` in JavaScript.
   # @param {string} selector
   # @param {Function|string} pageFunction
   # @param {!Array<*>} args
   # @return {!Promise<(!Object|undefined)>}
-  def SSeval(selector, page_function, *args)
-    document.SSeval(selector, page_function, *args)
+  def eval_on_selector_all(selector, page_function, *args)
+    document.eval_on_selector_all(selector, page_function, *args)
   end
+  alias_method :SSeval, :eval_on_selector_all
 
-  # `$$()` in JavaScript. $ is not allowed to use as a method name in Ruby.
+  # `$$()` in JavaScript.
   # @param {string} selector
   # @return {!Promise<!Array<!Puppeteer.ElementHandle>>}
-  def SS(selector)
-    document.SS(selector)
+  def query_selector_all(selector)
+    document.query_selector_all(selector)
   end
+  alias_method :SS, :query_selector_all
 
   # @return [String]
   def content
@@ -175,144 +230,127 @@ class Puppeteer::DOMWorld
     end
   end
 
-  # /**
-  #  * @param {!{url?: string, path?: string, content?: string, type?: string}} options
-  #  * @return {!Promise<!Puppeteer.ElementHandle>}
-  #  */
-  # async addScriptTag(options) {
-  #   const {
-  #     url = null,
-  #     path = null,
-  #     content = null,
-  #     type = ''
-  #   } = options;
-  #   if (url !== null) {
-  #     try {
-  #       const context = await this.executionContext();
-  #       return (await context.evaluateHandle(addScriptUrl, url, type)).asElement();
-  #     } catch (error) {
-  #       throw new Error(`Loading script from ${url} failed`);
-  #     }
-  #   }
-
-  #   if (path !== null) {
-  #     let contents = await readFileAsync(path, 'utf8');
-  #     contents += '//# sourceURL=' + path.replace(/\n/g, '');
-  #     const context = await this.executionContext();
-  #     return (await context.evaluateHandle(addScriptContent, contents, type)).asElement();
-  #   }
-
-  #   if (content !== null) {
-  #     const context = await this.executionContext();
-  #     return (await context.evaluateHandle(addScriptContent, content, type)).asElement();
-  #   }
-
-  #   throw new Error('Provide an object with a `url`, `path` or `content` property');
-
-  #   /**
-  #    * @param {string} url
-  #    * @param {string} type
-  #    * @return {!Promise<!HTMLElement>}
-  #    */
-  #   async function addScriptUrl(url, type) {
-  #     const script = document.createElement('script');
-  #     script.src = url;
-  #     if (type)
-  #       script.type = type;
-  #     const promise = new Promise((res, rej) => {
-  #       script.onload = res;
-  #       script.onerror = rej;
-  #     });
-  #     document.head.appendChild(script);
-  #     await promise;
-  #     return script;
-  #   }
-
-  #   /**
-  #    * @param {string} content
-  #    * @param {string} type
-  #    * @return {!HTMLElement}
-  #    */
-  #   function addScriptContent(content, type = 'text/javascript') {
-  #     const script = document.createElement('script');
-  #     script.type = type;
-  #     script.text = content;
-  #     let error = null;
-  #     script.onerror = e => error = e;
-  #     document.head.appendChild(script);
-  #     if (error)
-  #       throw error;
-  #     return script;
-  #   }
-  # }
+  # @param url [String?]
+  # @param path [String?]
+  # @param content [String?]
+  # @param type [String?]
+  def add_script_tag(url: nil, path: nil, content: nil, type: nil)
+    if url
+      begin
+        return execution_context.
+          evaluate_handle(ADD_SCRIPT_URL, url, type || '').
+          as_element
+      rescue Puppeteer::ExecutionContext::EvaluationError # for Chrome
+        raise "Loading script from #{url} failed"
+      rescue Puppeteer::Connection::ProtocolError # for Firefox
+        raise "Loading script from #{url} failed"
+      end
+    end
 
-  # /**
-  #  * @param {!{url?: string, path?: string, content?: string}} options
-  #  * @return {!Promise<!Puppeteer.ElementHandle>}
-  #  */
-  # async addStyleTag(options) {
-  #   const {
-  #     url = null,
-  #     path = null,
-  #     content = null
-  #   } = options;
-  #   if (url !== null) {
-  #     try {
-  #       const context = await this.executionContext();
-  #       return (await context.evaluateHandle(addStyleUrl, url)).asElement();
-  #     } catch (error) {
-  #       throw new Error(`Loading style from ${url} failed`);
-  #     }
-  #   }
-
-  #   if (path !== null) {
-  #     let contents = await readFileAsync(path, 'utf8');
-  #     contents += '/*# sourceURL=' + path.replace(/\n/g, '') + '*/';
-  #     const context = await this.executionContext();
-  #     return (await context.evaluateHandle(addStyleContent, contents)).asElement();
-  #   }
-
-  #   if (content !== null) {
-  #     const context = await this.executionContext();
-  #     return (await context.evaluateHandle(addStyleContent, content)).asElement();
-  #   }
-
-  #   throw new Error('Provide an object with a `url`, `path` or `content` property');
-
-  #   /**
-  #    * @param {string} url
-  #    * @return {!Promise<!HTMLElement>}
-  #    */
-  #   async function addStyleUrl(url) {
-  #     const link = document.createElement('link');
-  #     link.rel = 'stylesheet';
-  #     link.href = url;
-  #     const promise = new Promise((res, rej) => {
-  #       link.onload = res;
-  #       link.onerror = rej;
-  #     });
-  #     document.head.appendChild(link);
-  #     await promise;
-  #     return link;
-  #   }
-
-  #   /**
-  #    * @param {string} content
-  #    * @return {!Promise<!HTMLElement>}
-  #    */
-  #   async function addStyleContent(content) {
-  #     const style = document.createElement('style');
-  #     style.type = 'text/css';
-  #     style.appendChild(document.createTextNode(content));
-  #     const promise = new Promise((res, rej) => {
-  #       style.onload = res;
-  #       style.onerror = rej;
-  #     });
-  #     document.head.appendChild(style);
-  #     await promise;
-  #     return style;
-  #   }
-  # }
+    if path
+      contents = File.read(path)
+      contents += "//# sourceURL=#{path.gsub(/\n/, '')}"
+      return execution_context.
+        evaluate_handle(ADD_SCRIPT_CONTENT, contents, type || '').
+        as_element
+    end
+
+    if content
+      return execution_context.
+        evaluate_handle(ADD_SCRIPT_CONTENT, content, type || '').
+        as_element
+    end
+
+    raise ArgumentError.new('Provide an object with a `url`, `path` or `content` property')
+  end
+
+  ADD_SCRIPT_URL = <<~JAVASCRIPT
+  async (url, type) => {
+    const script = document.createElement('script');
+    script.src = url;
+    if (type)
+      script.type = type;
+    const promise = new Promise((res, rej) => {
+      script.onload = res;
+      script.onerror = rej;
+    });
+    document.head.appendChild(script);
+    await promise;
+    return script;
+  }
+  JAVASCRIPT
+
+  ADD_SCRIPT_CONTENT = <<~JAVASCRIPT
+  (content, type) => {
+    if (type === undefined) type = 'text/javascript';
+    const script = document.createElement('script');
+    script.type = type;
+    script.text = content;
+    let error = null;
+    script.onerror = e => error = e;
+    document.head.appendChild(script);
+    if (error)
+      throw error;
+    return script;
+  }
+  JAVASCRIPT
+
+  # @param url [String?]
+  # @param path [String?]
+  # @param content [String?]
+  def add_style_tag(url: nil, path: nil, content: nil)
+    if url
+      begin
+        return execution_context.evaluate_handle(ADD_STYLE_URL, url).as_element
+      rescue Puppeteer::ExecutionContext::EvaluationError # for Chrome
+        raise "Loading style from #{url} failed"
+      rescue Puppeteer::Connection::ProtocolError # for Firefox
+        raise "Loading style from #{url} failed"
+      end
+    end
+
+    if path
+      contents = File.read(path)
+      contents += "/*# sourceURL=#{path.gsub(/\n/, '')}*/"
+      return execution_context.evaluate_handle(ADD_STYLE_CONTENT, contents).as_element
+    end
+
+    if content
+      return execution_context.evaluate_handle(ADD_STYLE_CONTENT, content).as_element
+    end
+
+    raise ArgumentError.new('Provide an object with a `url`, `path` or `content` property')
+  end
+
+  ADD_STYLE_URL = <<~JAVASCRIPT
+    async (url) => {
+      const link = document.createElement('link');
+      link.rel = 'stylesheet';
+      link.href = url;
+      const promise = new Promise((res, rej) => {
+        link.onload = res;
+        link.onerror = rej;
+      });
+      document.head.appendChild(link);
+      await promise;
+      return link;
+    }
+  JAVASCRIPT
+
+  ADD_STYLE_CONTENT = <<~JAVASCRIPT
+    async (content) => {
+      const style = document.createElement('style');
+      style.type = 'text/css';
+      style.appendChild(document.createTextNode(content));
+      const promise = new Promise((res, rej) => {
+        style.onload = res;
+        style.onerror = rej;
+      });
+      document.head.appendChild(style);
+      await promise;
+      return style;
+    }
+  JAVASCRIPT
 
   class ElementNotFoundError < StandardError
     def initialize(selector)
@@ -325,14 +363,14 @@ class Puppeteer::DOMWorld
   # @param button [String] "left"|"right"|"middle"
   # @param click_count [Number]
   def click(selector, delay: nil, button: nil, click_count: nil)
-    handle = S(selector) or raise ElementNotFoundError.new(selector)
+    handle = query_selector(selector) or raise ElementNotFoundError.new(selector)
     handle.click(delay: delay, button: button, click_count: click_count)
     handle.dispose
   end
 
   # @param selector [String]
   def focus(selector)
-    handle = S(selector) or raise ElementNotFoundError.new(selector)
+    handle = query_selector(selector) or raise ElementNotFoundError.new(selector)
     handle.focus
     handle.dispose
   end
@@ -350,7 +388,7 @@ class Puppeteer::DOMWorld
   # @param selector [String]
   # @return [Array<String>]
   def select(selector, *values)
-    handle = S(selector) or raise ElementNotFoundError.new(selector)
+    handle = query_selector(selector) or raise ElementNotFoundError.new(selector)
     result = handle.select(*values)
     handle.dispose
 
@@ -359,7 +397,7 @@ class Puppeteer::DOMWorld
 
   # @param selector [String]
   def tap(selector)
-    handle = S(selector) or raise ElementNotFoundError.new(selector)
+    handle = query_selector(selector) or raise ElementNotFoundError.new(selector)
     handle.tap
     handle.dispose
   end
@@ -368,7 +406,7 @@ class Puppeteer::DOMWorld
   # @param text [String]
   # @param delay [Number]
   def type_text(selector, text, delay: nil)
-    handle = S(selector) or raise ElementNotFoundError.new(selector)
+    handle = query_selector(selector) or raise ElementNotFoundError.new(selector)
     handle.type_text(text, delay: delay)
     handle.dispose
   end
@@ -378,61 +416,127 @@ class Puppeteer::DOMWorld
   # @param hidden [Boolean] Wait for element invisible ('display: none' nor 'visibility: hidden') on true. default to false.
   # @param timeout [Integer]
   def wait_for_selector(selector, visible: nil, hidden: nil, timeout: nil)
-    wait_for_selector_or_xpath(selector, false, visible: visible, hidden: hidden, timeout: timeout)
+    # call wait_for_selector_in_page with custom query selector.
+    query_selector_manager = Puppeteer::QueryHandlerManager.instance
+    query_selector_manager.detect_query_handler(selector).wait_for(self, visible: visible, hidden: hidden, timeout: timeout)
   end
 
-  # @param xpath [String]
-  # @param visible [Boolean] Wait for element visible (not 'display: none' nor 'visibility: hidden') on true. default to false.
-  # @param hidden [Boolean] Wait for element invisible ('display: none' nor 'visibility: hidden') on true. default to false.
-  # @param timeout [Integer]
-  def wait_for_xpath(xpath, visible: nil, hidden: nil, timeout: nil)
-    wait_for_selector_or_xpath(xpath, true, visible: visible, hidden: hidden, timeout: timeout)
+  private def binding_identifier(name, context)
+    "#{name}_#{context.send(:_context_id)}"
   end
 
-  # /**
-  #  * @param {Function|string} pageFunction
-  #  * @param {!{polling?: string|number, timeout?: number}=} options
-  #  * @return {!Promise<!Puppeteer.JSHandle>}
-  #  */
-  # waitForFunction(pageFunction, options = {}, ...args) {
-  #   const {
-  #     polling = 'raf',
-  #     timeout = this._timeoutSettings.timeout(),
-  #   } = options;
-  #   return new WaitTask(this, pageFunction, 'function', polling, timeout, ...args).promise;
-  # }
 
-  # @param page_function [String]
-  # @param args [Array]
-  # @param polling [Integer|String]
+  def add_binding_to_context(context, binding_function)
+    return if @ctx_bindings.include?(binding_identifier(binding_function.name, context))
+
+    expression = binding_function.page_binding_init_string
+    begin
+      context.client.send_message('Runtime.addBinding',
+        name: binding_function.name,
+        executionContextName: context.send(:_context_name))
+      context.evaluate(expression, 'internal', binding_function.name)
+    rescue => err
+      # We could have tried to evaluate in a context which was already
+      # destroyed. This happens, for example, if the page is navigated while
+      # we are trying to add the binding
+      allowed = [
+        'Execution context was destroyed',
+        'Cannot find context with specified id',
+      ]
+      if allowed.any? { |msg| err.message.include?(msg) }
+        # ignore
+      else
+        raise
+      end
+    end
+    @ctx_bindings << binding_identifier(binding_function.name, context)
+  end
+
+  private def handle_binding_called(event)
+    return unless has_context?
+    payload = JSON.parse(event['payload']) rescue nil
+    name = payload['name']
+    args = payload['args']
+
+    # The binding was either called by something in the page or it was
+    # called before our wrapper was initialized.
+    return unless payload
+    return unless payload['type'] == 'internal'
+    context = execution_context
+    return unless @ctx_bindings.include?(binding_identifier(name, context))
+    return unless context.send(:_context_id) == event['executionContextId']
+
+    result = @bound_functions[name].call(*args)
+    deliver_result_js = <<~JAVASCRIPT
+    (name, seq, result) => {
+      globalThis[name].callbacks.get(seq).resolve(result);
+      globalThis[name].callbacks.delete(seq);
+    }
+    JAVASCRIPT
+
+    begin
+      context.evaluate(deliver_result_js, name, payload['seq'], result)
+    rescue => err
+      # The WaitTask may already have been resolved by timing out, or the
+      # exection context may have been destroyed.
+      # In both caes, the promises above are rejected with a protocol error.
+      # We can safely ignores these, as the WaitTask is re-installed in
+      # the next execution context if needed.
+      return if err.message.include?('Protocol error')
+      raise
+    end
+  end
+
+  # @param query_one [String] JS function (element: Element | Document, selector: string) => Element | null;
+  # @param selector [String]
+  # @param visible [Boolean] Wait for element visible (not 'display: none' nor 'visibility: hidden') on true. default to false.
+  # @param hidden [Boolean] Wait for element invisible ('display: none' nor 'visibility: hidden') on true. default to false.
   # @param timeout [Integer]
-  # @return [Puppeteer::JSHandle]
-  def wait_for_function(page_function, args: [], polling: nil, timeout: nil)
-    option_polling = polling || 'raf'
+  private def wait_for_selector_in_page(query_one, selector, visible: nil, hidden: nil, timeout: nil, binding_function: nil)
+    option_wait_for_visible = visible || false
+    option_wait_for_hidden = hidden || false
     option_timeout = timeout || @timeout_settings.timeout
 
-    Puppeteer::WaitTask.new(
+    polling =
+      if option_wait_for_visible || option_wait_for_hidden
+        'raf'
+      else
+        'mutation'
+      end
+    title = "selector #{selector}#{option_wait_for_hidden ? 'to be hidden' : ''}"
+
+    selector_predicate = make_predicate_string(
+      predicate_arg_def: '(selector, waitForVisible, waitForHidden)',
+      predicate_query_handler: query_one,
+      async: true,
+      predicate_body: <<~JAVASCRIPT
+        const node = await predicateQueryHandler(document, selector)
+        return checkWaitForOptions(node, waitForVisible, waitForHidden);
+      JAVASCRIPT
+    )
+
+    wait_task = Puppeteer::WaitTask.new(
       dom_world: self,
-      predicate_body: page_function,
-      title: 'function',
-      polling: option_polling,
+      predicate_body: selector_predicate,
+      title: title,
+      polling: polling,
       timeout: option_timeout,
-      args: args,
-    ).await_promise
-  end
-
-
-  # @return [String]
-  def title
-    evaluate('() => document.title')
+      args: [selector, option_wait_for_visible, option_wait_for_hidden],
+      binding_function: binding_function,
+    )
+    handle = wait_task.await_promise
+    unless handle.as_element
+      handle.dispose
+      return nil
+    end
+    handle.as_element
   end
 
-  # @param selector_or_xpath [String]
-  # @param is_xpath [Boolean]
+  # @param xpath [String]
   # @param visible [Boolean] Wait for element visible (not 'display: none' nor 'visibility: hidden') on true. default to false.
   # @param hidden [Boolean] Wait for element invisible ('display: none' nor 'visibility: hidden') on true. default to false.
   # @param timeout [Integer]
-  private def wait_for_selector_or_xpath(selector_or_xpath, is_xpath, visible: nil, hidden: nil, timeout: nil)
+  def wait_for_xpath(xpath, visible: nil, hidden: nil, timeout: nil)
     option_wait_for_visible = visible || false
     option_wait_for_hidden = hidden || false
     option_timeout = timeout || @timeout_settings.timeout
@@ -443,15 +547,23 @@ class Puppeteer::DOMWorld
       else
         'mutation'
       end
-    title = "#{is_xpath ? :XPath : :selector} #{selector_or_xpath}#{option_wait_for_hidden ? 'to be hidden' : ''}"
+    title = "XPath #{xpath}#{option_wait_for_hidden ? 'to be hidden' : ''}"
+
+    xpath_predicate = make_predicate_string(
+      predicate_arg_def: '(selector, waitForVisible, waitForHidden)',
+      predicate_body: <<~JAVASCRIPT
+        const node = document.evaluate(selector, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
+        return checkWaitForOptions(node, waitForVisible, waitForHidden);
+      JAVASCRIPT
+    )
 
     wait_task = Puppeteer::WaitTask.new(
       dom_world: self,
-      predicate_body: PREDICATE,
+      predicate_body: xpath_predicate,
       title: title,
       polling: polling,
       timeout: option_timeout,
-      args: [selector_or_xpath, is_xpath, option_wait_for_visible, option_wait_for_hidden],
+      args: [xpath, option_wait_for_visible, option_wait_for_hidden],
     )
     handle = wait_task.await_promise
     unless handle.as_element
@@ -461,34 +573,66 @@ class Puppeteer::DOMWorld
     handle.as_element
   end
 
-  PREDICATE = <<~JAVASCRIPT
-  /**
-    * @param {string} selectorOrXPath
-    * @param {boolean} isXPath
-    * @param {boolean} waitForVisible
-    * @param {boolean} waitForHidden
-    * @return {?Node|boolean}
-    */
-  function _(selectorOrXPath, isXPath, waitForVisible, waitForHidden) {
-      const node = isXPath
-          ? document.evaluate(selectorOrXPath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue
-          : document.querySelector(selectorOrXPath);
-      if (!node)
-          return waitForHidden;
-      if (!waitForVisible && !waitForHidden)
-          return node;
-      const element = /** @type {Element} */ (node.nodeType === Node.TEXT_NODE ? node.parentElement : node);
-      const style = window.getComputedStyle(element);
-      const isVisible = style && style.visibility !== 'hidden' && hasVisibleBoundingBox();
-      const success = (waitForVisible === isVisible || waitForHidden === !isVisible);
-      return success ? node : null;
-      /**
-        * @return {boolean}
-        */
-      function hasVisibleBoundingBox() {
-          const rect = element.getBoundingClientRect();
-          return !!(rect.top || rect.bottom || rect.width || rect.height);
-      }
-  }
-  JAVASCRIPT
+  # @param page_function [String]
+  # @param args [Array]
+  # @param polling [Integer|String]
+  # @param timeout [Integer]
+  # @return [Puppeteer::JSHandle]
+  def wait_for_function(page_function, args: [], polling: nil, timeout: nil)
+    option_polling = polling || 'raf'
+    option_timeout = timeout || @timeout_settings.timeout
+
+    Puppeteer::WaitTask.new(
+      dom_world: self,
+      predicate_body: page_function,
+      title: 'function',
+      polling: option_polling,
+      timeout: option_timeout,
+      args: args,
+    ).await_promise
+  end
+
+
+  # @return [String]
+  def title
+    evaluate('() => document.title')
+  end
+
+  private def make_predicate_string(predicate_arg_def:, predicate_body:, predicate_query_handler: nil, async: false)
+    predicate_query_handler_string =
+      if predicate_query_handler
+        "const predicateQueryHandler = #{predicate_query_handler}"
+      else
+        ""
+      end
+
+    <<~JAVASCRIPT
+    #{async ? 'async ' : ''}function _#{predicate_arg_def} {
+        #{predicate_query_handler_string}
+        #{predicate_body}
+
+        function checkWaitForOptions(node, waitForVisible, waitForHidden) {
+          if (!node) return waitForHidden;
+          if (!waitForVisible && !waitForHidden) return node;
+          const element =
+            node.nodeType === Node.TEXT_NODE ? node.parentElement : node;
+
+          const style = window.getComputedStyle(element);
+          const isVisible =
+            style && style.visibility !== 'hidden' && hasVisibleBoundingBox();
+          const success =
+            waitForVisible === isVisible || waitForHidden === !isVisible;
+          return success ? node : null;
+
+          /**
+          * @return {boolean}
+          */
+          function hasVisibleBoundingBox() {
+            const rect = element.getBoundingClientRect();
+            return !!(rect.top || rect.bottom || rect.width || rect.height);
+          }
+        }
+    }
+    JAVASCRIPT
+  end
 end