6

假设我有这样的表格：

<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 的角度来看，我当然可以同情这会：

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

我可以在扩展我在这里开始的优点/缺点列表上获得一些帮助吗？

4

4 回答 4

5

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

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

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

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

至于您的反对意见...我不确定您所说的id任何“缺点”是如何添加属性的。杂乱无章？不，有效的可用代码。令人困惑？不，如果我看到该代码，我会首先添加 id 和正确关联的标签。将您绑定到测试工具和外部代码？究竟如何？它将使您的测试人员的生活更轻松的事实只是锦上添花。

于 2012-11-27T08:30:45.773 回答
4

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

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

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

于 2012-11-26T23:40:21.143 回答
3

If possible, their testing tool should fill in the fields based on their name attributes and the form's action attribute if there are multiple forms on the page. These are guaranteed to be as stable as the part of the server answering the POST request.

Ids, field ordering, and other attributes might change due to front-end reasons.

于 2012-11-26T23:35:45.633 回答
0

For me it depends. It depends on if the elements can be easily and reliably found without the ID.

In your example, yes, so adding the ID isn't a waste but just isn't necessary. However that's all that is, an example.

In a lot of web pages, as they become more complex and complicated, ID's become your friend, because without it you will need to look at other ways of finding elements.

Especially in the Selenium world, when you come across this problem, you generally turn to CSS and/or XPath selectors.

Other selectors are not bad things, but they can quite slow in older browsers, if you support them.

于 2012-11-27T12:38:33.650 回答