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

【问题标题】：Test hover state changes with protractor用量角器测试悬停状态变化
【发布时间】：2015-06-06 00:03:44
【问题描述】：

无论我做什么，我都无法通过量角器测试获得悬停状态功能。以下代码是半功能的..

在 Firefox 中运行良好
仅当我使用 Chrome 将该区域滚动到视图中时才有效。
Phantom 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);
          });
      });

【问题讨论】：

标签： javascript selenium selenium-webdriver protractor end-to-end

【解决方案1】：

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

帮助我们的是使用browser.wait()等待元素具有特定的CSS值：

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

用法：

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

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

另外，我记得滚动视图有助于解决 SO 上的类似问题：

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

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

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

关于PhantomJS的补充说明：

首先，量角器开发人员建议不要使用PhantomJS 运行protrator 端到端测试：

注意：我们建议不要使用 PhantomJS 进行 Protractor 测试。 PhantomJS 崩溃和行为有许多报告的问题不同于真正的浏览器。

除此之外，请参阅：

Using Protractor with PhantomJS

在这里，我试图直截了当地指出，您应该牺牲“Phantom JS 中的失败”参数。

【讨论】：

我试过browser.executeScript，但是不行；有什么技巧吗？
@KirkStroeck 感谢您的试用！有什么症状，您是否看到元素在浏览器中获得焦点并悬停？有什么错误吗？你试过“等待”的方法吗？

【解决方案2】：

解决方案 1：

只需为您的对象使用简单的悬停功能

<!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>

可能的解决方案 2：

用 waitForAngular() 试试这个版本；您可能需要等待 angular ：

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

可能的解决方案 3：

将 .mouseMove(obj) 替换为 .mouseMove(browser.findElement(protractor.B.id('foo'))) 并使其适应您的代码

【讨论】：

此页面未使用任何 Angular
好的...然后您可以使用第一个解决方案或将.onmouseover 和.onmouseout 集成到您当前的函数中，而不是.mouseMove ... 这个问题似乎是众所周知的量角器github.com/angular/protractor/issues/159
是的，但这需要 JS 完成 CSS 所做的一切，这是行不通的