原文網址：https://testing.googleblog.com/2014/08/testing-on-toilet-web-testing-made.html
Tuesday, August 12, 2014
by Ruslan Khamitov
在每個元素中增加 id 可以讓針對網頁的測試更易於操作 DOM
(e.g. WebDriver tests)。考慮到下面兩個只有內文有差異的 DOM：
| Save button | Edit button | ||||
|
|
在這個例子中，你會如何使用 WebDriver 來與 “Save” 按鈕互動呢？你有許多的選項。其中一個選擇是使用 CSS selector 來互動：
1 | div.button |
但是，這個方法並不足以認出一個特定的按鈕，而且沒有其他機制可以讓你在 CSS 中以其中的文字過濾。另一個選樣是使用 XPath，這個方法非常的脆弱且不鼓勵使用：
1 | //div[@class='button' and text()='Save'] |
你的最佳選擇是增加一個獨特的階層式分類 ID，每個 widget 會有一個 base ID，而這個 base ID 會成為其子元素的前綴。以剛剛的按鈕為例，他們的 ID 將會是：
1 2 | contact-form.save-button contact-form.edit-button |
在 Google Web Toolkit (GWT) 中，你可以在你的 widgets 覆寫 onEnsureDebugId() 來達成這個目的。這允許你可以自行選擇該如何在子元素的 ID 中使用 base ID ：
1 2 3 4 5 | @Override protected void onEnsureDebugId(String baseId) { super.onEnsureDebugId(baseId); saveButton.ensureDebugId(baseId + ".save-button"); editButton.ensureDebugId(baseId + ".edit-button"); } |
換另一個例子，我們來幫 Angular 的 ng-repeat 中的重複元素們添加 ID。設定一個 index 可以讓我們清楚的辨別出每一個在 ng-repeat 中的元素：
1 | <tr id="feedback-{{$index}}" class="feedback" ng-repeat="feedback in ctrl.feedbacks" > |
在 GWT 中你可以使用 ensureDebugId() 來達成。讓我們來為每個 table cells 設定 ID：
1 2 3 | @UiField FlexTable table; UIObject.ensureDebugId(table.getCellFormatter().getElement(rowIndex, columnIndex), baseID + colIndex + "-" + rowIndex); |
小結：Debug IDs 的設定很簡單，而且讓測試的難易度有巨大的改變。請及早加入他們。
如果你覺得這篇文章不錯，歡迎打賞
BTH: 35QooNA82isrmQLmpEnqXpJoxeZmaPubPf
ETH：0x4cf61fea5EA842D202B85158d8b5e239C872De46
或是點選下方圖片贊助我一杯咖啡：
