admin管理员组

文章数量:1312700

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
  • Only works when I scroll the area into view with Chrome.
  • Fails in 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);
          });
      });

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
  • Only works when I scroll the area into view with Chrome.
  • Fails in 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
Share Improve this question edited Jun 12, 2015 at 15:15 alecxe 474k127 gold badges1.1k silver badges1.2k bronze badges asked Jun 6, 2015 at 0:03 Kirk StrobeckKirk Strobeck 18.7k21 gold badges82 silver badges122 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 5 +150

We've encountered something similar recently.

What helped us was to wait for an element to have a specific CSS value using browser.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.

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: function () {
    browser.driver.manage().window().maximize();
},

Additional note about PhantomJS:

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

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

Aside from that, see:

  • Using Protractor with PhantomJS

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

Solution 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 :

Try this version with waitForAngular(); you may need to wait for 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);
          });
      });

Possible Solution 3 :

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

本文标签： javascriptTest hover state changes with protractorStack Overflow

版权声明：本文标题：javascript - Test hover state changes with protractor - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741857065a2401404.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。