量角器模糊测试失败（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)调试你点击，使其改变之前，请确保量角器不拾取后的值。

让我知道它是否有效。