javascript - casperjs：如何单击远程 div 然后更新它的类名？

Question

作为学习CasperJS的一种方式，我试图在远程页面上的 div 上发起点击事件，然后在点击后更改 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 的类名有任何变化。我是否以错误的方式进行这一步？

Answer 1

您正在调用this.clickwithin evaluate()，它只是无法evaluate()在可能没有window.click方法的页面 DOM 上下文中执行代码。

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

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);
});

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