厚脸皮页面对象中的可重用组件

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。这是我所得到的。我看到了这样的东西，但看起来它仅适用于 HTML 元素。

如何使用页面对象 gem 将其转换为可重用的组件？作为旁注，我在步骤定义中使用on()方法调用我的页面对象。所以例如on(SomePage).我觉得无论解决方案如何，这都很重要。

Answer 1

小部件和页面部分是可重用组件的 2 个选项。由于您可能希望为该字段设置getter/setter，因此小部件是更好的选择。

小部件可以定义如下：

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"