将ID属性添加到Web应用程序的所有HTML元素？

Question

目前我正在使用RoR，MySQL，HTML，CSS和jQuery等构建Web门户，我收到了自动化测试工程师的请求，要求将ID属性（如果可能还有NAME属性）添加到我的应用程序的所有元素中

我很困惑这样做或许我不确定这是否是一个好的做法，所以任何人都可以帮助我解决在我的应用程序的所有元素中添加ID属性的特定缺点/问题。

谢谢，
希瓦

Answer 1

要进行可靠的前端测试，您需要能够识别某些元素，而无需使用过度特定的选择器（如果您没有参考元素，则需要这些选择器）。像body div:nth-of-type(4) ul li:nth-child(5) a之类的选择器来检查某个链接不仅显然很难看，而且还容易在标记中发生变化。一个小的改变可能会打破你的一半测试。为避免这种情况，有几种方法可以让您的测试工程师的生活更轻松：

糟糕的方式

将id分配给您的所有页面元素......

好方法

是以下方法：

1. 使用新的语义标记，例如<nav>，<header>，<footer>，<main>和<section>。
   使用这些元素，您可以构建basic structure of your page。
2. 将id分配给重要/唯一页面元素。谨慎使用它们，使用有意义的名称，并记住id代表独特的元素（可能只在页面上出现一次）！
3. 使用class属性对多个具有相似特征的元素进行分组（例如导航元素，外部/内部锚点，交互元素......）
4. 避免使用name属性，或仅在必要时使用。 HTML5在<a>等某些元素上弃用了此属性，因此我会完全避免使用它。没有必要考虑你拥有的所有其他选择。

最后，你应该与你的测试工程师进行一对编程，以获得更好的感觉，他的需求是什么，所以你不要用无用的标记来粘贴页面。

Answer 2

id允许在页面上可靠地找到特定元素，即使元素周围的标记发生变化（例如，视觉刷新）。

另一方面，无关的id会增加页面下载大小和内存占用量。

预计id也是唯一的，因此在页面上为每个元素提供一个唯一ID会很难，但这可能不是所需要的无论如何都要测试自动化。