使用PageObjects測試嵌套在里面的復雜角度組件的組件

Question

我們的應用程序具有消耗具有不同復雜性消耗組件的組件的組件 所以我只想在頁面上輸入，以驗證何時設置對象文本是否正確。 問題是它是這些子組件之一。

我的同事告訴我，有兩種方法可以做到這一點，第一種方法是使用頁面對象和鏈接注釋在我的頁面上找到它，然后找到下一個id等，直到找到我的輸入。 它需要我查看另一個團隊的組件標記，以將其縮小到我想要利用的輸入。 我不相信我應該進入另一個組件定義或定義的定義，以獲得適當的鏈來獲得這個任意輸入。 它開始產生問題，如果橫向團隊創造了我不知道的變化，我的PO將被打破。

我朋友問的另一個選擇是使用fixture.query來查找組件。 這很簡單：

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

使用Query查看標記，但隨后將自動將其組件化為適當的SubComponent。 在這種情況下，comp.value是存儲在HTML中的值。 所以，如果我做了類似的事情：

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

然后我設置並以編程方式獲取，所以我有點不確定它是否正確反映屏幕上的內容。

什么是最好的行動方案？ 似乎PO會更好，但我不確定是否有辦法深入查詢我正在測試的組件之外的輸入框。

謝謝

Answer 1

我不認為我有一個確定的答案，但我可以告訴你我們是如何在谷歌這樣做的。 對於幾乎任何組件，我們在組件旁邊提供頁面對象。 這是測試該窗口小部件的兩倍，因此我們可以將其作為其他測試的可共享資源。

對於葉子小部件，頁面對象不那么充實，實際上只是用於本地測試。 對於大量共享的組件，頁面對象的可重用性會更加清晰。 如果沒有這么多的小部件API（html，css等），我們需要考慮公開，對它們的更改將非常困難（負責公開突破變更的人需要修復所有相關代碼。）有了它我們可以擁有一個僅支持頁面對象API的合同，並且html結構更改不被視為重大更改。 有時甚至我們甚至為小部件都有兩個頁面對象。 一個用於本地測試，一個用於分享。 有時，您希望為本地測試公開的API遠遠超出您希望人們自己使用的API。

然后，我們可以將這些頁面對象組合成代表窗口小部件的更高級別的頁面對象。 良好的頁面對象支持該小部件的更高級別的抽象。 例如，日歷小部件可以讓您轉到下一個/上個月，獲取當前選定的日期等，而不是直接公開完成這些操作的按鈕/輸入。

我們計划最終公開angular_components的這些頁面對象，但我們目前正在研究如何公開這些對象。 我們的內部包裝結構與我們的外部包裝結構不同。 我們每個小部件都有許多軟件包（page_objects，examples，widget本身），我們需要在公開它們之前在外部進行協調。

這是一個例子：

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