自动以角度为页面的所有元素分配 ID

Question

我们正在开发一个企业 Web 应用程序，目前我们聘请了一名 e2e 测试工程师来执行自动化测试。

他要求我们为页面中的每个元素分配 ID。是否有工具或东西可以自动执行此操作并向 HTML 文件中的所有元素添加一些随机 ID？我们已经有一堆文件，手动添加它们需要很多时间。

根据下面的问题，A selector 喜欢body div:nth-of-type(4) ul li:nth-child(5) a检查某个链接不仅明显丑陋，而且容易发生标记变化。一个小的改变可能会破坏你的测试套件的一半。 将 ID 属性添加到 Web 应用程序的所有 HTML 元素？

我们正在使用：Angular v6 / Material v2 / Protractor / Jasmine

Answer 1

我们一直致力于一个 React 项目，我们正在使用“Mocha-Nightwatch”进行 e2e 测试。作为 UI 自动化测试人员，我需要一些东西来访问元素，有以下选项可供我选择：

1）使用“ CSS选择器”，正如你提到的那样丑陋而冗长。

2) 使用元素的“ X-path ”，这又长又容易混淆

3)元素的所有“ Id ”中最好的[因为它们在整个应用程序中都是独一无二的]。但问题是当我们给 id 一个元素时，React web pack 会在每次构建应用程序时将一个字母数字字符串附加到 id 上，每次都生成一个唯一的 id。所以id在这个场景中再次失败了。

4）我们确定的是我们想要在测试中访问的元素的“类”。

就 id 或类名而言，这样做没有捷径可走。您需要为 id/classnames 提供有意义的名称，某些工具 [可能存在也可能不存在] 会向所有根本不需要的元素添加一些随机 id，只会增加应用程序的空间复杂性。

更好的解决方案是逐个模块地使用并添加类或 id 的 [id，在您的情况下，Webpack 不会使它们动态化] 名称。

我们使用的方法是教自动化测试如何添加类名或 id，以及如何在 chrome 开发工具中检查 id/类是否真的存在。但这样做的限制是，测试人员可能会添加一些可能与您的功能冲突的类或 ID。要解决这个问题，您可以使用适当的命名约定，例如，我们使用 .test-something-something 或 #test-something-somethig 作为命名测试 ID 和类的约定。

这是您的选择器文件中的一个示例：

  usernameInput: '.test--auth-username > input',
  passwordInput: '.test--auth-password > input',
  loginButton: '.test--auth-submit > button',
  loginError: '.test--auth-error',
  inputError: '.test--inputField-errorText',

希望这有帮助，干杯