在我们的一个测试中,我们正在测试鼠标悬停后的链接(元素)样式更改.
默认情况下,链接具有黑色字体而没有装饰,但鼠标上方的字体变为蓝色,链接文本变为下划线.以下是相关测试：
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");
});
问题是,在大约十分之一的运行中,它失败并出现以下错误消息：
Expected ‘rgba(11,1)’ to equal ‘rgba(42,1)’.
Expected ‘none’ to equal ‘underline’.
我怀疑它在实际更改之前会读取css样式.
我该怎么做才能使测试更可靠,更稳定？将不胜感激.
解决方法
CSS更新中的这种异步似乎是量角器/ webdriver应该能够等待的东西.你的应用程序在悬停时实现CSS更新有什么不寻常之处吗？是以某种方式指定动画或更新延迟？
也就是说,我认为有时候量角器不能知道更新可能需要一些时间,所以我认为你可以用不同的方法编写测试.而不是期望价值成为你想要的(并且与浏览器中的变化竞争),你能否重新将测试称为“等到价值 – 我想要显示”？ (失败的情况稍微慢一些,但很有希望,但很少见.)
检查文本修饰是否变为“下划线”似乎更简单(并且可能两者都会立即改变,所以你只需要等待一个,然后再检查另一个？)
删除：
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');
