protractor browser.actions().mouseMove() not showing hover effects

Question

I am new to protractor and trying to add tests for a slider panel which is closed by default and hovering mouse over will open it and then there are a list of items on the slider panel to pick.

<div class="slider" [ngClass]="{ closed: state === 1, open: state === 2}" (click)="onClick($event)" (mouseover)="onMouseOver($event)" (mouseleave)="onMouseLeave($event)">

I tried multiple ways, none of them work.

First attempt:(no hover effect, ie, do nothing)

browser.actions().mouseMove(element(by.css('.slider.closed'))).perform();

Second attempt:( got an error: An invalid or illegal selector was specified)

browser.actions().mouseMove(element(by.css('[(mouseover)="onMouseOver($event)"]'))).perform();

Third attempt: (got an error: No element found using locator)

browser.actions().mouseMove(element(by.css('[mouseover="onMouseOver($event)"]'))).perform();

Answer 1

This should work, unless you have multiple elements with class .slider. At which point, you might try including a parent object, or another locator strategy.

browser.actions().mouseMove($('.slider')).perform();