用量角器测试悬停状态的变化

No matter what I do I can’t get the hover state functional with protractor tests. The following code is semi functional ..

无论我做什么，我都无法用量角器测试使悬停状态起作用。下面的代码是半功能的。

Works well in Firefox
适用在Firefox中
Only works when I scroll the area into view with Chrome.
只有当我用Chrome将区域滚动到视图时才有效。
Fails in Phantom JS
在幽灵JS失败

obj
  .getCssValue('color')
  .then(function (color1) {
    browser
      .actions()
      .mouseMove(obj)
      .perform()
      .then(function () {
        obj
          .getCssValue('color')
          .then(function (color2) {
            expect(color1)
              .not
              .toEqual(color2);
          });
      });

2 个解决方案

#1

We've encountered something similar recently.

我们最近遇到了类似的情况。

What helped us was to wait for an element to have a specific CSS value using browser.wait():

帮助我们的是使用浏览器等待元素具有特定的CSS值。wait():

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

Usage:

用法:

browser.wait(waitForCssValue(obj, 'color', color2), 5000);

Here, we are basically waiting up to 5 seconds for a CSS color value to be equal to color2. Apply the wait call right after you hover the element.

在这里，我们基本上要等待5秒CSS颜色值等于color2。在元素悬停之后立即应用等待调用。

Also, I remember having that scrolling into view helped to resolve similar issues on SO:

另外，我记得有一个滚动视图帮助解决了类似的问题:

browser.executeScript("arguments[0].scrollIntoView();", obj);

Maximizing browser window can also help, we usually do it in onPrepare():

最大化浏览器窗口也有帮助，我们通常在onPrepare()中做:

onPrepare: function () {
    browser.driver.manage().window().maximize();
},

Additional note about PhantomJS:

额外注意PhantomJS:

First of all, protractor developers recommend against running protrator end-to-end tests with PhantomJS:

首先，pro拖拉机开发人员建议不要使用PhantomJS运行protrator端到端测试:

Note: We recommend against using PhantomJS for tests with Protractor. There are many reported issues with PhantomJS crashing and behaving differently from real browsers.

注意:我们建议不要在量角器的测试中使用PhantomJS。有许多报告的问题与幽灵的崩溃和行为不同于真正的浏览器。

Aside from that, see:

除此之外,见:

Using Protractor with PhantomJS
用量角器PhantomJS

Here I'm trying to get to the point, that you should sacrifice the "Fails in Phantom JS" argument.

这里我想说的是，您应该牺牲“幻影JS中的失败”的论点。

#2

Solution 1 :

解决方案1:

Just use a simple hover function for your object

只需为对象使用一个简单的悬停函数。

<!DOCTYPE html>
<html>
<body>

<p onmouseover="colorin(this)" onmouseout="colorout(this)">
Testing colorin and colorout function for mouse hover
</p>


<script>
function colorout(x) {
    x.style.color = "#000000";
}

function colorin(x) {
    x.style.color = "#7FAF00";
}
</script>

</body>
</html>

Possible Solution 2 :

可能的解决方案2:

Try this version with waitForAngular(); you may need to wait for angular :

使用waitforangle()尝试此版本;您可能需要等待角度:

obj
  .getCssValue('color')
  .then(function (color1) {
    browser.waitForAngular();
    browser
      .actions()
      .mouseMove(obj)
      .perform()
      .then(function () {
        obj
          .getCssValue('color')
          .then(function (color2) {
            expect(color1)
              .not
              .toEqual(color2);
          });
      });

Possible Solution 3 :

可能的解决方案3:

Replace .mouseMove(obj) with .mouseMove(browser.findElement(protractor.B.id('foo'))) and adapt it to your code

将.mouseMove(obj)替换为.mouseMove(browser.findElement, protractor.B.id， 'foo')并将其修改为您的代码

#1