mouseover element not working using protractor

Question

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.

Answer 1

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.}

Answer 2

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();

Answer 3

For none angular sites , please try the below code.The code has been tested and passed in protractor --version 5.4.2 with Chrome 79 the latest as per today .

describe('My first test class', function() {
    it('My function', function() {
        browser.driver.ignoreSynchronization = true;// for non-angular set true. default value is false 
        browser.waitForAngularEnabled(false);
        browser.driver.get('http://demoqa.com/menu/');
       //var menuElectronics= element(by.id('ui-id-4'));//We can define an element and move  to it 
      //browser.actions().mouseMove(menuElectronics).perform();
      //Directly find the element using id
      browser.actions().mouseMove(element(by.id('ui-id-4'))).perform();
       //Click on the element that appeared after hover over the electronics
       element(by.id('ui-id-7')).click();   
    });

})

Answer 4

Use browser.waitForAngular() before calling browser.actions().mouseMove("mouseoverelement").perform();... because you need to wait till angular load.

it('mouseover test', function() {
     ....
     ....
     browser.waitForAngular();
     browser.actions().mouseMove(element(by.css('#mouseoverelement'))).perform();
     expect(element(by.css('#mouseoverelement')).isDisplayed()).toBeTruthy();
 });

Answer 5

use this method pass the locater to the method this is working fine

---

mouseHover: function (locator) {
        return browser.actions().mouseMove(locator).perform();
    },