用PageObjects测试内嵌复杂角元件

Question

我们的应用程序有使用组件的组件，这些组件所消耗的组件具有不同的复杂性。所以我只想要页面上的输入，以验证当一个对象被设置为文本是正确的。问题是它是这些子组件之一。

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

我的朋友要求的另一个选择是使用fixture.query查找组件。这将非常简单，如：

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

使用查询查看标记，然后将其自动组成为适当的SubComponent。在这种情况下，comp.value是存储在HTML中的值。所以，如果我做了这样的事

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

然后，我将以编程的方式设置和获取这个选项，所以我有点不确定它是否正确地反映了屏幕上的内容。

什么是最好的行动方针？看来PO会更好，但我不确定是否有必要深入查询我正在测试的组件之外的输入框。

谢谢

Answer 1

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

对于叶小部件，页面对象不那么充实，实际上只是为了进行本地测试。对于大量共享的组件，页面对象对于可重用性来说会更容易理解。如果没有小部件(html、css等)的大量API，我们就需要考虑公开，对它们的更改将非常困难(负责进行公开破坏更改的人员需要修复所有相关代码)。有了它，我们就可以有一个仅支持页面对象API的契约，而html结构的更改不被认为是破坏更改。有时，我们甚至为一个小部件设置了两个页面对象。一个用于本地测试，另一个用于共享。有时，您希望为本地测试公开的API比您希望人们使用自己的API多得多。

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

我们计划最终为angular_components公开这些页面对象，但我们目前正在研究如何公开这些对象。我们的内部包装结构与外部的不同。每个小部件都有许多包(page_objects、示例、小部件本身)，在公开这些小部件之前，我们需要对其进行外部协调。

下面是一个示例：

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;
}