我们正在开发一个企业网络应用程序，目前我们聘请了一名 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
【问题讨论】：
标签： javascript angular protractor e2e-testing
我们一直致力于一个 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',
希望这会有所帮助， 干杯
【讨论】：
只是一个小评论，使用 data-test-id（自定义数据元素）来支持使用“常规”html5 ID 可能是明智的。这使您可以从以下插件中受益：https://github.com/mukeshsoni/babel-plugin-remove-data-test-id-attribute，这反过来又会清理您的生产输出。
我不知道有任何库会自动将测试 ID 分配给您的元素（很可能您希望首先控制测试 ID 的添加位置）
【讨论】：
我不建议为页面上的每个元素分配 id。对于自动化，我们可以使用CSS Selector 和XPath 从页面中定位元素，并不是唯一的方法是通过 ID 查找元素。
如果您选择使用自动 ID，则必须确保每次构建应用程序时相同的元素始终获得相同的 ID，否则每次构建应用程序时必须更改自动化脚本。
我会建议在整个页面的关键元素上添加ID，例如，我们有一个页面，我们将页面分为4个区域：头部，左侧栏，学生表，页脚。我们只能在4个区域的容器元素上添加ID，所以我们只需要添加4个ID，而不是所有元素。并在子元素的class 属性中添加css class name。
通过上述方法，自动化脚本可以使用findElement链如下：
// find the container element of area firstly
WebElement headArea = driver.findElement(<By.id('id of head area')>);
// find sub element within container element
headArea.findElement(<By.css('css selector of sub element')>);
【讨论】：