使用CI、headlessBrowser、mocha对前端代码进行测试

如果想要添加更多测试用例可以继续添加更多的测试代码。

接下来

很显然，我们在持续编写add.js的时候，并不愿意每次都打开网页去运行并查看代码测试情况。

这时候，headless要开始大展拳脚了。

使用mocha-chrome 直接在命令行运行mocha测试用例。mocha-chrome是一个可以在命令行对mocha页面进行测试的框架。它可以将测试结果展现在控制台。

npm init
...
npm i mocha-chrome --save-dev

修改package.json增加

"scripts":{
"test": "mocha-chrome ./test-some/index.html"
}

调用命令

npm test

这时候，正确的提示会出现在控制台中

项目地址https://github.com/channg/ci-&＃8230;

这时候，当我们测试项目的时候就不必须打开浏览器去检查代码是否通过验证了，只要输入npm test就可以在控制台看到效果，是不是变得很轻松了呢。

继续

当我们测试用例过长，占用时间过多，或者需要其他前置操作，或者需要测试多个版本，多个系统的兼容性。我们应该如何做呢。很明显，要使用CI。

所以，我们并不想每次在本地进行测试，这里我们将要使用travis ci。

关于travos ci我们可以阅读阮一峰的博文

在项目根目录创建.travis.yml
内容如下。

sudo: required
language: node_js
node_js:
- "8"
- "9"

当你在travos ci开启了repository you want to build按钮的时候。每次项目的提交就会触发ci的构建。

而且你可以生成github小图标放在项目的readme中，比如说这个 是不是很酷。

点击这个小徽章，你就可以查看我的项目在ci构建的过程。

查看travis ci 的文档，去获取更多的资料 https://docs.travis-ci.com/

结束

基本的测试方法你已经掌握了，现在可以去了解更多了，如果有问题，可以查看我的项目进行对比
https://github.com/channg/ci-&＃8230;

更多资源

• https://docs.travis-ci.com/
• http://www.chaijs.com/
• https://mochajs.org/
• https://github.com/shellscape&＃8230;