crazy_page.rb

# frozen_string_literal: true

class CrazyPage < BasePage
    class CrazyParentSection< BasePage
      custom_text_field(:crazy_text, index: 1)
    end

    page_section(:crazy_parent, CrazyParentSection, class: 'class1 class2 class3', visible_text: 'Name')

    # now in your step def, you can call
    # on(CrazyPage).populate('ABC')
    def populate(value)
        self.crazy_parent.crazy_text = value
    end
end

custom_text_field.rb

# frozen_string_literal: true

require 'page-object/accessors'
require 'widget_register'

# Declare your custom element - This adds your tag to the Watir::Element Class as an individual element and a collection
Watir::Container.register_custom_element('custom_text_field', 'custom_text_fields', 'CustomTextField', 'Element')

# We now need to add in the methods to find the element

module PageObject
  module Platforms
    module Watir
      # Modify the PageObject class to add in calls to locate the new element or a collection of the new elements
      class PageObject
        def custom_text_field_for(identifier)
          find_watir_element("custom_text_field(identifier)", Elements::Element, identifier, 'custom_text_field')
        end

        def custom_text_fields_for(identifier)
          find_watir_elements("custom_text_fields(identifier)", Elements::Element, identifier, 'custom_text_fields')
        end
      end
    end
  end

  # Add Custom accessors if we need them.
  module Accessors
    #
    # adds a custom control 'custom_text_field' to the page object

    # @param [Symbol] name This is the Page Object human name we declare, we use it to generate methods
    # @param [Hash] identifier how we identify the element.
    # @param [block] block optional block to be invoked when element method is called
   
    #
    def custom_text_field(name, identifier = { index: 0 }, &block)
      # This next line is required!  Otherwise, PageObject won't be able to find the _element calls
      standard_methods(name, identifier, 'custom_text_field_for', &block)


      # this method makes calling the PO declared item the same as calling _element
      # Example, declare
      # custom_text_field(:crazy_text, class: 'slds-is-active')
      # Then using
      # self.crazy_text is the same as self.crazy_text_element
      define_method(name) do
        self.send("#{name}_element")
      end

      # self.crazy_text = 'ABC" is invoked due to this
      define_method("#{name}=") do |value|
        self.send("#{name}_element").send_keys(value)
        self.send("#{name}_element").fire_event 'blur'

      end
    end
  end
end

widget_register.rb

# frozen_string_literal: true

require 'watir'
require 'page-object'

# Extending Watir module
module Watir
  # Extending Container module
  module Container

    def self.register_custom_element(element_tag, element_pluralized, element_class, inherit_from_element = Element)
      # Defines the element in Watir as a method
      define_method(element_tag.to_sym) { |*args| eval(element_class).new(self, extract_selector(args).merge(tag_name: element_tag.gsub('_', '-'))) }

      # Defines a collection of elements in Watir as a method
      define_method(element_pluralized) { |*args| eval("#{element_class}Collection").new(self, extract_selector(args).merge(tag_name: element_tag.gsub('_', '-'))) }

      # Instantiate the classes for a single element and the collection of elements
      Container.const_set(element_class, Class.new(Element))
      Container.const_set("#{element_class}Collection", Class.new(ElementCollection) do
        define_method('element_class') { eval(element_class) }
      end)

      # Interacting with the element
      Object.const_set(element_class, Class.new(eval("PageObject::Elements::#{inherit_from_element}")))

      # Registering the class with the PageObject gem.
      # register_widget accepts a tag which is used as the accessor (ex: mh_button), the class which is added to
      # the Elements module (ex: MHButton), and a html element tag which is used as the html element (ex: mh_button).
      PageObject.register_widget element_tag.to_sym, eval(element_class), element_tag.to_sym

    end
  end
end