前端端对端测试:基于PhantomJS的CasperJS

时间：2021-01-20 19:28:41

简介

Casperjs是一个基于PhantomJS和SlimerJS的前端端对端测试框架，当然你也可以使用它完成网络爬虫功能，它的特点的通过简单的脚本模拟浏览器行为，

主要有casper、tester、mouse等六大模块，其丰富的API为开发者减少了很多压力。

安装

casperjs的安装很简单，你可以通过npm或者下载casperjs包自行引用的方式安装，毫无疑问其支持Mac、windows、linux。

  • npm全局安装
    npm install -g casperjs
  • Mac os推荐使用brew
    $ brew update

    $ brew install casperjs --devel

    $ brew install casperjs

    //更新casperjs

    $ brew upgrade casperjs
  • 察看版本
    $ phantomjs --version

    $ casperjs

使用

通过以上步骤成功安装好casperjs后，可以运行以下脚本，对casperjs进行自检，熟悉其功能

$ casperjs selftest

以一个简单的百度图片热门榜的操作为例，简单示意一下casperjs的基本用法

注意：以上代码可以因为百度图片的DOM变化而失效，读者可以自己修改一下代码中的选择器

1.首先新建两个文件index.js 和config.js

2.把以下代码复制进index.js

var config = require('config');

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

//输出配置

casper.echo('using config:');

casper.echo(JSON.stringify(config, null, '\t'));

//屏蔽google资源，你懂的

casper.on('resource.requested', function(requestData, request) {

    if (/\/\/.*google[^\/]+/.test(requestData.url) || /cloud\.githubusercontent\.com/.test(requestData.url)) {

        request.abort();

    };

});

//输出console页面错误

casper.on('page.error', function(msg) {

    this.echo('error message caught: ' + msg);

});

//设置浏览器超时时间和窗口大小

casper.options.waitTimeout = 10000;

casper.options.viewportSize = {

    width: 1024,

    height: 768

};

//生成一个数组

function Nums(len) {

    var nums = [];

    for (var i = 0; i < len; i++) {

        nums.push(i);

    }

    return nums;

}

//记录时间日期

var date = new Date();

var casperDate = date.toLocaleString().split(' ')[0];

//定义nums数组作为遍历长度，suglineVal是热门榜值，suglineLength是热门榜长度

var nums,suglineVal, suglineLength;

var date =new Date();

//开始casper，输出当前日期,并通过config文件读取url

casper.echo(casperDate+'百度图片热门搜索图片抓取');

casper.start(config.baseURL, function() {

    //获取热门榜长度

    suglineLength = this.evaluate(function() {

        var csuglineLength = $('.sugline').length;

        return csuglineLength;

    });

    //生成遍历数组

    nums = Nums(suglineLength);

    //casper的each函数对每一条热门搜索执行相同结果

    this.each(nums, function(self, num) {

        //then函数控制执行流程，获取热门榜的热门搜索值，并赋予百度搜索框进行搜索

        self.then(function() {

            suglineVal = this.evaluate(function(num) {

                //获取热门搜索值，选择器随时可能会改变，请参考运行时百度图片首页的DOM树

                var cSuglineVal = $('.sugline')[num].children[1].innerText;

                //__utils__功能等同与jquery，方便在没有引入jquery或者类似DOM查询工具时使用。

                __utils__.setFieldValue("input[id='kw']", cSuglineVal);

                $('.s_btn')[0].click();

                return cSuglineVal;

            }, num);

        });

        //waitUntilVisible等待一个选择器出现，等到imglist加载完成后进入

        self.waitUntilVisible('.imglist', function() {

            //capture函数对当前页面进行截图并保存在capture/images/...

            this.capture('capture/images/'+casperDate+'/'+casperDate+'-' + suglineVal + '.png');

            //在控制台输出热门图片

            this.echo(suglineVal);

        });

    });

});

//运行casper脚本start

casper.run();

3.把以下代码复制进config.js

'use strict'

//casper读取系统信息的模块

var system = require('system');

//读取环境变量

var env = system.env.TEST_ENV || 'test'

var config = {};

//其实上面没什么用，主要配置看这里

config.test = {

    baseURL: 'http://image.baidu.com/',

    imageURL: 'capture/',

}

module.exports = config[env]

4.在控制台中执行,如果出现casperjs不是内部命令，请确保全局安装casperjs，确保环境变量正确。

casperjs index.js

结果

1.控制台输出如下

前端端对端测试:基于PhantomJS的CasperJS

2.查看images文件夹成功截取图片

前端端对端测试:基于PhantomJS的CasperJS

分析

通过使用casperjs,我们只写了不到100行代码就成功抓取了百度8月14日的热门图片，看到了每天发生的大新闻。在这个小demo中，我们使用了casperjs的最主要的casper模块进行网页抓取流程控制、clientutils模块简化DOM查询,其还有我们没有用到的mouse模块，控制输出颜色的colorizer模块，专门用于测试的tester模块，和一些常用处理函数集成的utils模块，相信大家在自己学习了官网的API后，能够创造出更有意思的东西，这个小demo虽然说可能抓取速度不是很快，但是还是基本完成了我们的需求，如果有任何问题和建议都可以留言给我。

相关文章