类似页面节的Ruby PageObject设计

Question

我正在使用Cheezy Page Object gem（这也意味着我正在使用Watir，这也意味着我正在使用Selenium）。我还明确加载了watir宝石。

无论如何，我有一个网站正在建模，其中UI用成角度的形式书写，其中有1页的内容根据下拉选择而改变。该页面包含多个部分，但每个下拉选项的显示部分均相同。唯一的区别是我用来到达那里的xpath定位器（各节中没有唯一的ID）。

例如，我有一个像html/body/div[1]/div/div[1]/div/**green**/div/div[1]这样的xpath>

和另一个类似

html/body/div[1]/div/div[1]/div/**red**/div/div[1]
奇怪的是，各节中的元素都具有相同的ID属性和相同的类名。因此，我一直在使用xpath作为元素，因为这似乎使其成为唯一的定位器。

问题是目前有七个下拉选项，每个选项都有几个部分。并且它们具有明显相同的元素和结构（从最终用户的角度来看），但是当您查看html时，唯一的区别是定位符，因此元素的定位符是这样的：

html/body/div[1]/div/div[1]/div/green/div/div[1]/**<element>**

和另一个类似

html/body/div[1]/div/div[1]/div/red/div/div[1]/**<element>**
在我当前的设计中，我创建了一页，并为页面上的每个部分创建了页面部分。将页面部分的数量与下拉选项的数量相乘，您会发现它很多。有些选择确实会产生额外的元素，但是所有部分之间仍然存在一些共同的元素。我还必须在七个不同的页面上重复所有这些元素，因为xpath不同。我是否可以通过某种方式将一些初始值设定项传递给PageObject page_section，例如type-a或type-b字符串，然后据此我也可以为所有元素选择正确的xpath？

所以就像我有文本字段一样，就像基础页面对象page_section：

text_field(:team, xpath: "...#{type_variable}")

我可以做类似section = SomePageObject.page_section_name(type_variable)的事情吗？

编辑：每个请求添加页面对象代码

class BasePO
  include PageObject

  #Option S1 Cards
  page_section(:options_red_card, OptionRedCard, xpath: "/html/body/app-component/app-page/div[2]/div/div/div[1]/div/div/div/ngb-tabset/div/div/red/div[2]/div[2]/div/div/div/div")
  page_section(:options_green_card, OptionGreenCard, xpath: "/html/body/app-component/app-page/div[2]/div/div/div[1]/div/div/div/ngb-tabset/div/div/green/div[2]/div[2]/div/div/div/div")
  page_section(:options_yellow_card, OptionYellowCard, xpath: "/html/body/app-component/app-page/div[2]/div/div/div[1]/div/div/div/ngb-tabset/div/div/yellow/div[2]/div[2]/div/div/div/div")

  #Detail S2 Cards
  page_section(:detail_red_card, DetailRedCard, xpath: "/html/body/app-component/app-page/div[2]/div/div/div[1]/div/div/div/ngb-tabset/div/div/red/div[1]/div/div/div")
  page_section(:detail_green_card, DetailGreenCard, xpath: "/html/body/app-component/app-page/div[2]/div/div/div[1]/div/div/div/ngb-tabset/div/div/green/div[1]/div/div/div")
  page_section(:detail_yellow_card, DetailYellowCard, xpath: "/html/body/app-component/app-page/div[2]/div/div/div[1]/div/div/div/ngb-tabset/div/div/yellow/div[1]/div/div/div")

end
EDIT2：每个请求添加page_section内容。所有选件卡均至少共享这些元素。详细信息卡中的元素不同，但与选件卡的结构相同。

class OptionRedCard
  include PageObject

  def field1_limit
    text_field_element(xpath: "/html/body/app-component/app-page/div[2]/div/div/div[1]/div/div/div/ngb-tabset/div/div/red-unit/div[2]/div[2]/div/div/div/red/form/div/div/div/table/tbody/tr[2]/td[2]/div/div[1]/div/currency/div/input")
  end

  def field1_agg
    text_field_element(xpath: "/html/body/app-component/app-page/div[2]/div/div/div[1]/div/div/div/ngb-tabset/div/div/red-unit/div[2]/div[2]/div/div/div/red/form/div/div/div/table/tbody/tr[2]/td[2]/div/div[2]/div/currency/div/input")
  end

  def field2_limit
    text_field_element(xpath: "/html/body/app-component/app-page/div[2]/div/div/div[1]/div/div/div/ngb-tabset/div/div/red-unit/div[2]/div[2]/div/div/div/red/form/div/div/div/table/tbody/tr[3]/td[2]/div/div[1]/div/currency/div/input")
  end

  def field2_agg
    text_field_element(xpath: "/html/body/app-component/app-page/div[2]/div/div/div[1]/div/div/div/ngb-tabset/div/div/red-unit/div[2]/div[2]/div/div/div/red/form/div/div/div/table/tbody/tr[3]/td[2]/div/div[2]/div/currency/div/input")
  end

  def field3_limit
    text_field_element(xpath: "/html/body/app-component/app-page/div[2]/div/div/div[1]/div/div/div/ngb-tabset/div/div/red-unit/div[2]/div[2]/div/div/div/red/form/div/div/div/table/tbody/tr[4]/td[2]/div/div[1]/div/currency/div/input")
  end

  def field3_agg
    text_field_element(xpath: "/html/body/app-component/app-page/div[2]/div/div/div[1]/div/div/div/ngb-tabset/div/div/red-unit/div[2]/div[2]/div/div/div/red/form/div/div/div/table/tbody/tr[4]/td[2]/div/div[2]/div/currency/div/input")
  end

  def field1_agg_value
    field1_agg.attribute_value('data-value')
  end

  def field2_agg_value
    field2_agg.attribute_value('data-value')
  end

  def field3_agg_value
    field3_agg.attribute_value('data-value')
  end

end

我正在使用Cheezy Page Object gem（这也意味着我正在使用Watir，这也意味着我正在使用Selenium）。我还明确加载了watir宝石。无论如何，我有一个网站正在使用...

Answer 1

我认为您问题的简短答案是，不，没有内置支持将值传递给页面部分。但是，这是我可以想到的一些替代方法。