Triggering Hover Events with moveTo()

[Kunle Ekunkonye]

I'm having difficulty getting the moveTo and moveToElement commands to trigger hover events.

Can someone write a quick test in nightwatch to try to move the mouse over the red box on this page (#red): http://unixpapa.com/js/testover.html

And see if you can get any mouse coordinate output in the window.

[Preiksha Sipani]

Hi,

The following code can help you to get the coordinates :

.getLocation("#id", function (result) {

          console.log(result.x);

          console.log(result.x);

          })

[Andrew King]

module.exports = {

  '@tags': [''],

  before : function(browser) {

    browser.maximizeWindow();

  },

  'Step 1 - ' : function (browser) {

  browser.url('http://unixpapa.com/js/testover.html');

browser.waitForElementPresent(`//div[@id='red']`, 3000)

.moveToElement(`//div[@id='red']`, 1, 1, function(){

browser.pause();

})    

  },

  after : function(browser) {

    browser.end();

 },

};

[Sudhir Goswami]

Hi All,

I am facing the same scenario, but in my UI element is hidden. It's like Menu when I am hovering mouse left corner, then only it appear.

Please help

Thanks

Sudhir

[Milton Pereira]

Hi Sudhir,

You can try this 

module.exports = {

  'mouse hover example' : function (client) {

    client

      .url('http://www.seleniumframework.com/demo-sites/') 

      .waitForElementPresent('li.menu-item-479', 10000)

    .moveToElement('li.menu-item-479', 1, 1)

    .pause(1000)

  .waitForElementVisible('.sub-nav', 10000)

      .end();

  }

};

[Sudhir Goswami]

Given(/^Mouse hover to Menu$/, async () => {

   const locator1 = "div.boards-content.ng-scope.visible > div.sidebar";

   await client

      .useXpath()

      .useCss()

      .waitForElementPresent(locator1,10000)

      .moveToElement(locator1,10,10)

      .pause(1000)

      .waitForElementPresent('.nav nav-sidebar',10000)

});

This is the code snippet. But its not working!

Any Suggesetion?

Thanks

Sudhir

[Milton Pereira]

Can you paste the error your receive on execution here?

Regards,

Milton Pereira - QA Team Lead

244 5th Avenue, New York 10001     +99823469386     mil...@sjinnovation.com     milton-pereira2

--
You received this message because you are subscribed to the Google Groups "NightwatchJs" group.
To unsubscribe from this group and stop receiving emails from it, send an email to nightwatchjs...@googlegroups.com.
To post to this group, send email to nightw...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/nightwatchjs/1b326ff8-fe22-4adb-8d77-c23c95194b5a%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Sudhir Goswami]

There is no error in the console.

I am pasting the html code.

<div class="sidebar">
 <a class="header" style="color: green;" ng-href="#/" href="#/">
  <i class="fa  fa-5x fa-tachometer"></i>
  <h1 style="margin-top: 5px;margin-bottom: 0;" class="ng-binding">boards</h1>
  <!-- ngIf: dashboard.tagline -->
  <div style="font-size: 16px; opacity: 0.8" ng-if="dashboard.tagline" class="ng-scope">
   <span class="ng-binding">rapid dashboards for you</span>
  </div>
  <!-- end ngIf: dashboard.tagline -->
 </a>
 <ul class="nav nav-sidebar" menu="mainMenu" nclass="nav nav-sidebar">
  <!-- ngRepeat: item in menu -->
  <li aria-haspopup="true" ng-repeat="item in menu" ng-hide="item.hideMenu" class="ng-scope">
   <a data-type="none" ng-href="" ng-attr-target="{{(item.type.toLowerCase() === 'externallink') ? '_blank' : undefined}}" class="ng-binding">Pages
    <!-- ngIf: item.nodes.length > 0 -->
    <span ng-if="item.nodes.length > 0" class="caret ng-scope" style="margin-left: 5px;" aria-hidden="true"></span>
    <!-- end ngIf: item.nodes.length > 0 -->
   </a>
   <!-- ngIf: item.nodes.length > 0 -->
   <ul class="recursive-nav nav-sidebar nav nav-sidebar" ng-if="item.nodes.length > 0" menu="item.nodes" nclass="recursive-nav nav-sidebar nav nav-sidebar">
    <!-- ngRepeat: item in menu -->
    <li aria-haspopup="false" ng-repeat="item in menu" ng-hide="item.hideMenu" class="ng-scope">
     <a data-type="menulink" ng-href="#/editor/page/new" ng-attr-target="{{(item.type.toLowerCase() === 'externallink') ? '_blank' : undefined}}" class="ng-binding" href="#/editor/page/new">Create New
      <!-- ngIf: item.nodes.length > 0 -->
     </a>
     <!-- ngIf: item.nodes.length > 0 -->
    </li>
    <!-- end ngRepeat: item in menu -->
    <li aria-haspopup="false" ng-repeat="item in menu" ng-hide="item.hideMenu" class="ng-scope">
     <a data-type="menulink" ng-href="#/editor/page/list" ng-attr-target="{{(item.type.toLowerCase() === 'externallink') ? '_blank' : undefined}}" class="ng-binding" href="#/editor/page/list">View Existing Pages
      <!-- ngIf: item.nodes.length > 0 -->
     </a>
     <!-- ngIf: item.nodes.length > 0 -->
    </li>
    <!-- end ngRepeat: item in menu -->
   </ul>
   <!-- end ngIf: item.nodes.length > 0 -->
  </li>
  <!-- end ngRepeat: item in menu -->
  <li aria-haspopup="true" ng-repeat="item in menu" ng-hide="item.hideMenu" class="ng-scope">
   <a data-type="none" ng-href="" ng-attr-target="{{(item.type.toLowerCase() === 'externallink') ? '_blank' : undefined}}" class="ng-binding">Dashboards
    <!-- ngIf: item.nodes.length > 0 -->
    <span ng-if="item.nodes.length > 0" class="caret ng-scope" style="margin-left: 5px;" aria-hidden="true"></span>
    <!-- end ngIf: item.nodes.length > 0 -->
   </a>
   <!-- ngIf: item.nodes.length > 0 -->
   <ul class="recursive-nav nav-sidebar nav nav-sidebar" ng-if="item.nodes.length > 0" menu="item.nodes" nclass="recursive-nav nav-sidebar nav nav-sidebar">
    <!-- ngRepeat: item in menu -->
    <li aria-haspopup="false" ng-repeat="item in menu" ng-hide="item.hideMenu" class="ng-scope">
     <a data-type="menulink" ng-href="#/editor/dashboards/new" ng-attr-target="{{(item.type.toLowerCase() === 'externallink') ? '_blank' : undefined}}" class="ng-binding" href="#/editor/dashboards/new">Create New
      <!-- ngIf: item.nodes.length > 0 -->
     </a>
     <!-- ngIf: item.nodes.length > 0 -->
    </li>
    <!-- end ngRepeat: item in menu -->
    <li aria-haspopup="false" ng-repeat="item in menu" ng-hide="item.hideMenu" class="ng-scope">
     <a data-type="menulink" ng-href="#/editor/dashboards/list" ng-attr-target="{{(item.type.toLowerCase() === 'externallink') ? '_blank' : undefined}}" class="ng-binding" href="#/editor/dashboards/list">View Existing Dashboards
      <!-- ngIf: item.nodes.length > 0 -->
     </a>
     <!-- ngIf: item.nodes.length > 0 -->
    </li>
    <!-- end ngRepeat: item in menu -->
   </ul>
   <!-- end ngIf: item.nodes.length > 0 -->
  </li>
  <!-- end ngRepeat: item in menu -->
 </ul>
 <ul class="nav nav-sidebar" menu="secondaryMenu" nclass="nav nav-sidebar">
  <!-- ngRepeat: item in menu -->
 </ul>
</div>

To unsubscribe from this group and stop receiving emails from it, send an email to nightw...@googlegroups.com.