I have a directive that produces the following html structure:
<div class="popover ng-isolate-scope" ng-mouseover="toggle(true)" ng-mouseleave="toggle(false)" popover="" label="hover time!" trigger-class="button" content-class="specialContentClass">
<span id="thing" class="popover-trigger button">hover time!</span>
<div ng-transclude="" ng-show="show" class="popover-content ng-hide">
<div class="ng-scope">Popover content </div>
</div>
</div>
The code works fine and the popover content is correctly shown when you mouseover manually using a browser.
I'm trying to test the mouseover functionality with the following protractor test:
it('should display the popover-content on mouseover', function() {
browser.get('http://localhost:9000/');
browser.actions()
.mouseMove(element(by.css('.popover')).find()).perform();
expect(element(by.css('.popover-content'))
.isDisplayed().toBeTruthy());
});
The test seems to run, the browser opens but I don't see the popup-content displaying before the browser then closes so I'm fairly sure the mousemove bit isn't working for some reason. The following is then output in the terminal:
launcher] 0 instance(s) of WebDriver still running
[launcher] chrome #1 failed 1 test(s)
[launcher] overall: 1 failed spec(s)
[launcher] Process exited with error code 1
ycompu:angular ycompu$
I've read the documentation and using browser is definitely the right way to approach this test. I'm at a loss as the syntax looks correct to me.
click () : – Performs the mouse click event on the web element. click () : – Performs the mouse click event on the web element. mouseUp () : – Performs a mouse up event on the web page. mouseDown () : – Performs a mouse down event on the web page.
Double Click Mouse Actions in Selenium Protractor Similar to the click method, the doubleClick() method simulates a double click of the mouse. Generally, when an element is double clicked it either activates the particular element or lifts that object from a certain point.
One possible problem is that you need to make it wait for angular to load:
it('should display the popover-content on mouseover', function() {
browser.get('http://localhost:9000/');
browser.waitForAngular();
browser.actions().mouseMove(element(by.css('.popover'))).perform();
expect(element(by.css('.popover-content')).isDisplayed()).toBeTruthy();
});
I've also removed the find()
call (not sure if you really need it here) and fixed the parenthesis closing order in the last line.
I sort of discovered a workaround to the mouse hover issue on chrome by accident. If we chain the mouseMove() method twice , it works.
Code that doesn't work on chrome:
browser.actions.mouseMove(element).click().perform();
Code with workaround(which works):
browser.actions.mouseMove(element).mouseMove(element).click().perform();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With