E2E 测试中的自定义类或属性答案

【问题标题】：Custom class or attribute in E2E testingE2E 测试中的自定义类或属性
【发布时间】：2016-02-05 19:20:52
【问题描述】：

拥有非常复杂的 Angular 应用程序，其中包含许多页面（状态）和条件部分，这会创建很多测试场景，我需要执行 e2e 测试。我已经厌倦了像 'div.SomeComponent > ul:nth-child(2) > ... ' 这样的嵌套选择器，甚至使用 BEM 命名（尤其是当应用程序正在发展并且很容易通过对 html 的一点点更改来破坏测试时）结构）。

问题是，你们会选择创建一些虚拟（空）类或 data-* attrs 来简化量角器（或常规）选择器，而牺牲语义吗？有什么办法？

【问题讨论】：

标签： angularjs html angularjs-e2e e2e-testing

【解决方案1】：

为避免每次开发人员更改 css 时都更改元素定义并避免使用长 css 字符串来选择元素，您可以尝试通过其他方式（id、className、model 等）引用它们。有关示例，请参阅https://github.com/angular/protractor/blob/master/docs/locators.md。

我个人最喜欢使用 element(by.css('[ng-click="executeSomeAction()"]')) 因为这很可能不会随着任何应用程序更新而改变。它也适用于其他指令。

对于具有大量页面和元素的测试应用程序，最好在一个类中定义您的元素，然后根据需要在测试规范中调用它们。这会减少规范中的代码并使它们更易于阅读。您可能还想为您的测试执行的操作/功能创建一个单独的文件。

希望这有助于回答您的问题。

【讨论】：

我完全同意量角器定位器，实际上我最喜欢的是使用 element(by.model(modelName))。案例是测试人员（不是开发人员）正在使用其他一些测试框架 - selenium，groovy。尽管选择器非常相似，但在某些情况下，我们在页面上有几个非常通用的组件。假设我们有 5 个，但首先是有条件地显示的。如果没有像 'componentName1'、'componentName2' 等一些虚拟类，或者没有一些特殊的 data-* 属性，他们发现很难挂钩到第 n 个组件，因为 'n' 是动态的。