How to perform click event on the element which bees visible after hovering on an element. below is the HTML code

<div class="jqtree-element jqtree_mon">
<span class="jqtree-title jqtree_mon" contenteditable="true">Notebook 1</span>
<span class="notebook-right">
<span class="notebook-date disappear" style="visibility: visible;">
<span class="notebook-mands-right">
<span class="notebook-mands appear-wrapper">
<span class="notebook-mands appear" style="display: none;">
<span class="fontawesome-button info">
<span class="fontawesome-button history">
<span class="fontawesome-button private">
<span class="fontawesome-button public" style="display: none;">
<span class="fontawesome-button remove">
<i class="icon-remove"></i>
</span>
</span>
</span>
</span>
</div>

To delete the Notebook i am using following code

casper.then(function(){
  if(this.visible({type:'xpath', path:'/html/body/div[3]/div/div[1]/div[1]/div/div/div[1]/div[2]/div/div/ul/li[1]/ul/li[1]/ul/li[11]/div/span[2]/span[3]/span/span[5]/i'}))
  {
    this.click({type:'xpath', path:'/html/body/div[3]/div/div[1]/div[1]/div/div/div[1]/div[2]/div/div/ul/li[1]/ul/li[1]/ul/li[11]/div/span[2]/span[3]/span/span[5]/i'});
    });
    console.log('notebook '+ title +' deleted');
  } else {
     console.log('element not found');
  }
});

in console it is displaying "Cannot dispatch mousedown event.. "

How to perform click event on the element which bees visible after hovering on an element. below is the HTML code

<div class="jqtree-element jqtree_mon">
<span class="jqtree-title jqtree_mon" contenteditable="true">Notebook 1</span>
<span class="notebook-right">
<span class="notebook-date disappear" style="visibility: visible;">
<span class="notebook-mands-right">
<span class="notebook-mands appear-wrapper">
<span class="notebook-mands appear" style="display: none;">
<span class="fontawesome-button info">
<span class="fontawesome-button history">
<span class="fontawesome-button private">
<span class="fontawesome-button public" style="display: none;">
<span class="fontawesome-button remove">
<i class="icon-remove"></i>
</span>
</span>
</span>
</span>
</div>

To delete the Notebook i am using following code

casper.then(function(){
  if(this.visible({type:'xpath', path:'/html/body/div[3]/div/div[1]/div[1]/div/div/div[1]/div[2]/div/div/ul/li[1]/ul/li[1]/ul/li[11]/div/span[2]/span[3]/span/span[5]/i'}))
  {
    this.click({type:'xpath', path:'/html/body/div[3]/div/div[1]/div[1]/div/div/div[1]/div[2]/div/div/ul/li[1]/ul/li[1]/ul/li[11]/div/span[2]/span[3]/span/span[5]/i'});
    });
    console.log('notebook '+ title +' deleted');
  } else {
     console.log('element not found');
  }
});

in console it is displaying "Cannot dispatch mousedown event.. "

• javascript
• hover
• casperjs

• Have you checked that the element is shown in a screenshot? It seems this somehow depends on hovering on some element. Which one? Your question is not clear. Indentation is also a good idea. – Artjom B. Commented Apr 24, 2015 at 11:38
• ya, after hovering, that element bees visible. – Prateek.Naik Commented Apr 24, 2015 at 11:43
• Do you mean hovering mouse on the element A will display the element B which is initially disappear? – Agus Putra Dana Commented Apr 24, 2015 at 12:06

2 Answers 2

CasperJS has the mouse module which has the move() function. It either takes a coordinate or a selector. CasperJS will use the underlying PhantomJS sendEvent() function to create a native event.

casper.mouse.move(someCSSSelector);

or

var x = require('casper').selectXPath;
...
casper.mouse.move(x(someXPathExpression));

It may be necessary to wait a little after moving the mouse if the page loads something after that:

casper.mouse.move(someCSSSelector);
casper.waitUntilVisible(expectedElementSelector, function(){
    this.click(expectedElementSelector);
});

Almost all functions work with XPath expressions as well as with CSS selectors.

If I'm not wrong, I guess what you mean is triggering click event. It can be done with native javascript, here's it:

var note = document.getElementById('note');
note.onclick = function(){
  alert('Someone click me');
}

var evtClick = document.createEvent('Event');
evtClick.initEvent('click', true, true);
note.onmouseover = function() {
  this.dispatchEvent(evtClick);
};

<b id='note'>Hover me!</b> It will trigger click event.