casperjs:如何单击远程div然后更新它的类名?

时间:2013-01-11 02:46:11

标签: javascript phantomjs casperjs

作为学习CasperJS的一种方式,我试图在远程页面上的div上启动click事件,然后在单击它之后更改div的类名。我们的想法是找到第一个可点击的div,点击它,然后将其标记为已点击,以便我可以将其跳过其他可点击的div。远程页面上div标记的标记如下所示:

<div class='clickable_div'></div>

我尝试了以下casperjs代码:

...
casper.then(function() {
    if( this.exists( 'div.clickable_div' ) ) {
        this.evaluate(function() {
            this.click(document.querySelector('div.clickable_div'));
            return document.querySelector('div.clickable_div').setAttribute("className","clicked");
        });
    }
});
...

它似乎不起作用。首先,我不认为我正在启动div上的鼠标单击事件。我错过了什么?其次,当我获取更新的html时,我没有看到div的类名有任何变化。我是以错误的方式走这一步吗?

1 个答案:

答案 0 :(得分:4)

您在this.click内呼叫evaluate(),它无法正常工作,因为evaluate()在可能没有window.click方法的页面DOM上下文中执行代码。< / p>

这是一个可能有效的脚本:

var linkSelector = 'div.clickable_div';

casper.then(function() {
    if (!this.exists(linkSelector)) return;
    this.click(linkSelector);
    this.evaluate(function(linkSelector) {
        __utils__.findOne(linkSelector).setAttribute("className", "clicked");
    }, linkSelector);
});

您可能希望更好地处理错误和边缘情况,但您明白了。