測量量角器中的材料設計元素

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>