Cheezy页面对象中的可重复使用组件

Question

我正在使用俗气的page-object宝石和黄瓜。

我有一个角度网站的页面对象，许多页面包含一个角度ng-select元素，这是一个下拉列表。每页的所有ng-select元素都具有相同的格式。唯一更改的是ng-select的数据和ID。我想构建一些可重用的ng-select组件，将其放入页面对象中，因为我在元素上使用了很多方法。

class NGSelectComponent
  include PageObject

  def wrapper(id)
    element(:element, tag_name: 'ng-select', id: id)
  end

  def wrapper_text_field
    wrapper.text_field_element
  end

  def wrapper_span
    wrapper.span_element(class: ['ng-value-label','ng-star-inserted'])
  end

  def wrapper_value
    wrapper_span.text
  end

  def wrapper_values
    wrapper.div_elements
  end
end

如您所见，包装方法是ng-select元素，它为定位器哈希值获取ID。据我所知。我看到了类似this的内容，但看起来仅适用于HTML元素。

如何使用页面对象gem将其变成可重复使用的组件？作为旁注，我在步骤定义中使用on()方法调用页面对象。因此，例如on(SomePage)。我觉得这很重要，但是解决方案最终得以解决。

Answer 1

小部件和页面部分是可重用组件的2个选项。您可能想为该字段设置吸气剂/设置器，因此小部件是更好的选择。

小部件可以定义为：

class NGSelectComponent < PageObject::Elements::Element
  def self.accessor_methods(accessor, name)   
    #
    # Define a getter
    #
    accessor.send(:define_method, "#{name}") do
      self.send("#{name}_element").value
    end

    #
    # Define a setter. Use "#{name}=" so that the widget can be used
    # in #populate_page_with
    # 
    #
    accessor.send(:define_method, "#{name}=") do |value|
      self.send("#{name}_element").set(value)
    end
  end

  def set(value)
    text_field_element.set(value)
  end

  def value
    text_field_element.value
  end

  def wrapper_text_field
    text_field_element
  end

  def wrapper_span
    span_element(class: ['ng-value-label','ng-star-inserted'])
  end

  def wrapper_value
    wrapper_span.text
  end

  def wrapper_values
    div_elements
  end

  PageObject.register_widget :ng_select, self, :element
end

页面对象将像其他访问器一样定义ng-select元素：

class TestPage
  include PageObject

  ng_select(:name, id: 'name')
end

为页面提供字段的获取器/设置器-例如：

page = TestPage.new(browser)
page.populate_page_with(name: 'My Name')
p page.name
#=> "My Name"