将只用于测试目的的id属性赋值给HTML元素是一种好的实践吗？

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”，比如“login-button”，这样他们的自动化测试就会保持稳定。 CONS 作为开发人员，我非常怀疑添加没有功能目的的id属性。

• 我认为它会使代码混乱。
• 让查看它的未来开发人员感到困惑。
• 将我们绑定到当前使用的测试工具。
• 将我们绑定到产品代码库之外的代码。
• 开始了解代码将如何被测试和反之亦然。

PROS: 从QA角度来看，我当然可以理解这将会:

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

你能帮我扩展一下我已经开始的Pros/Cons列表吗？

- Michael Peterson

---

你是指表单本身的ID吗？还是指内部的输入项？（我猜这是修辞手法。我能理解你的意思）如果是表单本身，我认为只是因为它是标准的。也许这将允许它作为正确的HTML进行“验证”，如果这很重要的话。我同意给每个元素添加ID是愚蠢的。那样毫无意义。 - Kai Qing

也许表单会有一个ID，但只是因为它是“标准的”（我认为这也是有争议的）。我认为更普遍的情况是，他们要求在任何他们编写测试以与之交互的内容上都有ID。 - Michael Peterson

没有标签？也许你仅仅是为了简洁而省略了它们？ - steveax

正确。这与问题无关。 - Michael Peterson

标签与问题相关，因为出于WAI和可用性原因，输入字段应该与“label”标记相关联，并且自然的方法是在字段上使用“id”属性。 - Jukka K. Korpela

感谢您的评论。我认为最大的见解是，为测试添加ID是可以的。我们应该记录它们，并允许测试编写者在需要时使用它们。双赢。 - Michael Peterson

Answer 1

在表单输入框中添加id属性的一个重要的功能性原因是，可以明确地将对应的label元素与输入框关联起来:

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

这对于无障碍性和可用性非常重要。屏幕阅读器用户依赖这种关联关系，以便知道他们正在输入什么内容。当标签正确关联时（用户可以单击标签将焦点设置到关联的输入框），可用性巨大不同。在复选框和单选框中，这非常明显。此处有复选框示例。(请注意，与其单击输入本身相比，单击标签要容易得多)。至于你的反对意见……我不确定添加id属性如何满足你所说的任何“缺点”。混乱？没有，代码有效可用。令人困惑吗？没有啊，如果我看到那段代码，我会先添加id和正确关联的标签。绑定你到测试工具和外部代码？怎么可能呢？事实上，这样做能让你的测试小组更加轻松愉快。

- steveax

---

实际上，您可以将输入包围在标签中，并仍满足无障碍要求，例如： <label>用户名<input type="text" name="username"></label> - JohnGom

Answer 2

你的前两个缺点是有道理的，但我不同意后面三个。

你可以采取这样的立场：为测试人员提供逻辑元素ID，但他们需要使用任何测试工具等来利用它们。这意味着你是测试/工具无关的，只是提供ID供测试使用，而不一定知道它们将如何使用。

像这样添加ID对于许多Web应用程序来说是相当标准的做法。

- CIGuy

Answer 3

如果可能的话，他们的测试工具应该根据表单的name属性和action属性填写字段（如果页面上有多个表单）。这些属性与服务器回答POST请求的部分一样稳定。

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

- rjmunro

Answer 4

对我而言，这取决于情况。如果元素可以在没有ID的情况下轻松可靠地找到，则不需要添加ID。

在你的例子中，是的，因此添加ID并不是浪费，但也不是必要的。然而，那只是一个例子而已。

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

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

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

- Arran

---

为什么添加id属性会减慢旧版浏览器的速度？ - steveax