测试链接样式更改

Question

在我们的一项测试中，我们将测试 鼠标悬停a后的链接（元素）样式更改。 __

默认情况下，链接具有黑色字体，没有修饰，但是在鼠标上时，字体变为蓝色，并且链接文本带有下划线。这是相关的测试：

it("should change font style on mouse over", function () {
    expect(scope.page.forgotPassword.getCssValue("color")).toEqual("rgba(11, 51, 60, 1)");
    expect(scope.page.forgotPassword.getCssValue("text-decoration")).toEqual("none");

    browser.actions().mouseMove(scope.page.forgotPassword).perform();

    expect(scope.page.forgotPassword.getCssValue("color")).toEqual("rgba(42, 100, 150, 1)");
    expect(scope.page.forgotPassword.getCssValue("text-decoration")).toEqual("underline");
});

问题在于，每10个运行中就有1个运行失败，并显示以下错误消息：

预期’rgba（11，51，60，1）’等于’rgba（42，100，150，1）’。

预期“无”等于“下划线”。

我怀疑它在实际更改之前先读取了css样式。

如何使测试更可靠，更稳定？将不胜感激。

Answer 1

CSS更新中的这种异步性似乎是量角器/
webdriver应该能够等待的东西。您的应用程序在执行悬停时实现CSS更新方面是否有异常行为？是否以某种方式指定动画或更新延迟？

就是说，我认为有些时候量角器无法得知更新可能需要一些时间，因此我认为您可以使用其他方法编写测试。除了期望该值是您想要的值（并与浏览器中的更改竞争），您还可以将测试改写为“
wait-until-value-I-want-ups-ups”吗？（失败案例的速度稍慢且较难看，但希望这种情况很少见。）

检查将text-decoration其移至“下划线”似乎更简单（并且可能两者都会“立即”更改，因此您只需要等待一个，然后再检查另一个即可？）

因此删除：

expect(scope.page.forgotPassword.getCssValue("text-decoration")).toEqual("underline");

并使用类似以下未经测试的代码：

browser.wait(function() { 
 return scope.page.forgotPassword.getCssValue("text-decoration")).then(function(value) {
   return value === 'underline';
 });

（或为此使用“ 预期条件”基础结构？）

您应该能够在函数中隐藏一些丑陋的地方：

function waitForValue(valPromise, expectedVal) {
   return browser.wait(function() {
      return valPromise.then(function(value) {
         return value === expectedValue;
      });
   });
}

// Now your test can contain:
waitForValue(scope.page.forgotPassword.getCssValue("text-decoration"), 'underline');