第 Object Gem 页。为没有 id 的元素创建访问器

Page Object Gem. Making accessors for elements without ids

假设我有一个简单的页面,其 ID 少于我想要的测试

<div class="__panel_body">
  <div class="__panel_header">Real Estate Rating</div>

  <div class="__panel_body">
    <div class="__panel_header">Property Rating Info</div>
    <a class="icon.edit"></a>
    <a class="icon.edit"></a>
  </div>

  <div class="__panel_body">
    <div class="__panel_header">General Risks</div>
    <a class="icon.edit"></a>
    <a class="icon.edit"></a>
  </div>

  <div class="__panel_body">
    <div class="__panel_header">Amenities</div>
    <a class="icon.edit"></a>
    <a class="icon.edit"></a>
  </div>

</div> 

我正在使用 Jeff Morgan 的页面 Object gem,我想为任何给定部分中的编辑链接创建访问器。

挑战在于面板 header 可以区分 body 我想要选择的内容。然后我需要访问 parent 并获取所有带有 class "icon.edit" 的链接。假设我无法更改 HTML 来解决这个问题。

这是一个开始

module RealEstateRatingPageFields

  div(:general_risks_section, ....)

  def general_risks_edit_links
    general_risks_section_element.links(class: "icon.edit")
  end

end

如何让 general_risks_section 访问器工作?

我想要用文本 'General Risks'...

向面板 header 表示 parent div

有多种方法可以获得一般风险部分。

使用块

访问器可以使用一个块,您可以在其中以更编程的方式描述如何定位元素。这允许您定位一个有区别的元素,然后遍历 DOM 到您真正想要的元素。在这种情况下,您可以找到具有匹配文本的 header 并导航到其 parent.

div(:general_risks_section) { div_element(class: '__panel_header', text: 'General Risks').parent }

使用 XPath

虽然难以读写,但您也可以使用 XPath 定位器。概念和思维过程与使用积木相同。唯一的好处是它减少了元素调用的次数,从而稍微提高了性能。

div(:general_risks_section, xpath: './/div[@class="__panel_body"][./div[@class="__panel_header" and text() = "General Risks"]]')

XPath 表示:

.//div                            # Find a div element that
  [@class="__panel_body"]         # Has the class "__panel_body" and
  [./div[                         # Contains a div element that
    @class="__panel_header" and   # Has the class "__panel_header" and
    text() = "General Risks"      # Has the text "General Risks"
  ]]

使用Body文本

鉴于 HTML,您也可以直接根据其文本定位该部分。

div(:general_risks_section, class: '__panel_body', text: 'General Risks')

请注意,这假定给定的 HTML 没有被简化。如果实际上还有其他文本节点,这可能不是最佳选择。