问题描述
在我们的一个测试中,我们正在测试 鼠标之后的链接( a
元素)样式更改。
In one of our tests, we are testing the link (a
element) style changes after a mouse over.
默认情况下,链接具有无装饰的黑色字体,但鼠标上的字体变为蓝色,链接文本变为下划线。这里是相关的测试:
By default, the link has a black font without decoration, but on mouse over the font changes to blue and the link text becomes underlined. Here is the relevant test:
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");
});
问题是,在大约十分之一的运行中,它失败,出现以下错误消息:
The problem is that in about 1 out of 10 runs, it is failing with the following error messages:
预期'无'等于'下划线'。
Expected 'none' to equal 'underline'.
它在实际改变之前读取css样式。
I suspect that it reads the css styles before they actually change.
我能做什么使测试更可靠和稳定?
What can I do to make the test more reliable and stable? Would appreciate any hints.
推荐答案
这种在CSS更新中的不同步似乎是量角器/ webdriver应该能够等待的东西。你的应用程序做什么不寻常的实现CSS更新悬停?它是指定动画还是更新延迟某种方式?
This asynchrony in the CSS update seems like something that protractor/webdriver should be able to wait for. Is your app doing anything unusual to implement the CSS update on hover? Is it specifying an animation or update delay somehow?
这就是说,我认为可能有时,量角器不知道更新可能需要一些时间,所以我认为你可以用不同的方法写测试。而不是期望的价值是你想要的(和赛车与浏览器的变化),你可以重新将测试作为等待直到价值 - 我想显示?
That said, I think there can be times when protractor cannot know that an update may take some time, so I think you can write the test with a different approach. Instead of expecting the value to be what you want (and racing with the change in the browser), can you re-phrase the test as "wait-until-value-I-want-shows-up"? (The failure case is a little slower and uglier, but hopefully that is rare.)
检查 text-decoration
移动到underline看起来更简单(并且可能两者都会立即改变,所以你只需要等待一个,然后可以检查另一个。)
Checking for the text-decoration
to move to 'underline' seems simpler (and presumably both will change "at once", so you only need to wait for one and can then check the other?)
So remove:
So remove:
expect(scope.page.forgotPassword.getCssValue("text-decoration")).toEqual("underline");
并使用类似未经测试的代码:
and use something like this untested code:
browser.wait(function() {
return scope.page.forgotPassword.getCssValue("text-decoration")).then(function(value) {
return value === 'underline';
});
(Or use the Expected Conditions infrastructure for this ?)
您应该能够隐藏某个函数中的一些丑陋:
You should be able to hide some of the ugliness in a function:
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');
这篇关于测试链接样式更改的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!