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

【问题标题】：Is it good practice to give html elements id attributes that are only to be used for testing purposes?为 html 元素提供仅用于测试目的的 id 属性是一种好习惯吗？
【发布时间】：2012-11-14 12:35:46
【问题描述】：

假设我有这样的表格：

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

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

缺点作为开发人员，我对添加没有任何功能用途的 id 属性持高度怀疑态度。

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

优点：从 QA 的角度来看，我当然可以同情这会：

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

我可以在此处开始的优点/缺点列表上获得一些帮助吗？

【问题讨论】：

您的意思是表单本身的 id 吗？还是里面的输入？（我猜是修辞。我明白你的意思）如果形式本身我认为只是因为它是标准的。也许它会允许它“验证”为正确的 html，如果这很重要的话。我同意为每个元素添加一个 id 是愚蠢的。那没有意义
也许表单会有一个 id，但这只是因为它是“标准的”（我认为这也是值得商榷的）。我认为更普遍的是，他们要求的是他们正在编写测试以与之交互的任何东西的 id。
这些输入上没有标签？也许您只是为了简洁而将它们排除在外？
@steveax 正确。这与问题无关。
标签与问题相关，因为出于 WAI 和可用性原因，输入字段应具有与 label 标记相关联的标签，并且自然的方式使用字段上的 id 属性。

标签： html css unit-testing testing selenium

【解决方案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 属性会如何解决您所说的任何“缺点”。杂乱无章？不，有效的可用代码。令人困惑？不，如果我看到该代码，我会首先添加 id 和正确关联的标签。将您绑定到测试工具和外部代码？究竟如何？事实上，它会让您的测试人员的生活更轻松，这只是锦上添花。

【讨论】：

实际上你可以用标签包围输入并且仍然满足可访问性要求，例如<label>User Name<input type="text" name="username"></label>

【解决方案2】：

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

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

像这样添加 ID 是当今许多网络应用程序的标准做法。

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

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

尤其是在 Selenium 世界中，当您遇到这个问题时，您通常会求助于 CSS 和/或 XPath 选择器。

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

【讨论】：

为什么添加id 属性会降低旧版浏览器的速度？