帮助 Web UI 测试自动化元素/属性引用的 HTML 注释系统？

Question

是否有一个系统用于注释 HTML 以识别对 Web 用户界面测试自动化至关重要的元素/属性(通过 Selenium、HTMLUnit、Watir、Sahi 等)？该系统可能是标准或库。例如，注释可以作为 HTML 数据属性实现，这些属性仅引用属性名称、XPath 表达式或 CSS 选择器，这些选择器需要存在并保持一致以实现测试自动化目的。如果确定的属性/元素发生变化，测试自动化可能会中断，因此开发人员不应在未与负责自动化的人员协调的情况下更改它们。因此，注释至少是对开发人员的视觉提示。

但除此之外，也许系统的“执行者”部分(持续集成插件、CLI，或者可能是同一页面上的 JavaScript 库)会在某种程度上强制执行注释，如果不满足某些条件，则会迅速而明显地失败.也许标识的属性/XPath/选择器必须存在并引用定义注释的相同元素。执行者还可以收集所有注释，并可能在 Web 应用程序的每个页面上报告它们的完整列表，以用于差异通知目的。

我可能有一些细节没有很好地解决，但希望我正在寻找的要点是有意义的。免费许可证会很方便，但不是绝对必要的。

有这样的东西吗？

一个有用的答案也可能是:

• 有更好的方法来满足您的潜在需求(附有解释)。
• 我们尝试过实现它，但不值得；这就是原因。

动机:Web 用户界面测试可能对 HTML 元素和属性的更改很敏感。测试通常在集成测试作业或阶段运行，这可能明显晚于构建或单元测试。最好在构建或单元测试阶段更早地捕获 UI 元素和测试预期之间的一些潜在不匹配，并为测试自动化工程师提供更多信息以指示测试中的错误与实际中的错误。被测产品中的错误。

Answer 1

如你所说:

The annotations might for example be implemented as HTML data attributes

这就是人们使用 HTML5 的方式，因为它使我们能够将控制权交给我们的 QA 自动化团队，并让开发团队忽略他们的顾虑(更改元素上的 ID 会影响他们的测试)。

因此，一个 HTML 元素可能看起来像(一个相对人为的例子):

<div id="button" data-test-attribute="submit"></div>

这些库使用的大多数选择器都使用面向 CSS 的选择，从而使选择上述内容变得容易。有许多文章已经开始解决这个问题。

A really brief one我喜欢状态:

ID’s and also css class names have another purpose than for the usage in UI automated tests. Css classes are primarily used to style elements and they also can get uglified on the production page. ID’s have also another purpose and can also sometimes just change or they are not get implemented because they interfere with other functions on the page.

您的问题的另一部分似乎与执行有关。使用 Node.js 和 webpack 之类的东西通过手工制作的东西将其集成到您的构建过程中会相对简单(可能会大大增加您的构建时间 - 但肯定有可能)。