调试 IDs：让web测试更简单

作者：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吧。