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

Test hover state changes with protractor

本文关键字：变化 状态 悬停 量角器 测试      更新时间：2023-09-26

无论我怎么做，我都无法通过量角器测试使悬停状态正常运行。下面的代码是半功能的。

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

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

帮助我们的是使用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);

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

另外，我记得在SO:

上使用滚动到视图有助于解决类似的问题。
browser.executeScript("arguments[0].scrollIntoView();", obj);

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

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

PhantomJS的附加说明:

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

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

除此之外，参见:

    在phanttomjs中使用Protractor

这里我想说的是，你应该牺牲"failed in Phantom JS"参数。

解决方案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')))并使其适应您的代码

相关文章：