puppeteer-ruby 0.0.26 → 0.31.0

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/define_async_method.rb

@@ -10,12 +10,21 @@ module Puppeteer::DefineAsyncMethod
       end
 
       original_method = instance_method(async_method_name[6..-1])
-      define_method(async_method_name) do |*args|
-        Concurrent::Promises.future do
-          original_method.bind(self).call(*args)
-        rescue => err
-          Logger.new($stderr).warn(err)
-          raise err
+      define_method(async_method_name) do |*args, **kwargs|
+        if kwargs.empty? # for Ruby < 2.7
+          Concurrent::Promises.future do
+            original_method.bind(self).call(*args)
+          rescue => err
+            Logger.new($stderr).warn(err)
+            raise err
+          end
+        else
+          Concurrent::Promises.future do
+            original_method.bind(self).call(*args, **kwargs)
+          rescue => err
+            Logger.new($stderr).warn(err)
+            raise err
+          end
         end
       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