使用 PageObjects 测试具有嵌套在内部的复杂 angular 组件的组件

Question

我们的应用程序包含使用复杂度各不相同的组件的组件。所以我只想要页面上的输入，以验证何时设置对象文本是否正确。问题是它是这些子组件之一。

我的同事告诉我有两种方法可以做到这一点，第一种是使用页面对象和链接注释在我的页面上找到它，然后找到下一个 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 会更好，但我不确定是否有办法绕过必须深入查询我正在测试的组件之外的输入框。

谢谢

Answer 1

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

对于叶小部件，页面对象没有那么充实，实际上只是用于本地测试。对于大量共享的组件，页面对象会被刷新一些以实现可重用性。如果小部件没有这么多 API（html、css 等），我们将需要考虑 public 并且对它们进行更改将非常困难（负责人进行 public 重大更改需要修复所有相关代码。）有了它，我们可以约定只支持页面对象 API 和 html 结构更改不被视为重大更改。有时我们甚至为一个小部件拥有两个页面对象。一个用于本地测试，一个用于共享。有时，您想要为本地测试公开的 API 比您希望人们自己使用的要多得多。

然后我们可以将这些页面对象组合成代表小部件的更高级别的页面对象。好的页面对象支持该小部件的更高级别的抽象。例如，日历小部件可以让您转到 next/previous 月份，获取当前选定的日期等，而不是直接公开完成这些操作的 buttons/inputs。

我们计划最终为 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;
}

使用 PageObjects 测试具有嵌套在内部的复杂 angular 组件的组件

testing a component with complex angular components nested inside using PageObjects

unit-testing

dart

angular-dart

pageobjects