测试链接样式更改 [英] Testing link style changes

问题描述

在我们的一个测试中，我们正在测试 鼠标之后的链接（ 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:

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

Expected 'rgba(11, 51, 60, 1)' to equal 'rgba(42, 100, 150, 1)'.

预期'无'等于'下划线'。

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

这篇关于测试链接样式更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！