使用 CasperJS 将鼠标悬停在元素上
Hover over element with CasperJS
如何在悬停在元素上后变为可见的元素上执行单击事件。
下面是 HTML 代码
<div class="jqtree-element jqtree_common">
<span class="jqtree-title jqtree_common" contenteditable="true">Notebook 1</span>
<span class="notebook-right">
<span class="notebook-date disappear" style="visibility: visible;">
<span class="notebook-commands-right">
<span class="notebook-commands appear-wrapper">
<span class="notebook-commands 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>
要删除我正在使用以下代码的笔记本
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');
}
});
在控制台中显示 "Cannot dispatch mousedown event.. "
如果我没记错的话,我猜你的意思是触发点击事件。
用原生的javascript就可以做到,这里是:
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.
CasperJS 的鼠标模块具有 move()
功能。它需要一个坐标或一个选择器。 CasperJS 将使用底层 PhantomJS sendEvent()
函数来创建原生事件。
casper.mouse.move(someCSSSelector);
或
var x = require('casper').selectXPath;
...
casper.mouse.move(x(someXPathExpression));
如果页面在移动鼠标之后加载某些内容,可能需要稍等片刻:
casper.mouse.move(someCSSSelector);
casper.waitUntilVisible(expectedElementSelector, function(){
this.click(expectedElementSelector);
});
几乎所有函数都适用于 XPath 表达式以及 CSS 选择器。
如何在悬停在元素上后变为可见的元素上执行单击事件。 下面是 HTML 代码
<div class="jqtree-element jqtree_common">
<span class="jqtree-title jqtree_common" contenteditable="true">Notebook 1</span>
<span class="notebook-right">
<span class="notebook-date disappear" style="visibility: visible;">
<span class="notebook-commands-right">
<span class="notebook-commands appear-wrapper">
<span class="notebook-commands 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>
要删除我正在使用以下代码的笔记本
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');
}
});
在控制台中显示 "Cannot dispatch mousedown event.. "
如果我没记错的话,我猜你的意思是触发点击事件。 用原生的javascript就可以做到,这里是:
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.
CasperJS 的鼠标模块具有 move()
功能。它需要一个坐标或一个选择器。 CasperJS 将使用底层 PhantomJS sendEvent()
函数来创建原生事件。
casper.mouse.move(someCSSSelector);
或
var x = require('casper').selectXPath;
...
casper.mouse.move(x(someXPathExpression));
如果页面在移动鼠标之后加载某些内容,可能需要稍等片刻:
casper.mouse.move(someCSSSelector);
casper.waitUntilVisible(expectedElementSelector, function(){
this.click(expectedElementSelector);
});
几乎所有函数都适用于 XPath 表达式以及 CSS 选择器。