Javascript 量角器中的测试材料设计元素

是否有一种更简单的方法来测试使用量角器内材料设计元素的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”

因此，我的问题是：

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

或者，在量角器中，是否有更好的方法来测试材料设计元素块

还是我做了一些天生错误的事情

不幸的是，量角器中并没有具体的材料设计

在这种情况下，您可以获取元素的文本，获取材质设计元素的文本并替换它：

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

这一点也不漂亮，但您可以将其概括并提取到一个helper函数中，或者制作一个自定义jasmine matcher来封装清理

md icon

文本的逻辑

---

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

不过，拥有有意义的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>

电子邮件
电子邮件通知

我确实喜欢使用xpath包含。但我只想在没有其他可用的情况下使用它。我为我的开发者准备的票证是两个，给出外部div和id。只需一个md图标和span作为子元素，就可以很容易地选择有或没有id。