javascript - 如何使用casperjs点击一个随机链接并导航到另一个页面？

Question

我正在尝试编写一个脚本来执行以下操作:

1. 加载网站并截图
2. 随机选择<a>来自所有 <a> 的标签具有相同类名的标签
3. 点击链接
4. 等待新页面加载
5. 截取第二张截图

我一直在随机选择 <a>元素并单击它。谁能帮帮我吗？这是我使用 casperjs 的第一天。这是我到目前为止所拥有的:

var casper = require('casper').create({
     verbose: true,
     logLevel: 'debug',
     userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.172 Safari/537.22',
     pageSettings: {}
});
casper.options.viewportSize = {width: 1600, height: 950};


casper.start('http://www.myurl.com/', function() {
    this.echo(this.getTitle());
    this.capture('home.png');
});

casper.then(function() {
        this.echo("Second test");
        var random = Math.floor(Math.random() * document.querySelector(".showall").length);
        var clicker = document.querySelector('.showall').eq(random);
        this.mouseEvent('click', clicker);

        this.wait(5000, function() {
            this.capture('second.png');
       });

});

casper.run();

Answer 1

您不能在页面上下文之外使用 DOM 函数。你必须使用 casper.evaluate为了那个原因。请记住，evaluate 是沙盒化的，您只能将原始对象传入和传出页面上下文。 DOM 元素不是原始对象，因此您不能将它们从外部传递到 casper 上下文中。 document 在evaluate 之外没有任何意义。

来自docs :

Note: The arguments and the return value to the evaluate function must be a simple primitive object. The rule of thumb: if it can be serialized via JSON, then it is fine.

您必须单击页面上下文中包含 DOM 方法的链接。如果简单的 clicker.click() 不起作用，您必须使用类似 this 的东西在页面上下文中。

如果链接实际上是一个立即导航到页面的链接，您可以删除 this.wait。 CasperJS 可以自行感知页面是否被导航到，因此您可以使用另一个 casper.then 步骤。

顺便说一句，eq 是 jQuery 语法，但是 querySelector 的结果不是 jQuery 对象，它是 DOM 元素。如果你想选择一个随机元素，那么你必须使用 querySelectorAll 然后选择其中之一:

var clicker = document.querySelectorAll('.showall')[random];

相反。

完整的解决方案:

casper.then(function() {
    this.echo("Second test");
    this.evaluate(function() {
        var elements = document.querySelectorAll(".showall");
        var random = Math.floor(Math.random() * elements.length);
        var clicker = elements[random];

        // either this type of click
        clicker.click();
        // or the following
        var ev = document.createEvent("MouseEvent");
        ev.initMouseEvent(
            "click", true, true, window, null, 0, 0, 0, 0, 
            false, false, false, false, 0, null
        );
        clicker.dispatchEvent(ev);
    });
});
casper.then(function() {
    this.capture('second.png');
});