Move mouse to trigger a hover event in CasperJS

Question

I can't understand, why mouse::move() doesn't work. For example on this page.

As you can see, there are 10 elements and after moving mouse cursor at the every picture you will see detailed information. I have a set of every element id. I want to move cursor on every element, then selector "div#hover_item_descriptors" will be updated and I will work with it. It's my code:

this.eachThen(ids, function(resp){
  var id = resp.data;

  this.then(function(){
    this.mouse.move('span#' + id + '_name'); //moving at the name of element
  });

  this.waitUntilVisible('div#hover_item_descriptors div#sticker_info', function(){
    // it`s never work, because moving doesn't work
  });
});

Why does it not work?

Answer 1

I'd stumbled at this too, figured it out thanks to this issue: https://github.com/n1k0/casperjs/issues/208

It turns out if you are hovering cursor over an element that is not in the viewport, hover event won't work.

So, to make it work, set viewport height that is guaranteed to exceed page height, for example:

var casper = require('casper').create({
    viewportSize : { width: 1280, height: 5000 }
});