如何扩展页面对象以包含非标准 HTML 元素

Question

我正在寻找有关如何扩展页面对象 gem (github.com/cheezy/page-object) 以支持 Angular mat-chip 等元素的教程或帮助。此元素与复选框非常相似，但页面对象无法识别。我找到的最接近的东西都在这里。

https://williamjamespowell.com/2012/12/01/extending-pageobjects/

https://williamjamespowell.com/2012/12/27/gxt-pageobject-widget-example/

这些示例已有 8 年历史，我不知道它们是否仍然有效。不幸的是，这就是我发现的关于如何扩展页面对象功能的范围。

我想做的是创建一个 mat-chip 类并将其连接起来，这样我就可以像从页面对象中选择复选框一样使用它。我只是无法弄清楚必须连接的所有部件。

Answer 1

我不是 Angular 人，所以我从 https://stackoverflow.com/a/47962183/1200545 偷了一个可点击的 mat-chip 示例。根据您的实现，您可能需要调整以下代码。

首先，Page-Object 在定义使用自定义标签名称的小部件时有一个限制 - 即“mat-chip”。为了解决这个问题，我们将在 Watir 中定义一个关联的方法/定位器：

module Watir
  module Container
    def mat_chip(*args)
      HTMLElement.new(self, extract_selector(args).merge(tag_name: "mat-chip"))
    end
    def mat_chips(*args)
      HTMLElementCollection.new(self, extract_selector(args).merge(tag_name: "mat-chip"))
    end
  end
end

然后我们可以在 Page-Object 中创建一个小部件和访问器：

class MatChip < PageObject::Elements::Element
  def self.accessor_methods(widget, name)
    widget.send('define_method', "check_#{name}") do
      self.send("#{name}_element").check
    end

    widget.send('define_method', "uncheck_#{name}") do
      self.send("#{name}_element").uncheck
    end

    widget.send('define_method', "#{name}_checked?") do
      self.send("#{name}_element").checked?
    end
  end

  def set(bool = true)
    click unless set? == bool
  end
  alias check set

  def clear
    set(false)
  end
  alias uncheck clear

  def set?
    attribute_value('aria-selected') == 'true'
  end
  alias checked? set?

  PageObject.register_widget :mat_chip, self, :mat_chip
end

然后您可以使用名为“mat_chip”的访问器，与复选框相同：

class MyPage
  include PageObject

  mat_chip('mychip', index: 1)
end

page = MyPage.new(browser)
page.check_mychip
p page.mychip_checked?
#=> true
page.uncheck_mychip
p page.mychip_checked?
#=> false

或者，您可以将 mat-chip 直接用作嵌套元素：

page.mat_chip_element.check
p page.mat_chip_element.checked?
#=> true
page.mat_chip_element.uncheck
p page.mat_chip_element.checked?
#=> false