在量角器中测试 material 个设计元素

Question

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

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

即举如下例子：

<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"。

所以我的问题是：

我的开发人员是否没有在元素上正确设置 id 或其他唯一标识符
或者在 Protractor 中是否有更好的方法来测试 material 设计元素块？
还是我做错了什么。

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");

这一点也不漂亮，但你可以将它概括并提取到辅助函数中，或者制作一个自定义的茉莉花匹配器来封装清理 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>

在量角器中测试 material 个设计元素

testing material design elements in protractor

javascript

angularjs

protractor

angular-material