量角器模糊测试失败（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 显示它是 blur(16px)。我不确定这个错误的来源。任何指针将不胜感激。

更新：我刚刚发现只有当我专注于执行测试的 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) 进行调试，以确保量角器在更改之前没有拾取值。

让我知道它是否有效。