We recently encountered a similar issue and found a solution that worked for us.
One helpful approach was to wait for an element to reach a specific CSS value using the browser.wait() method:
function waitForCssValue (elementFinder, cssProperty, cssValue) {
return function () {
return elementFinder.getCssValue(cssProperty).then(function (actualValue) {
return actualValue === cssValue;
});
};
};
Usage example:
browser.wait(waitForCssValue(obj, 'color', color2), 5000);
In this case, we are waiting for up to 5 seconds for a CSS property color to match color2. Remember to call this after hovering over the element.
Another helpful tip is to scroll the element into view, which can resolve similar issues on Stack Overflow:
browser.executeScript("arguments[0].scrollIntoView();", obj);
Additionally, maximizing the browser window can be beneficial. This can be done in the onPrepare() function:
onPrepare: function () {
browser.driver.manage().window().maximize();
},
Regarding PhantomJS:
It's worth noting that Protractor developers advise against using PhantomJS for end-to-end tests due to potential issues:
Note: We recommend against using PhantomJS for tests with Protractor.
There are many reported issues with PhantomJS crashing and behaving
differently from real browsers.
For more information, check out:
- Using Protractor with PhantomJS
In conclusion, it may be necessary to let go of the "Fails in Phantom JS" argument.