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

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引用它的样式，等等。但是，如果有一个硬编码的“ id”（例如“登录按钮”），那么质量检查部门会喜欢它，以便他们进行自动化测试会保持稳定。

缺点作为开发人员，我非常怀疑添加没有任何功能目的的id属性。

• 我认为这会使代码混乱。
• 混淆了将来的开发人员。
• 将我们绑定到当时正在使用的任何测试工具。
• 将我们绑定到产品代码库之外的代码。
• 从对代码的了解开始，了解有关如何进行测试的知识，反之亦然。

优点：从质量检查的角度来看，我当然可以同情：

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

我可以从这里开始的优点/缺点列表中获得一些帮助吗？

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输入确实很明显。

在复选框上摆弄两者的例子。（请注意，单击标签比输入本身要容易得多）

至于您的反对...我不确定添加id属性如何影响您陈述的任何“缺点”。混乱吗？不，有效的可用代码。令人困惑？如果看到该代码，我将首先添加nope，id和正确关联的标签。将您绑定到测试工具和外部代码？到底如何 它将使您的测试人员的生活变得更轻松的事实真是锦上添花。

Answer 2

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

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