Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

mouseover element not working using protractor

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.

like image 251
Mike Rifgin Avatar asked Feb 03 '15 11:02

Mike Rifgin


People also ask

How do you do a mouseover on a protractor?

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.

How do you use a protractor action class?

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.


2 Answers

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.

like image 105
alecxe Avatar answered Oct 11 '22 15:10

alecxe


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();
like image 23
AMOD THAKUR Avatar answered Oct 11 '22 13:10

AMOD THAKUR