Unit testing 使用PageObjects测试内部嵌套有复杂角度组件的组件

我们的应用程序有一些组件，这些组件使用的组件具有不同的复杂性。因此，我只希望页面上的输入在设置对象时验证文本是否正确。问题是它是这些子组件之一

我的同事告诉我有两种方法可以做到这一点，第一种是使用页面对象，链接注释在我的页面上找到它，然后找到下一个id等，直到找到我的输入。它要求我查看其他团队的组件标记，将其缩小到我想要利用的输入。我不认为我应该进入另一个组件定义，或者一个定义的定义来获得适当的链来获得这个任意输入。它开始产生问题，如果一个横向团队在我不知情的情况下创建更改，我的PO将被破坏

我朋友要求的另一个选项是使用

fixture.query

查找组件。这将非常简单：

fixture.query((el)=> el.attribute["id"] == "description", 
              (comp){ 
                expect(comp.value, value); 
              });`

使用查询会查看标记，但随后会自动将其组件化为适当的子组件。在本例中，comp.value是存储在HTML中的值。所以，如果我做了如下事情：

fixture.update((MainComponent comp) { 
  comp.myinput.value = new Foo(); 
});

然后我以编程方式设置和获取它，所以我有点不确定它是否能正确反映屏幕上的内容

最好的做法是什么？看起来PO会更好，但我不确定是否有办法在我测试的组件之外深入查询输入框

---

谢谢

我想我没有一个明确的答案给你，但我可以告诉你我们在谷歌是如何做到的。对于几乎所有的组件，我们都会在组件旁边提供页面对象。这是双重的，它用于测试小部件，因此我们可以将其作为其他测试的共享资源

对于leaf小部件，页面对象的内容较少，实际上只是用于本地测试。对于大量共享的组件，页面对象的可重用性更高一些。如果没有这个小部件（HTML、CSS等）的API，我们将需要考虑公众，而对它们的更改将是非常困难的（负责使公开的更改发生的人需要修复所有相关的代码）。有了它，我们可以有一个合同，只支持页面对象API和html结构的变化不被认为是破坏性的变化。有时，我们甚至为一个小部件提供了两个页面对象。一个用于本地测试，一个用于共享。有时，您希望为本地测试公开的API远远超过您希望人们自己使用的API

然后，我们可以将这些页面对象组合成表示小部件的更高级别的页面对象。好的页面对象支持该小部件更高级别的抽象。例如，日历小部件可以让您转到下一个月/上一个月，获取当前选定的日期等，而不是直接显示完成这些操作的按钮/输入

我们计划最终为angular_组件公开这些页面对象，但我们目前正在研究如何公开这些页面对象。我们的内部包结构与外部包结构不同。每个小部件（页面对象、示例、小部件本身）都有许多包，我们需要在公开它们之前从外部协调这些包

以下是一个例子：

import 'package:pageloader/objects.dart';
import 'material_button_po.dart';

/// Webdriver page object for `material-yes-no-buttons` component.
@EnsureTag('material-yes-no-buttons')
class MaterialYesNoButtonsPO {
  @ByClass('btn-yes')
  @optional
  MaterialButtonPO yesButton;

  @ByClass('btn-no')
  @optional
  MaterialButtonPO noButton;
}

---

因此TLDR是，我的PageObject应该使用小部件的PageObject来设置、获取和检查值，而不是在我的PO中链接以查看组件？是的，至少这是我们使用的模式。如果您能展示一个代码示例，说明如何将类似的内容链接在一起，是否可能？关于使用页面加载器引用另一个页面加载器，我在网上并没有发现太多。当然，上面添加了一个例子，谢谢。这样别人也知道。此外，我以前从未使用过EnsureTag注释。非常感谢。