在Element上增加ID属性可以使TA更容易写跟DOM交互的测试(例如WebDriver测试)。考虑下面的DOM，包含两个按钮，这两个按钮只有文案不同：

Save Button	Edit Button
<div class=”button”>Save<div>	<div class=”button”>Edit<div>

在这种情况下，如何告诉WebDriver来跟”Save”按钮交互呢？你有几个选择。一个选择是通过CSS selector来跟按钮交互：

1	div.button

然而，这种搞法不足以找到一个确定的按钮，且在CSS里也没有机制能够通过文案来筛选Dom节点。另一个选项是写XPath，不过通常比较脆弱，所以不推荐这么搞：

1	//div[@class='button' and text()='Save']

最好的选择是增加一个唯一且具备层次化特征的ID，这使得每个组件通过在其子组件前加上自己的ID。各个按钮的ID如下：

1 2	contact-form.save-button contact-form.edit-button

考虑另一个例子。让我们为Angular中重复出现的UI元素设置ID，使用ng-repeat就可以搞定。设置一个index可以用于区分不同的元素：

1	<tr id="feedback-{{$index}}" class="feedback" ng-repeat="feedback in ctrl.feedbacks" >

简单来说：ID设置是简单的，且会给测试带来巨大改变。请尽快把ID加上。

翻译自

Hexo