自动为 angular 中页面的所有元素分配 ID

Question

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

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

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

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

Answer 1

只是一个小评论，使用 data-test-id（自定义数据元素）以支持使用 "regular" html5 ID 可能是明智的。这使您可以从插件中受益，例如：https://github.com/mukeshsoni/babel-plugin-remove-data-test-id-attribute，这反过来会清理您的生产输出。

我不知道有任何库会自动为您的元素分配测试 ID（很可能您希望首先控制测试 ID 的添加位置）

Answer 2

我们一直致力于 React 项目，我们正在使用 'Mocha-Nightwatch' 对其进行端到端测试。作为一名 UI 自动化测试人员，我需要一些东西来访问这些元素，我有以下选项：

1) 使用“CSS 选择器”，就像你提到的那样丑陋又长。

2) 使用元素的“X-path”，又长又乱

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

4) 对于我们想要访问的元素，我们解决的问题是“类”测试。

就 id 或 classnames 而言，没有捷径。您需要为 id/classnames 提供有意义的名称，某些工具 [可能存在也可能不存在] 会为所有根本不需要的元素添加一些随机 ID，只会增加 space 的复杂性你的申请。

更好的解决方案是逐个模块并添加 class 或 id 的 [id 它们不是由 Webpack 在你的情况下动态] 自己的名称。

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

的约定

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

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

希望这对您有所帮助，干杯

Answer 3

我不建议为页面上的每个元素分配 id。对于自动化，我们可以使用 CSS Selector 和 XPath 从页面定位元素，通过 ID 查找元素不是唯一的方法。

如果您选择使用自动 ID，则必须确保每次构建应用时相同的元素始终获得相同的 ID，否则每次构建应用时自动化脚本都必须更改。

我会推荐给整个页面的关键元素加上ID，比如我们有一个页面，我们把页面分成4个区域：head，left side bar，student table，footer。我们只能在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')>);

自动为 angular 中页面的所有元素分配 ID

Assigning ID to all elements of a page in angular automatically

javascript

protractor

e2e-testing

angular