当前位置: >
> 基于Chrome浏览器插件的爬虫系统
基于Chrome浏览器插件的爬虫系统
本文是软件工程论文，本文设计与实现的基于 Chrome 扩展的网络爬虫系统，可以满足新时代对网络爬虫开发简单、扩展容易、使用友好和可以发挥互联网广泛用户作用的要求。
第一章 &绪论&
1.1 &研究背景与意义&
来自中国互联网络信息中心的《第 36 次中国互联网络发展状况统计报告》[1] 19中关于中国网民规模和互联网普及率的数据显示，中国整体网民规模增速持续放缓，如图 1-1 &所示，但是中国网民占总人数的比例接近 50%，人们对互联网的依赖明显增加。并且随着网民规模增长进入平台期和&互联网+&行动计划的出台，互联网不仅会影响个人生活方式，也会带动传统产业升级，这些变化使的互联网对人们的影响日益加重，也使的互联网上的数据进入海量时代。而互联网上海量的数据对人们日常生活、各个产业的影响和人们对海量数据的研究使用，无一不标识着大数据时代的来临。进入大数据时代，信息以&爆炸&的方式增长&&以新浪微博为例，其日均微博更新多达 1.2 亿条[2]。这种&爆炸&式增长的信息使互联网上的数据以几何倍数增长，也促使着数据以更快的速度进入海量时代。海量的数据还未来得及发挥它巨大的价值，却对人们的生活学习产生了巨大影响&&增加了人们获取有效数据的难度，使得人们改变了对数据的需求形式。 第一，为了学习和使用方便，用户现在更需要聚合的数据。在海量的数据时代百度、Google 等提供的零散结果已经不能满足用户的学习和使用，用户更需要有效整合的数据。用户的这个需求催生出了类似于《今日头条》、《推酷》等信息聚合类应用，用整合的数据来替换搜索引擎提供的零散数据。如果数据不能被有效整合，不仅浪费用户资源而且也无法有效发挥这些海量数据的价值。 第二，为了发挥大数据的作用，无论个人还是企业更需要多维度的数据。例如对于传统企业来说，可以知道某款产品的总销量，却很难获得用户对产品的直接反馈信息，假设只通过销量来优化产品很难做出正确的抉择。但是电商却可以较容易的获取用户的直接反馈信息，当结合销量和用户对产品的直接反馈信息做出的产品优化肯定更加科学可信。以个人来说，互联网上社区人群聚集也有&人以类聚，物以群分&的特点，要全面了解大家对某事的看法，可能不仅要综合微博、微信等新兴工具的评论，还要结合网易新闻等传统媒体用户意见。即在新时代，综合多维度的数据才能满足人们的需求。
1.2 &国内外研究现状&
网络爬虫在最开始主要以搜索引擎的核心模块的方式出现，但是随着计算机技术的普及和人们需求的变化，网络爬虫已经不再局限于搜索引擎，更是在信息采集方面发挥了重要作用。伴随着互联网上信息的快速增加&&Web 页面已经超过几十亿，并且还在以几何倍数增长[4]，如何利用网络爬虫技术从互联网上提取整合的数据成为了备受关注的实际问题，也使如何利用网络爬虫技术从 Web 页面中提取信息成为了热门的研究[5]，这一切都标记着网络爬虫技术的成为一个热门的技术。例如目前已经成型的网络爬虫就多达上百种，其中较为知名的开源网络爬虫软件就有 Nutch[6]、Larbin、Heritrix、Arachnid 等等[7]。 随着网页技术的发展，JavaScript 技术、Ajax 等技术在网页中使用比重的提高，普通面向静态页面的网络爬虫技术已经不能满足需求，为了更好的从动态页面中采集信息，业界开始加重对动态加载网页抓取工作的研究，例如 WISE 和ICDE 等会议关注了抓取 Ajax 数据的方法[8]，国内也在全国搜索引擎和网上信息挖掘会议（SEWM）上讨论了这个学术问题[9]，而且取得了一定成果，例如中科院研究所通过使用开源 JavaScript 引擎 SpiderMonkey 建立运行环境来执行JavaScript 语句，并且把其中的提取的 URL 返回[10]；再如中国科学技术大学的曾伟辉利用程序切片算法来重建网页 DOM 树，最终从中提取出 AJAX 代码中的URL 链接[9]。而且已经有许多成熟的开源网络爬虫应用在真是的生产环境中，如Heritrix、Nutch 等[5]。 网络爬虫的热门也是网络爬虫的种类繁多，简单的从功能上可以划分为是通用网络爬虫（general-pupose web crawler）和聚焦网络爬虫，不论是这两类网络爬虫还是其他方式划分的网络爬虫，现有的爬虫技术核心思想是相同的。通用性网络爬虫是从一个或若干初始种子网页开始，获得初始网页上 URL，在抓取网页的过程，不断从当前网页上抽取新的 URL 放入队列，直到满足系统的一定结束条件[11]。聚焦网络爬虫也叫面向主题网络爬虫，是有选择的访问符合条件的网页和链接，获取需要的信息。它们最大的区别在于使用目的的不同，而其核心思想都是用模拟浏览器的方式下载网页和解析网页，最后从中采集数据[12]。
............
第二章 &相关技术介绍
本系统主要是想利用 Chrome 浏览器对扩展的支持和可以通过扩展从 Web页面中提取信息的特性，把现有网络爬虫中有关网页下载、页面解析、数据提取和结构化等任务都交给 Chrome 浏览器，降低了网络爬虫的开发任务量和开发难度。并且为了很好的支持个人版信息抓取模块的正常工作，中央服务器模块还需要支持高并发、易扩展等，所有这些功能的实现都离不开对大量的理论知识、现有技术的研究与应用。本章节主要介绍本系统开发过程用到的网络爬虫技术与反爬虫策略、Chrome 浏览器及其扩展和中央服务器模块用到的 Netty 框架、Spring框架等技术。
2.1 &网络爬虫技术与反爬虫策略
事物的发展总是带着两面性，网络爬虫与反爬虫策略也是同样的。网络爬虫技术发展的同时，有一些恶意网络爬虫给被采集对象造成了很大的负担，因此出现了反爬虫策略来防止恶意的网络爬虫。网络爬虫（Crawler），也可以称作网络蜘蛛（Spider）或者&网络机器人&[22]。它是一个 Web 自动抓取程序，最开始主要是作为搜索引擎遍历互联网，抓取网页的核心组件，但是随着互联网的发展，它也变成了从 Web 中提取信息的工具。 无论是用作搜索引擎还是 Web 信息提取，网络爬虫的工作原理是一致的，如图 2-1 &所示。从一个初始 URL 请求队列中的一个 URL 开始抓取页面，下载该页面并且把页面中包含的未知且符合需求的 URL 添加到队列里面构成新的请求队列，然后开始下一轮抓取工作，当请求 URL 队列为空或者满足结束条件时结束。 &网络爬虫是从互联网上获取数据。但是互联网上有着海量的信息，并且可以分为结构化、半结构化和非结构化三种，网络爬虫主要抓取哪种呢？ 结构化信息是指进过分析后可以分解为一个或多个相互关联组成部分的信息，且个部分间有明确的层次结构[23]，并且通过数据库进行使用和维护。例如生产、业务、交易、客户信息等方面的记录都属于结构化数据。 半结构化信息是指网页通过标签使其与普通纯文本比较有一定的结构性，但是和有严格规范的数据库结构化数据比较结构性有弱很多，所以半结构化信息就是介于非结构化和结构化之间的信息。&
...........
2.2 &Chrome 浏览器介绍
Chrome 是由 Google 公司基于 WebKit[27]（Chrome 28 之后采用的 Blink 也是WebKit 的一个分支）网页渲染引擎开发的一款浏览器。从 2008 年 9 月 2 号发布的第一个 Microsoft Windows 测试版开始，经过 Google 公司的多次迭代，Chrome浏览器从某种角度来说已经不再局限于浏览器，而是一个平台甚至是一个操作系统。Chrome 不仅继承了 WebKit 内核高速渲染 HTML 的特点，而且还通过融入了 Google 自行开发的 V8 引擎大幅提升了 JavaScript 在 Chrome 中的执行效率。 相比于其他浏览器，Chrome 浏览器的特点不仅是 HTML 页面渲染快、JavaScript 执行速度快，而且还有一个独特的特点就是可以通过编写各种各样的扩展与应用来扩充浏览器的功能。因为 Chrome 浏览器的这些优点，在市场占有率上一路追赶微软的 Internet Explorer，成为第二大浏览器，并且是一路走高的趋势。图 2-2 和图 2-3 分别是 2015 年 11 月 25 号 NetMarketShare 网站[28]PC 浏览器市场份额和 PC 浏览器市场占有率趋势图。Chrome 支持用户编写程序来扩充其功能，编写的程序分为 Chrome 扩展和Chrome 应用。其中 Chrome 扩展是用于扩充 Chrome 浏览器的功能， &Chrome 扩展主要强调通过用户编写的程序与浏览器的结合来增强浏览器的功能，例如Chrome 扩展可以更改当前浏览的网页中的内容；Chrome 应用更加强调是运行在Chrome 平台上的程序，可以在不打开 Chrome 浏览器的情况下也可以正常运行程序。其中本文主要是利用 Chrome 浏览器支持扩展功能来实现网络爬虫系统。 Chrome 扩展主要由 HTML 文件、JavaScript 脚本文件、CSS 样式文件、图片等静态文件以及 manifest.json 配置文件构成，个别扩展可能还包括二进制文件。其中 manifest.json 是一个 JSON 格式的文件，在 Chrome 扩展安装后指导 Chrome如何展现这个扩展和决定该扩展如何与用户交互。manifest 中的域可能会随着Google 的对 Chrome 浏览器的改进而发生变化，表 2-1 是截止 2015 年 11 月 25号 Chrome 扩展开发官方文档对 manifest.json[30]文件主要元素的定义。&
第三章 &系统概要设计 .... 21&
3.1 &系统需求分析.......... 21&
3.1.1 &需求分析............ 21&
3.1.2 &系统目标............ 23&
3.2 &系统概要设计.......... 23&
3.2.1 &信息抓取模块.... 24&
3.2.2 &中央服务器模块......... 25&
3.2.3 &主从数据库模块......... 26&
3.3 &本章小结......... 27&
第四章 &系统详细设计 .... 28&
4.1 &模块间交互设计...... 28&
4.2 &信息抓取模块.......... 28&
4.3 &中央服务器模块...... 32
4.4 &本章小结......... 35&
第五章 &系统实现 ............ 36&
5.1 &系统实现概述.......... 36&
5.2 &信息抓取模块.......... 37
5.3 &中央服务器模块...... 42
5.4 &主从库模块..... 44
5.5 &本章小结......... 46&
第六章 &系统验证&
6.1 &实验准备&
为了更好的验证基于 Chrome 扩展的网络爬虫系统，先声明实验条件如下。 操作系统：win10 JDK 版本：1.7 Chrome 版本：Chrome 46 中央服务器模块开发工具：Eclipse Mars.1 Release（4.5.1） 信息抓取模块开发工具：HBuilder &版本号：6.7.1. 实验时间：2015 年 12 月 8 号 抓取对象：从搜达足球网站抓取 2015/16 赛季英超赛程&
6.2 &信息抓取模块部署
Chrome 扩展的安装根据来源分为两种，分别从 Chrome 应用商店获取和加载本地解压的扩展。从 Chrome 应用商店获取的扩展是经过 Google 审核发布的，安全性等方面都有所保证；加载本地解压的扩展一般是给开发人员使用。因为本系统的信息抓取模块还未提交到 Chrome 应用商店，所以只能加载本地扩展。 在 Chrome 浏览器中输入&chrome://extensions/&，在该页面选中&开发者选项&后点击&加载已解压的扩展程序&就可以加载本扩展。加载后的效果如图 6-1 所示。 通过第四章介绍的系统实现，基于 Chrome 扩展的网络爬虫系统已经完全实现。为了验证系统的可用性，还需要进行抓取结果验证。&
...........
本文针对现有网络爬虫系统开发周期长、难度大、容易被屏蔽和使用不友好的缺点，提出并实现了一种基于 Chrome 扩展的网络爬虫系统。通过使用 Chrome的扩展大大降低了网络爬虫开发的任务量和难度，也基本解决了网络爬虫被屏蔽和不友好的问题。为了完成系统设计和实现，主要完成了一下工作。&
（1）研究了现有网络爬虫技术和反网络爬虫策略。通过了解现有网络爬虫系统的分类、实现细节等，再结合反网络爬虫策略，总结出了现有网络爬虫系统开发难度大、容易屏蔽的原因。&
（2）了解了 Chrome 浏览器的市场份额和发展历程。通过了解 Chrome 浏览器的市场份额来评估用户学习使用本系统需要付出的时间和精力，最后通过Chrome 浏览器市场占有率和 Chrome 扩展安装的简易程度表明，学习使用本系统用户不需要付出太大精力，也直接验证了本系统的使用友好度较高。&
（3）研究了 Chrome 扩展的实现细节和相关的技术，例如 JavaScript、CSS等。在这个过程中证明现有网络爬虫技术下载页面、解析页面的复杂的操作完全可以交给浏览器完成，这种操作可以很大程度上降低网络爬虫的开发难度和任务量。并且结合现有的反网络爬虫策略，发现把下载页面和解析页面的操作交给浏览器，可以屏蔽大多数的反网络爬虫策略。所以使用 Chrome 扩展来实现信息抓取模块，不仅降低了网络爬虫系统的开发难度，而且还提高了网络爬虫系统应对反网络爬虫策略的能力。&
（4）研究了 Netty 框架和 Spring 框架。因为在系统设计中个人版信息抓取模块是类似于分布式网络爬虫，所以对中央服务器的高并发性要求很高，并且为了使中央服务器可以像信息抓取模块那样易于扩展，研究了 Spring 框架的依赖注入和面向切面编程。&
（5）设计和实现了网络爬虫系统。在充分了解了现有的网络爬虫知识、反网络爬虫策略、Chrome 扩展和 Netty 框架等技术细节之后，设计了基于 Chrome扩展的网络爬虫系统。系统总共分为三个模块，分别为基于 Chrome 扩展的信息抓取模块、基于 Netty 与 Spring 的中央服务器模块和采用主从配置的数据库模块。并且实现和验证了基于 Chrome 扩展的网络爬虫系统是高效可行的。&
（6）总结了本系统的优缺点。通过与现有网络爬虫系统的比较和结合互联网的发展趋势，总结了本系统的优缺点。&
参考文献(略)
(责任编辑：gufeng)
------分隔线----------------------------
下一篇：没有了
本文是软件工程论文，本文设计与实现的基于 Chrome 扩展的网络...
本文是软件工程论文，本文的主要目标是：结合线上业务的实际...
本文是软件工程论文，本文开发出一套适用性强可扩展性高的系...
本文是软件工程论文，本文经过对模型局部功能的解剖和深入的...
本文是软件工程论文，本文研究 MapReduce 并行化基本方法，并基...
本文是软件工程论文，本文阐述基于层析成像网络拓扑推断的探...匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。点击阅读原文
初探 Headless Chrome
6月10日 发布，来源：
什么是 Headless Chrome
Headless Chrome 是 Chrome 浏览器的无界面形态，可以在不打开浏览器的前提下，使用所有 Chrome 支持的特性运行你的程序。相比于现代浏览器，Headless Chrome 更加方便测试 web 应用，获得网站的截图，做爬虫抓取信息等。相比于出道较早的 PhantomJS，SlimerJS 等，Headless Chrome 则更加贴近浏览器环境。
如何获取 Headless Chrome
目前，Mac 上
版本与 Linux 上的 Chrome 57+ 已经开始支持 headless 特性。Windows 上 Chrome 暂时不支持，可以使用
进行开发。
如何在终端中使用
在Mac上使用前，建议先绑定 Chrome 的别名
alias google-chrome="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome"
Linux下无需绑定别名，从官网上下载最新版 Chrome 之后直接运行以下命令即可。然后，在终端中输入：google-chrome --headless --disable-gpu --remote-debugging-port=9222 https://
增加 --disable-gpu 主要是为了屏蔽现阶段可能触发的错误。此时，Headless Chrome已经成功运行了。打开浏览器，输入 ，你会看到如下的界面：
在终端中，我们还可以做以下操作：
获取屏幕截图：
google-chrome --headless --disable-gpu --screenshot --window-size=
获取页面为PDF：
google-chrome --headless --disable-gpu --print-to-pdf
打印页面DOM：
google-chrome --headless --disable-gpu --dump-dom /
在上文中讲述的都使用终端命令启动 Headless Chrome，下文以获取截图为例，尝试如何在程序里控制 Headless Chrome。
npm install lighthouse chrome-remote-interface --save
实现截图的大体思路为：通过使用 lighthouse 启动 Headless Chrome，然后通过 远程控制浏览器，使用 Page 监控页面的加载，使用 Emulation 模块调整视口缩放，最终生成一张截图。const { ChromeLauncher } = require('lighthouse/lighthouse-cli/chrome-launcher')
const chrome = require('chrome-remote-interface')
const fs = require('fs')
const deviceMetrics = {
width: 1200,
height: 800,
deviceScaleFactor: 0,
mobile: false,
fitWindow: false
const screenshotMetrics = {
width: deviceMetrics.width,
height: deviceMetrics.height
let protocol
let launcher
function launchChrome () {
const launcher = new ChromeLauncher({
port: 9222,
autoSelectChrome: true,
additionalFlags: ['--window-size=412,732', '--disable-gpu', '--headless']
return launcher.run().then(() =& launcher)
function getScreenShot () {
const { Page, Emulation } = protocol
return Page.enable()
.then(() =& {
Emulation.setDeviceMetricsOverride(deviceMetrics) // 配置浏览器尺寸
Emulation.setVisibleSize(screenshotMetrics) // 配置截图尺寸
Page.navigate({ url: '/' })
return new Promise((resolve, reject) =& {
Page.loadEventFired(() =& {
resolve(Page.captureScreenshot({ format: 'jpeg', fromSurface: true }))
.then(image =& {
const buffer = new Buffer(image.data, 'base64')
return new Promise((resolve, reject) =& {
fs.writeFile('output.jpeg', buffer, 'base64', err =& {
if (err) return reject(err)
launchChrome()
.then(Launcher =& {
launcher = Launcher
return new Promise((resolve, reject) =&{
chrome(Protocol =& {
protocol = Protocol
}).on('error', err =& { reject(err) })
.then(getScreenShot)
.then(() =& {
protocol.close()
launcher.kill()
.catch(console.error)
这里使用 lighthouse 提供的 ChromeLauncher 模块来调用 Chrome，如果电脑上安装了Chrome Canary，lighthouse 默认会启动 Chrome Canary，可以将 autoSelectChrome 设置为false 然后自行选择使用什么版本。
通过 chrome-remote-interface 配合 Headless Chrome，我们还可以做更多事情。
使用 CSS 和 DOM 模块，可以获取和设置页面中的 DOM 节点内容和 CSS 样式。
function getStyle () {
const { Page, CSS, DOM } = protocol
return Promise.all([
DOM.enable(),
CSS.enable(),
Page.enable()
.then(() =& {
Page.navigate({ url: '/' })
return new Promise((resolve, _) =& {
Page.loadEventFired(() =& { resolve(DOM.getDocument()) })
.then(res =& res.root.nodeId)
.then(nodeId =& DOM.querySelector({ selector: '.btn-primary', nodeId }))
.then(({ nodeId }) =& CSS.getComputedStyleForNode({ nodeId }))
.then(style =& { console.log(style) })
使用 Runtime 模块，可以在页面运行时执行 JS 脚本。
function search () {
const { Page, Runtime } = protocol
return Promise.all([
Page.enable()
.then(() =& {
Page.navigate({ url: '/' })
return new Promise((resolve, _) =& {
Page.loadEventFired(() =& { resolve() })
.then(() =& {
const code = [
'var input = document.querySelector(\'.s_ipt\')',
'var btn = document.querySelector(\'#su\')',
'input.value=\'123\''
].join(';')
return Runtime.evaluate({ expression: code })
.then(() =& {
return new Promise((resolve, _) =& {
setTimeout(() =& {
resolve(Page.captureScreenshot({ format: 'jpeg', fromSurface: true }))
.then(image =& {
const buffer = new Buffer(image.data, 'base64')
return new Promise((resolve, reject) =& {
fs.writeFile('output.jpeg', buffer, 'base64', err =& {
if (err) return reject(err)
使用 Network 模块，可以读取并设置 UserAgent 和 Cookie 等信息。
function setUAandCookie () {
const { Page, Network } = protocol
return Promise.all([
Network.enable(),
Page.enable()
.then(() =& {
const userAgent =
Network.setUserAgentOverride({ userAgent: "Mozilla/5.0 (M Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.71 Safari/537.36" })
Network.setCookie({
name: 'test',
value: '123',
domain: '.',
path: '/',
httpOnly: true
Page.navigate({ url: '/' })
return new Promise((resolve, _) =& {
Page.loadEventFired(() =& { resolve() })
.then(() =& {
return Network.getCookies()
.then(console.log)
在 Karma 中使用 Headless Chrome 进行单元测试
相比于 PhantomJS 等，使用 Headless Chrome 做单元测试更加贴近浏览器开发环境。同时 PhantomJS 作者也已经功成身退，在 Chrome 发布 Headless 模式后，发布不再维护 PhantomJS 项目。
npm install jasmine-core karma karma-chrome-launcher karma-jasmine -D
配置 Karma// karma.conf.js
module.exports = function (config) {
config.set({
frameworks: ['jasmine'],
files: ['./test.js'],
browsers: ["Chrome_Beta_Headless"],
customLaunchers: {
Chrome_Beta_Headless: {
base: 'Chrome',
'--headless',
'--disable-gpu',
'--remote-debugging-port=9222'
browserConsoleLogOptions: {
level: 'log',
terminal: true
reporters: ['progress'],
autoWatch: false,
singleRun: true
编写测试用例// test.js
describe('test', function() {
it('should be true', function() {
console.log(window.navigator.userAgent)
expect(true).toEqual(true);
配置npm script
// package.json
scripts: {
test: "karma start"
在终端中运行npm test
从返回结果中可以看出，测试已运行在 Headless Chrome 环境下。
本文简单介绍了一下 Headless Chrome 在终端的用法，以及如何使用 Headless Chrome 获取截图、获取页面中的CSS和DOM、设置UA和Cookie、运行JS脚本、配合 Karma 进行单元测试。接下来，就等着你探索更多关于 Headless Chrome 的用法了...
我要该，理由是：
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）关注51Testing
使用 Headless Chrome 进行自动化测试
发表于： 11:07 &作者：Eric bidelman & 来源：51Testing软件测试网采编
推荐标签：
　　如果你想使用 Headless Chrome 进行，那么就往下！这篇将让你完全使用 Karma 作为运行器runner，并且使用 Mocha+Chai 来编撰测试。　　这些东西是什么？　　Karma、Mocha、Chai、Headless Chrome，哦，我的天哪！　　Karma 是一个测试工具，可以和所有最流行的测试框架（Jasmine、Mocha、 QUnit）配合使用。　　Chai 是一个断言库，可以与 Node 和一起使用。这里我们需要后者。　　Headless Chrome 是一种在没有浏览器用户界面的无需显示环境中运行 Chrome 浏览器的方法。使用 Headless Chrome（而不是直接在 Node 中测试） 的一个好处是 JavaScript 测试将在与你的网站用户相同的环境中执行。Headless Chrome 为你提供了真正的浏览器环境，却没有运行完整版本的 Chrome 一样的内存开销。　　设置　　安装　　使用 yarn 安装 Karma、相关插件和：　　yarn add --dev karma karma-chrome-launcher karma-mocha karma-chai　　yarn add --dev mocha chai　　或者使用 npm：　　npm i --save-dev karma karma-chrome-launcher karma-mocha karma-chai　　npm i --save-dev mocha chai　　在这篇文章中我使用 Mocha 和 Chai，但是你也可以选择自己最喜欢的在浏览器中的断言库。　　配置 Karma　　创建一个使用 ChromeHeadless 启动器的 karma.config.js 文件。　　karma.conf.js：　　module.exports = function(config) {　　 &config.set({　　 & &frameworks: ['mocha', 'chai'],　　 & &files: ['test/**/*.js'],　　 & &reporters: ['progress'],　　 & &port: 9876, &// karma
port　　 & &colors: true,　　 & &logLevel: config.LOG_INFO,　　 & &browsers: ['ChromeHeadless'],　　 & &autoWatch: false,　　 & &// singleRun: false, // Karma captures browsers, runs the tests and exits　　 & &concurrency: Infinity　　 &})　　}　　注意： 运行 ./node_modules/karma/bin/karma init karma.conf.js 生成 Karma 的配置文件。　　写一个测试　　在 /test/test.js 中写一个测试：　　/test/test.js：　　describe('Array', () =& {　　 &describe('#indexOf()', () =& {　　 & &it('should return -1 when the value is not present', () =& {　　 & & &assert.equal(-1, [1,2,3].indexOf(4));　　 & &});　　 &});　　});　　运行你的测试　　在我们设置好用于运行 Karma 的 package.json 中添加一个测试脚本。　　package.json：　　"scripts": {　　 &"test": "karma start --single-run --browsers ChromeHeadless karma.conf.js"　　}　　当你运行你的测试（yarn test）时，Headless Chrome 会启动并将运行结果输出到终端：　　创建你自己的 Headless Chrome 启动器　　ChromeHeadless 启动器非常棒，因为它可以在 Headless Chrome 上进行测试。它包含了适合你的 Chrome 标志，并在端口 9222 上启动 Chrome 的远程调试版本。　　但是，有时你可能希望将自定义的标志传递给 Chrome 或更改启动器使用的远程调试端口。要做到这一点，可以通过创建一个 customLaunchers 字段来扩展基础的 ChromeHeadless 启动器：　　karma.conf.js：　　module.exports = function(config) {　　 &...　　 &config.set({　　 & &browsers: ['Chrome', 'ChromeHeadless', 'MyHeadlessChrome'],　　 & &customLaunchers: {　　 & & &MyHeadlessChrome: {　　 & & & &base: 'ChromeHeadless',　　 & & & &flags: ['--disable-translate', '--disable-extensions', '--remote-debugging-port=9223']　　 & & &}　　 & &},　　 &}　　};　　完全在 Travis CI 上运行它　　在 Headless Chrome 中配置 Karma 运行测试是很困难的。而在 Travis 中持续集成就只有几种！　　要在 Travis 中运行测试，请使用 dist: trusty 并安装稳定版 Chrome 插件：　　.travis.yml：　　language: node_js　　node_js:　　 &- "7"　　dist: trusty # needs Ubuntu Trusty　　sudo: false &# no need for virtualization.　　addons:　　 &chrome: stable # have Travis install chrome stable.　　cache:　　 &yarn: true　　 &directories:　　 & &- node_modules　　install:　　 &- yarn　　script:　　 &- yarn test
搜索风云榜
51Testing官方微信
51Testing官方微博
测试知识全知道