作者:RuslanKhamitov
原文链接:http://googletesting.blogspot.tw/2014/08/testing-on-toilet-web-testing-made.html
为Dom元素添加ID属性,能够更容易地编写DOM的交互测试(比如:WebDriver的测试)。例如,以下的DOM有两个按钮,只有标签内的文本不同:
Save button | Edit button |
<div class="button">Save</div> |
<div class="button">Edit</div> |
在这个例子中,你要如何让WebDriver与“Save”按钮进行交互呢?方法有很多,其中一种是通过CSS选择器与该按钮交互:
div.button
然而,这个方法并不能够识别特定的按钮,因为CSS中并没有通过文本进行过滤的机制。另外一个方法是写元素的XPath,但这通常不太可靠,不鼓励使用:
//div[@class='button' and text()='Save']
最好的方法是添加唯一并有层次性的ID:为页面中的每个组件分配一个父ID,而属于这个组件下的子元素都在ID前面加上该父ID。那么案例中按钮的ID将会是这样:
contact-form.save-button
contact-form.edit-button
在GWT(Google WebToolkit)中,你可以通过在组件上重写onEnsureDebugId()方法来实现。这样做能够建立一套自己的逻辑规则,将debugID应用到构成自定义组件的每个子元素中。
@Override protectedvoidonEnsureDebugId(String baseId) {
super.onEnsureDebugId(baseId);
saveButton.ensureDebugId(baseId + ".save-button");
editButton.ensureDebugId(baseId + ".edit-button");
}
现在来看另外一个例子。在Angular中,使用ng-repeat,为多个重复的UI元素设置这样的 IDs 集合。通过创建索引来帮助区分每个元素的重复实例:
<trid="feedback-{{$index}}" class="feedback" ng-repeat="feedback in ctrl.feedbacks" >
在GWT中,可以通过ensureDebugId()方法来实现,即为表格中的每个单元格设置一个ID:
@UiFieldFlexTable table;
UIObject.ensureDebugId(table.getCellFormatter().getElement(rowIndex, columnIndex),
baseID + colIndex + "-" + rowIndex);
记住:调试ID 很好设置,又在测试过程中起到很重要的作用,因此请尽早开始设置调试ID吧。