Question

假设我有一个这样的表格：

<form action="/foo" method="POST">
    <input type="text" name="username">
    <input type="text" name="password">
    <input type="submit" value="Login">
</form>

就我而言，我不需要为任何输入标签赋予“id”属性。它没有通过CSS设置样式，没有javascript引用它等等...但是，有一个QA部门会喜欢它，如果它有一个硬编码的“id”，如“登录按钮”，以便他们的自动化测试会保持稳定。

缺点由于开发人员对添加无功能用途的id属性持高度怀疑态度。

我认为这会使代码变得混乱。
让未来的开发者感到困惑它。
将我们绑定到当时使用的任何测试工具。
将我们绑定到产品代码库之外的代码。
启动代码的滑坡，知道如何测试它，反之亦然。

赞成：从质量保证的角度来看，我当然可以同情这一点：

让他们的工作更轻松。
提供稳定性（短期内）

我可以在我从这里开始的Pros / Cons列表中获得一些帮助吗？

Answer 1

在表单输入中包含id属性的一个重要功能原因是，您可以将相应的label元素与输入明确关联：

<form action="/foo" method="POST">
    <label for="username">User Name</label>
    <input type="text" id="username" name="username">
</form>

这对于可访问性和可用性非常重要。屏幕阅读器用户依赖于此关联，以便他们知道他们输入的输入。当标签正确关联时（用户可以单击标签以将焦点设置为关联的输入），还存在巨大可用性差异。 checkbox和radio输入非常明显。

Fiddle with example of both on checkboxes。 （注意点击标签而不是输入本身更容易）

至于你的反对意见......我不确定如何添加id属性来表示你所说的任何“缺点”。杂波？不，有效的可用代码。混乱？如果我看到那些代码，nope，id和正确关联的标签将是我添加的第一件事。将您绑定到测试工具和外部代码？怎么样？事实上，它将使您的测试人员的生活更轻松，这只是锦上添花。

Answer 2

如果可能，如果页面上有多个表单，他们的测试工具应根据其名称属性和表单的action属性填写字段。这些保证与响应POST请求的服务器部分一样稳定。

由于前端原因，ID，字段排序和其他属性可能会发生变化。

Answer 3

你的前2个缺点是有效的，但我不同意最后的3个。

你可以采取这样的立场，即你将为你的测试人员提供逻辑元素Id，但是他们负责使用他们使用的任何测试工具等。这意味着您与测试/工具无关，您只需提供用于测试的Id，而无需确切知道它们将如何使用。

像今天这样添加ID对于很多网络应用来说都是相当标准的做法。

Answer 4

对我而言，这取决于。这取决于是否可以在没有ID的情况下轻松可靠地找到元素。

在您的示例中，是的，因此添加ID并不是浪费，只是没有必要。然而，这就是一个例子。

在很多网页中，随着它们变得越来越复杂和复杂，ID成为你的朋友，因为没有它，你将需要寻找其他寻找元素的方法。

特别是在Selenium世界中，当您遇到此问题时，通常会转向CSS和/或XPath选择器。

其他选择器不是坏事，但如果你支持它们，它们在旧版浏览器中可能会相当慢。

提供仅用于测试目的的html元素id属性是一种好习惯吗？

4 个答案: