关于casperjs调换窗口，引用jquery和step栈！

首先，调换窗口用withPopup方法，调用了此方法后执行环境在这个step中暂时换到了新建的窗口，但是，在这个step执行结束，进行下一个step时，环境会自动转换到之前的环境中。代码实例如下：
对了，也可以直接用js语句对DOM进行操作，去掉target=”_blank”属性就可以了，这样也可以，但是并没有实现跳转窗口，而是让窗口不跳转，直接在元窗口上显示参考这篇文章用js操作DOM实现

网站：http://www.biqukan.com/
当然，withPopup方法的参数去看官方文档

var  casper = require("casper").create({
    pageSettings:{
        userAgent:"Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0",
        loadImages: false
    }
});

phantom.outputEncoding = "gbk";
casper.start("http://www.biqukan.com/", function() {
    this.capture("D:/图片/首页.jpg");
    this.click("div.item:nth-child(1) > div:nth-child(1) > dl:nth-child(2) > dt:nth-child(1) > a:nth-child(2)");
    this.wait(10000);
    // z = typeof text;
    // 果然是string类型
});
casper.withPopup(/^http:\/\/www\.biqukan\.com\/\d_\d{3}/, function(){
    this.capture("D:/图片/元尊.jpg");
    // 在这个步骤中会跳转到新窗口的环境
    // 在下一个步骤中就自动返回原先的环境中了
});
casper.then(function(){
    this.capture("D:/图片/首页2.jpg");
});

casper.run(function(){
    this.exit();
});

引用jquery：其实casperjs可以引用任何的js库，引用官方文档的话是： you can use jQuery, as every single other javascript library on Earth.
在页面设置中使用clientStripts属性，注意属性值是你jquery库文件中的jquery.min.js文件地址。我的是：C:\Users\Administrator\node_modules\jquery\dist\jquery.min.js

使用实例如下：

var casper = require("casper").create({
    clientStripts:[
    "./node_modules/jquery/dist/jquery.js"
    ],
    // 经典之战，在casperjs中使用jquery
    // 其实，在casperjs中我们能够使用任何一种js库
    pageSettings:{
        loadImages:false,
        userAgent:"Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0",
    }
});

phantom.outputEncoding = "gbk";

casper.start("http://www.biqukan.com/0_790/", function() {
    text = this.evaluate(function(){
        var array = $(".listmain>dl>dd>a").map(function(idex, ele){
            return this.textContent;
        });
        return array.toArray();
    });
});

casper.then(function(){
    this.echo(text);
});

casper.run(function(){
    this.exit();
});

还有一个就是step栈是怎么回事：先给个链接，看下step栈的解释
上面的例子能看懂就可以了，实质上，每打开一个链接（url），casperjs会自动在step栈中添加一个step，也就是start，open，thenOpen都会自动添加一个step。还有wait系列的方法也是添加一个step。我测试的代码如下：

// 一、
// then() basically adds a new navigation step in a stack.A step is a
// javascript function which can do two different things:

//     waiting for the previous step - if any - being executed
//     waiting for a requested url and related page to load
// 二、

// 显示一个step栈，可以通过这个栈来搞明白这个step栈是个什么样的执行顺序

//  require('utils').dump(casper.steps.map(function(step) {
//     return step.toString();
// }));

var casper = require("casper").create();

phantom.outputEncoding = "gbk";

casper.start("http://www.biqukan.com/", function(){
    this.echo("这是第一个步！");
});

casper.then(function(){
    this.echo("这是第二步！");
    this.wait(10000, function(){
        this.then(function(){
            this.echo("这是第三步！");
        });
    this.then(function(){
        this.echo("这是第四步");
    });
});
});

casper.thenOpen("http://www.biqukan.com/0_790/", function(){
    this.echo("这是第五步");
});


casper.then(function(){
    this.echo("这是第六步");
});

require('utils').dump(casper.steps.map(function(step) {
    return step.toString();
}));

console.log("这是测试同步的语句！");

casper.run(function(){
    this.exit();
});

补充说一下，node.js的异步在这里也是的。也就是说：
1、启动phantomjs
2、require(‘utils’).dump(casper.steps.map(function(step) {
return step.toString();
}));
3、console.log(“这是测试同步的语句！”);
以上三步是异步进行的，而在step栈中执行时同步的，只有每一个执行结束后才会进行下一步的执行！我的执行结果，参考一下：
这里写图片描述

这方面有什么不懂的可以来问我！

关于casperjs调换窗口，引用jquery和step栈！

猜你喜欢