测试链接样式更改

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

按照@P.T. 的建议，我最终制作了一个自定义可重复使用的“预期条件”：

waitForCssValue = function (elementFinder, cssProperty, cssValue) {
    return function () {
        return elementFinder.getCssValue(cssProperty).then(function(actualValue) {
            return actualValue === cssValue;
        });
    };
};

示例用法：

browser.wait(waitForCssValue(scope.page.forgotPassword, "color", "rgba(42, 100, 150, 1)"), 1000);
browser.wait(waitForCssValue(scope.page.forgotPassword, "text-decoration", "underline"), 1000);

Answer 2

CSS 更新中的这种异步似乎是量角器/webdriver 应该能够等待的。您的应用程序是否在执行悬停时的 CSS 更新时做了什么不寻常的事情？它是否以某种方式指定了动画或更新延迟？

也就是说，我认为有时量角器无法知道更新可能需要一些时间，所以我认为您可以使用不同的方法编写测试。与其期望值是您想要的（并随着浏览器的变化而竞争），您可以将测试重新表述为“等待-直到-值-我-想要-显示”吗？ （失败案例有点慢和丑陋，但希望这种情况很少见。）

检查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';
 });

（或者为此使用Expected Conditions 基础架构？）

你应该能够隐藏函数中的一些丑陋之处：

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');