javascript - 在 Protractor 中测试 Material 设计元素

Question

是否有更简单的方法来测试在 Protractor 中使用 Material 设计元素的 angular2 页面？

在 angular2 中使用 MD 元素似乎简化了很多工作。但我发现尝试选择各种子元素很乏味。

即举如下例子:

<div>
  <md-icon class="material-icons step" ng-class="md-24" ng-style="{color: font.color}">
        email
     </md-icon>
  " &nbsp Email Notification
  "
</div>

首先，如果我要尝试验证文本，我将不得不使用 contains 方法而不是 equals 方法，因为 getText 的结果将是:"email Email Notification"。

所以我的问题是:

1. 我的开发人员是否没有在元素上正确设置 id 或其他唯一标识符

2. 或者在 Protractor 中是否有更好的方法来测试 Material 设计元素 block ？

3. 还是我做错了什么。

Answer 1

不幸的是，Protractor 中的 Material 设计没有什么特别之处。

在这种情况下你可以做的是获取元素的文本，获取 Material 设计元素的文本并替换它:

var div = element(by.xpath("//div[contains(md-icon, 'email')]"));
var icon = div.element(by.tagName("md-icon"));

var text = div.getText().then(function (parentText) {
    return icon.getText().then(function (iconText) {
        return parentText.replace(iconText, "").trim();
    }); 
});

expect(text).toEqual("Email Notification");

这一点也不漂亮，但您可以将其概括并提取到辅助函数中，或者制作自定义 jasmine 匹配器来封装清理 md-icon 文本的文本逻辑。

---

Are my developers just not setting id's, or other unique identifier, on the elements properly

不过，拥有有意义的 ID 或定义元素的面向数据的类总是有帮助的。看看我是如何使用 XPath 来定位 div 元素的，检查里面是否存在 md-icon 元素。

想象一下这样的事情 - 处理起来更方便:

<div id="email">
  <md-icon id="emailIcon" class="material-icons step" ng-class="md-24" ng-style="{color: font.color}">
      email
  </md-icon>
  <span id="emailLabel">Email Notification</span>
</div>