如何自动验证我在每个元素上都有一个 HTML Id？答案

【问题标题】：How can I automatically validate that I have an HTML Id on every element?如何自动验证我在每个元素上都有一个 HTML Id？
【发布时间】：2009-08-05 01:22:27
【问题描述】：

我项目的测试人员希望每个页面元素都有一个唯一的 HTML ID，以使他们的自动化测试更容易。

我很难记住这样做，因为我不需要 ID 进行开发。我怎样才能确保我不会忘记？

我想也许 Checkstyle 之类的东西可以告诉我，甚至是 IntelliJ 中的“检查”——但它们似乎都不支持这个功能。

有什么想法吗？

【问题讨论】：

解雇测试人员。他们显然没有能力胜任这项工作。
在页面元素上具有唯一的 HTML ID可以提高可测试性。要求他们存在并不不意味着无能。不知道他们的自动化测试框架的上下文以及页面元素在框架中的样子......
正确，这是一个自动化测试框架。
我认为这个工具是 Axe：odin.co.uk/product_axe.html 不是每个元素都需要一个 id，只是那些在功能上使用的，比如按钮、下拉列表、链接等。我希望可能有一个工具我可以定义哪些页面元素需要 id 并进行相应的验证。

标签： html automated-tests intellij-idea freemarker checkstyle

【解决方案1】：

我想到了两个想法：1. 让他们告诉你什么是没有的。如果这不起作用，2. 获得新的测试人员。 ;)

什么样的测试引擎要求每个元素都有 ID？

【讨论】：

这是一个自动化测试框架。据我了解，大多数自动化测试框架都依赖唯一的 ID 来获得一致的结果——我希望某些地方的一些开发人员以前必须适应这种情况？
我使用了几个 Web 测试框架，唯一需要 id 的地方是输入字段。无论如何应该有它们。
事实证明，每个元素都不需要 id，只是用作输入的元素。大多数输入字段已经有一个 id 或 name - 作为开发人员，我们需要它们来绑定到我们的模型！所以经过审核，只有少数东西没有按钮和链接之类的 id，并且在没有验证工具的情况下相对容易做到。
很高兴听到！最初的要求有点可疑。 ;)

【解决方案2】：

作为日常工作从事测试自动化工作的人：将唯一 ID 添加到 与之交互的元素 的请求将为自动化测试套件增加很多稳定性。

为 DOM 中的每一个元素添加一个 ID 当然会是一个荒谬的开销。

大多数框架都能够使用 CSS 或 XPath 甚至图像匹配。当开发人员和测试人员之间没有沟通渠道时，这是一个很好的后备方案。但是，如果这些团队之间存在沟通 - 添加这些是有意义的。

作为开发团队 - 您应该从这些测试中获得很多价值。在将更改部署到测试环境后，他们应该几乎可以立即为您提供反馈。如果测试是不稳定的 - 它们的价值将直线下降。让测试尽可能可靠符合每个人的利益。好的身份证在这方面是无价的。

请注意 - 自动生成 ID 的建议充满了风险。这些很容易给人一种错误的安全感，而且可能比没有更糟糕。关键是ID要稳定可靠。如果将新元素添加到上面的 DOM 中，增量生成的 ID 将发生变化。如果标签等发生微小变化，基于其内容哈希的 ID 将发生变化......

同样作为测试人员 - 如果添加 ID 会花费开发人员 5 分钟的时间，花半小时编写 xpath 来唯一标识元素是浪费时间..... :)

【讨论】：

【解决方案3】：

如果你想要一些 javascript 的东西，你可以使用 jQuery。 $("*:not([id])").css('backgroundColor', 'yellow');

将任何没有 ID 的东西涂成黄色，您只需使用 Firebug 浏览源代码并寻找黄色的东西。

$.each($(*:not([id])), function(){
    $(this)
        .css("backgroundColor", "yellow")
        .addClass("no-id");
});

【讨论】：

这只会检查元素是否有 ID。并不是说 ID 是唯一的。但是，您可以将其与 W3C 验证结合使用。
对。这假定所有 ID 由于验证是唯一的，无论如何都应该运行它以使测试人员更容易。

【解决方案4】：

在每个页面上的每个元素上设置一个 ID 对我来说似乎是一个糟糕的计划。

ID 应该是唯一的。
这会使您的网页变得臃肿
如果生成了这些...我认为对于此测试工具，它们每次都需要相同吗？
这个测试工具叫什么名字？每个元素都“需要”ID 似乎很奇怪
假设每个页面在您每次访问时可能包含略有不同的数据，这似乎是管理后勤方面的噩梦

【讨论】：

我认为工具是 Axe：odin.co.uk/product_axe.html 不是每个元素都需要一个 id，只是那些在功能上使用的，比如按钮、下拉列表、链接等。我希望可能有一个工具我可以定义哪些页面元素需要 id 并进行相应的验证。

【解决方案5】：

工具不支持这一点的原因是这是一个相当奇怪的请求。我去过那里。

上面的 jQuery 解决方案可以满足他们的要求——但可能不是他们（或您，作为一个团队）所需要的。我肯定会回到测试人员那里（而不是解雇他们！），并尝试更多地了解需求。真的是 every 元素吗？一起看几页，看看缺少什么——也许他们只是感到沮丧，需要比他们拥有的更多的 ID。

也很难相信测试工具只能通过 ID 来处理 DOM 元素；看看是否还有其他同样有效的选项，以及您可以自愿添加什么来支持它们。（肯定比到处添加 ID 更容易。）

最后，如果 ID 是唯一的方法，请考虑根据比元素计数更永久的东西来分配 ID——innerHTML 的某种散列、元素的父级 + 索引或类似的东西。

另一件需要考虑的事情——如果您需要生成 ID——是在服务器端进行。根据您使用的语言，在此处操作可能更容易，并且不会影响浏览器性能。

祝你好运！

【讨论】：

根据经验，问题在于团队不断更改包含感兴趣元素的嵌套 div 标签。结果，所有其他测试周期测试人员都必须重写他们的脚本以考虑结构的变化。当感兴趣的事物具有唯一的 id 时，您的 Selenium（或其他）测试只会引用这些 id。

【解决方案6】：

为每个元素添加 id 根本没有意义。但是，如果他们坚持，您可以添加一个小的 javascript 代码，将 Id 添加到测试站点，您可以在生产站点中省略它。

基于Chacha102的想法

$(document).ready(function() {
    var index = 1;
    $.each($(*:not([id])), function(){
        $(this).attr("id", "id1000" + index++); //or some other unique generator
    });
}

只要确保它在测试工具之前运行！

【讨论】：

ID 需要在不同构建中保持一致才能使自动化测试框架发挥作用，因此生成 id 可能不起作用。
没错。没有得到与每个构建一致的 id 概念的人真的不知道如何制作可测试的代码。