量角器模糊測試失敗（AngularJS）

Question

當我嘗試運行模糊背景圖像的單擊事件測試時，量角器出現問題。

測試代碼：

describe('homepage background', function(){ 

    it('should blur on click', function(){ 
    var searchBox = element(by.id("inputAnimation")); 

    searchBox.click().then(function(){ 
     var background = element(by.id("carousel-background")); 
     expect(background.getCssValue('-webkit-filter')).toEqual('blur(8px)'); 
    }); 
    }); 

}); 

我得到這個錯誤：

Expected 'blur(16px)' to equal 'blur(8px)'. 

的CSS：

.header-section { 
    .background-container { 
     height:inherit; background-color: @darkgray; 
     .sp-img-dyn, .sp-img { 
      overflow:hidden; width:100%; background-position:center top; background-size:cover; 
      &.blurred { overflow:hidden; -webkit-filter:blur(8px); } 
     } 
     .sp-img-dyn { max-width:1920px; height:100%; margin:0 auto; } 
     .sp-img { height: 300px; } 
    } 
} 

我在Chrome檢查，計算CSS說IT方面blur(16px)。我不確定這個bug的來源。任何指針將不勝感激。

更新：我剛剛發現，如果我專注於執行測試的chrome窗口，測試纔會成功。否則它說16px。我不確定是什麼造成了這種行爲。

Answer 1

儘量等到值變化：

var searchBox = $('#carousel-background'); 
searchBox.click(); 
browser.wait(function(){ 
    return searchBox.getCssValue('-webkit-filter').then(function(filterVal){ 
    // Wait until this becomes true. 
    return filterVal === 'blur(16px)' 
    }); 
}); 

您可以browser.sleep(milliseconds)調試你點擊，使其改變之前，請確保量角器不拾取後的值。

讓我知道它是否有效。