本文介绍了测试链接样式更改的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在我们的一个测试中,我们正在测试 鼠标之后的链接( 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');

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