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

Question

是否有更简单的方法来测试利用量角器内材料设计元素的angular2页面？

看起来在角度2中使用MD元素简化了大量工作。但我发现试图选择各种子元素单调乏味。

也就是说，看看下面的例子：

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

首先，如果我尝试和验证的文字，我将不得不使用一个包含方法的不是equals方法，因为结果对此的getText的将是："email Email Notification"。

所以我的问题是：

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

2. 还是有更好的办法，在量角器，测试材料设计元素块？

3. 或者我在做一些固有的错误。

Answer 1

不幸的是，没有什么具体在量角器材料设计。

您可以在情况下做什么像这些是获得元素的文本，得到的材料设计元素的文本，并替换：

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文本的逻辑。

---

是我的开发人员只是没有设置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>