CasperJS 快速入门指南：从零开始掌握网页抓取与测试
项目地址: https://gitcode.com/gh_mirrors/ca/casperjs 前言
CasperJS 是一个基于 PhantomJS 和 SlimerJS 的开源导航脚本和测试工具，它简化了网页自动化操作和测试流程。本文将带你快速上手 CasperJS，通过实际案例演示其核心功能。
环境准备
在开始之前，请确保你已经正确安装了 CasperJS。CasperJS 支持 JavaScript 和 CoffeeScript（PhantomJS 2.0 之前的版本）两种脚本语言。
提示：如果你对 JavaScript 不太熟悉，建议先学习 JavaScript 基础知识，这将帮助你更好地理解后续内容。
第一个 CasperJS 脚本
让我们从一个最简单的示例开始，了解 CasperJS 的基本工作流程。
基础示例：获取网页标题
创建一个名为 sample.js 的文件，内容如下：
var casper = require('casper').create();
casper.start('http://casperjs.org/', function() {
this.echo(this.getTitle());
});
casper.thenOpen('http://phantomjs.org', function() {
this.echo(this.getTitle());
});
casper.run();
运行脚本
根据你的环境，可以选择以下任意一种方式运行：
# 使用 CasperJS 直接运行
casperjs sample.js
# 使用 Node.js 运行
node casperjs.js sample.js
# 使用 PhantomJS 直接运行
phantomjs casperjs.js sample.js
# Windows 环境下运行
C:\casperjs\bin> casperjs.exe sample.js
运行后，你将看到类似以下输出：
CasperJS, a navigation scripting and testing utility for PhantomJS
PhantomJS: Headless WebKit with JavaScript API
代码解析
让我们分解这段代码的执行逻辑：
- 创建了一个新的 Casper 实例
- 启动并打开 http://casperjs.org/
- 页面加载完成后，打印网页标题（
<title>标签内容） - 接着打开另一个 URL http://phantomjs.org
- 新页面加载完成后，打印其标题
- 执行整个流程
实战案例：抓取搜索引擎搜索结果
现在让我们尝试一个更实用的例子 - 抓取搜索引擎搜索结果中的链接。
创建抓取脚本
创建一个名为 searchlinks.js 的文件，内容如下：
var links = [];
var casper = require('casper').create();
function getLinks() {
var links = document.querySelectorAll('h3.r a');
return Array.prototype.map.call(links, function(e) {
return e.getAttribute('href');
});
}
casper.start('http://example.com/search', function() {
// 等待搜索表单加载完成
this.waitForSelector('form[action="/search"]');
});
casper.then(function() {
// 搜索关键词 "casperjs"
this.fill('form[action="/search"]', { q: 'casperjs' }, true);
});
casper.then(function() {
// 收集 "casperjs" 的搜索结果链接
links = this.evaluate(getLinks);
// 再次搜索关键词 "phantomjs"
this.fill('form[action="/search"]', { q: 'phantomjs' }, true);
});
casper.then(function() {
// 收集 "phantomjs" 的搜索结果链接
links = links.concat(this.evaluate(getLinks));
});
casper.run(function() {
// 格式化输出结果
this.echo(links.length + ' links found:');
this.echo(' - ' + links.join('\n - ')).exit();
});
运行结果
执行脚本后，你将看到类似以下输出（具体结果可能因搜索结果变化而不同）：
20 links found:
- https://github.com/casperjs/casperjs
- https://github.com/casperjs/casperjs/issues/2
- https://github.com/casperjs/casperjs/tree/master/samples
- ...（更多结果）
技术要点解析
evaluate()方法：在当前页面上下文中执行 JavaScript 代码fill()方法：自动填写并提交表单waitForSelector()方法：等待指定元素加载完成- 链式调用：CasperJS 使用
then()方法实现操作序列化
CoffeeScript 版本
如果你更喜欢 CoffeeScript，CasperJS 也提供了支持（注意：PhantomJS 2.0+ 版本需要先编译为 JavaScript）：
getLinks = ->
links = document.querySelectorAll "h3.r a"
Array::map.call links, (e) -> e.getAttribute "href"
links = []
casper = require('casper').create()
casper.start "http://example.com/search", ->
# 搜索 "casperjs"
@fill "form[action='/search']", q: "casperjs", true
casper.then ->
# 收集结果
links = @evaluate getLinks
# 搜索 "phantomjs"
@fill "form[action='/search']", q: "phantomjs", true
casper.then ->
# 合并结果
links = links.concat @evaluate(getLinks)
casper.run ->
# 输出结果
@echo links.length + " links found:"
@echo(" - " + links.join("\n - ")).exit()
测试功能入门
CasperJS 不仅是一个抓取工具，还是一个功能完善的测试框架。
简单测试示例
创建一个测试脚本 hello-test.js：
casper.test.begin("Hello, Test!", 1, function(test) {
test.assert(true);
test.done();
});
运行测试：
casperjs test hello-test.js
输出结果：
Test file: hello-test.js
# Hello, Test!
PASS Subject is strictly true
PASS 1 test executed in 0.023s, 1 passed, 0 failed, 0 dubious, 0 skipped.
测试功能特点
- 无需手动创建 Casper 实例，测试环境中已预配置
- 提供丰富的断言方法
- 自动生成测试报告
- 支持测试套件组织
总结
通过本文，你已经学会了：
- 如何编写和运行基本的 CasperJS 脚本
- 实现网页内容抓取和表单自动提交
- 使用 CoffeeScript 编写脚本
- 创建简单的测试用例
CasperJS 的强大功能远不止于此，它还可以用于：
- 网页截图
- 自动化测试
- 性能监控
- 网页交互模拟
希望这篇快速入门指南能帮助你开始 CasperJS 之旅。在实际项目中，你可以根据需要深入探索 CasperJS 的更多高级功能。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
