javascript - 以 Angular 自动为页面的所有元素分配 ID

Question

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

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

根据以下问题，像 body div:nth-of-type(4) ul li:nth-child(5) a 这样的选择器检查某个链接不仅明显丑陋，而且标记容易发生变化。一个小小的改变可能会破坏你一半的测试套件。
Adding ID attribute to all HTML elements of a web application?

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

Answer 1

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

1) 使用“ CSS 选择器 ”，正如您所提到的，它既丑陋又长。

2)使用元素的“ X-path ”，这又很长而且更令人困惑

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

4) 我们解决的问题是“ Classes ”，用于我们想要在测试中访问的元素。

就 id 或 classnames 而言，有 没有做这件事的捷径。您需要为 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',

希望这可以帮助，
干杯