Angular2 Karma /量角器 - 等待元素啓用

Question

在我的Angular2應用程序中，我有一個需要等待元素啓用的Karma單元測試。

我的問題是，我不知道如何使測試等待這個元素成爲啓用之前嘗試點擊它。

it('should check the fundDropdown exists', function() { 

     browser.get(url); 

     var menuStratItem = element(by.xpath('/html/body/alg-app/mainviewer/p-tabview/div/ul/li[2]/a')); 

     // Need to wait for this element to become enabled before I try to click it... 
     expect(menuStratItem.isEnabled()).toBe(true); 

     menuStratItem.click(); 

     expect(element(by.id('fundDropdown')).isPresent()).toBe(true); 
    }); 

在繼續測試之前，我該如何等待這個元素變爲可用？

Answer 1

我發現，我不得不使用.then調用來執行條件成爲真時的代碼。完整答案看起來像這樣...

var url = 'http://uat.viewer3.web.algebris.lan'; 
    var ec = protractor.ExpectedConditions 
    var timeout = 60000; 

    it('should check the fundDropdown exists', function() { 

     browser.get(url); 

     var menuStratItem = element(by.xpath('/html/body/alg-app/mainviewer/p-tabview/div/ul/li[2]/a')); 

     browser.wait(ec.elementToBeClickable(menuStratItem), timeout).then(function() { 
       expect(menuStratItem.isEnabled()).toBe(true); 
       menuStratItem.click(); 
       expect(element(by.id('fundDropdown')).isPresent()).toBe(true); 
     }); 
    }); 

Answer 2

您應該使用browser.wait()而不是您目前正在做的事情。這樣的東西應該工作：

var ec = protractor.ExpectedConditions 
var timeout = 60000; 

it('should check the fundDropdown exists', function() { 
    browser.get(url); 

    var menuStratItem = element(by.xpath('/html/body/alg-app/mainviewer/p-tabview/div/ul/li[2]/a')); 

    //use browser.wait to wait for element to be clickable 
    browser.wait(ec.elementToBeClickable(menuStratItem), timeout); 
    menuStratItem.click(); 

    expect(element(by.id('fundDropdown')).isPresent()).toBe(true); 
}); 

Answer 3

感謝Ben Cameron.It爲我工作。

它總是更好地使用isDisplayed（）而不是isPresent（）。

it('should check the fundDropdown exists', function() { 

    browser.get(url); 

    var menuStratItem = element(by.xpath('/html/body/alg-app/mainviewer/p-tabview/div/ul/li[2]/a')); 

    browser.wait(ec.elementToBeClickable(menuStratItem), 10000).then(function() { 
      expect(menuStratItem.isEnabled()).toBe(true); 
      menuStratItem.click(); 

     expect(element(by.id('fundDropdown')).isDisplayed()).toBe(true); 
    }); 

}）;