类似页面部分的 Ruby PageObject 设计

Question

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

无论如何，我有一个网站，我正在使用以 Angular 编写的 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]

奇怪的是，sections 上的元素都具有相同的 ID 属性和相同的类名。所以我一直在为元素使用 xpath，因为这似乎使它成为一个独特的定位器。

问题是目前有七个下拉选项，每个选项都有几个这样的部分。它们具有明显相同的元素和结构(从最终用户的 Angular 来看)，但是当您查看 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 内容。所有选项卡至少共享这些元素。 Detail Cards 中的元素不同，但结构与 Option Cards 相同。

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

Answer 1

我认为对您的问题的简短回答是否定的，没有内置支持将值传递到页面部分。不过，这里有一些我能想到的替代方案。

选项 1 - 使用 initialize_accessors

通常访问器在编译时执行。但是，您可以使用 #initialize_accessors 方法将执行推迟到页面对象(或部分)的初始化。这将允许您在基类中定义访问器，该基类在初始化时将颜色类型插入路径:

class BaseCard
  include PageObject

  def initialize_accessors
    # Accessors defined with placeholder for the color type
    self.class.text_field(:field1_limit, xpath: "/html/body/some/path/#{color_type}/more/path/input")      
  end
end

# Each card class would define its color for substitution into the accessors
class OptionRedCard < BaseCard
  def color_type
    'red'
  end
end

class OptionGreenCard < BaseCard
  def color_type
    'green'
  end
end

class BasePO
  include PageObject

  page_section(:options_red_card, OptionRedCard, xpath: '/html/body/path')
  page_section(:options_green_card, OptionGreenCard, xpath: '/html/body/path')
end

选项 2 - 使用相对路径

我建议的方法是使用相对路径，以便可以从页面部分的路径中删除颜色。根据提供的对象，您可以执行以下操作:

class OptionCard
  include PageObject

  element(:unit) { following_sibling(tag_name: "#{root.tag_name}-unit") }
  div(:field1_limit) { unit_element.tr(index: 1).text_field(index: 0) }
  div(:field1_agg) { unit_element.tr(index: 1).text_field(index: 1) }
  div(:field2_limit) { unit_element.tr(index: 2).text_field(index: 0) }
  div(:field2_agg) { unit_element.tr(index: 2).text_field(index: 1) }
end

class BasePO
  include PageObject

  # Page sections only defined to the top most element of the section (the color element)
  page_section(:options_red_card, OptionCard, xpath: "/html/body/app-component/app-page/div[2]/div/div/div[1]/div/div/div/ngb-tabset/div/div/red")
  page_section(:options_green_card, OptionCard, xpath: "/html/body/app-component/app-page/div[2]/div/div/div[1]/div/div/div/ngb-tabset/div/div/green")
end