前端测试

最受欢迎的 5 款 Node.js 端到端测试框架

测试，尤其是自动化测试在现代 WEB 工程中有着非常重要的角色，与交付过程集成良好的自动化测试流程可以在新版发布时帮你快速回归产品功能，也可以充当产品文档测试因粒度不同又可以分为单元测试、接口测试、功能测试。

在 WEB 领域，功能测试亦称为端到端测试（End to End Test，简称 E2E 测试）。

E2E 测试的常用操作如下：

• 打开网页，跳转网页：打开 Github 的首页；
• 填写输入框，提交表单：键入搜索词，提交搜索表单；
• 元素单击等操作：单击搜索结果的第一项；
• 元素数量、属性检视：确认搜索结果展示了 10 条；
• 页面运行环境检视：确认页面的地址是正确的；

GitHub中比较受欢迎的Node.js E2E测试解决方法：

1、CasperJs:

使用Python编写，不算是严格意义上的原声Node.js解决方案，但能够使用npm安装，且能够很好的与Node.js工具链组合使用。只能与无界面浏览器（Headless Browser）组合使用，比如PhantomJS 和SlimerJS ，其优势是测试运行速度比真实浏览器快不少，且不需要在持续集成系统中安装各种浏览器或者某个浏览器的不同版本。潜在的坑在于，无界面浏览器的表现有时和真实浏览器不完全相同，会带来某些难以排查解决的浏览器兼容性问题。不支持ES6/ES7的新语法，除非在运行测试前自己对代码进行与编译。但对CoffeeScript有天然的支持。

官网：http://casperjs.org/

github: https://github.com/casperjs/casperjs

2、Protractor:

Protractor 是 Angular 官方正在使用的 E2E 测试框架，可以说是专门为 Angular 定制，内置了各种可以选择、操作 Angular 元素的便捷方法，如果你的应用基于 Angular 开发，使用它可以减少很多重复代码（显然类似的便利在其他框架中也有支持）。对于 Angular 的重度使用者，Protractor 会是非常明智的选择，不同于 CasperJS 的是 Protractor 在真实浏览器中运行测试代码。此外，Protractor 内置的页面加载等待的功能，在 CasperJS 中需要自己设置合理的超时。相比于本文列出的其他框架，Protractor 的明显优势是测试用例的组织方式可以自由使用 Jasmine 或者 Mocha。

官网：http://www.protractortest.org/

github: https://github.com/angular/protractor/

配置文件：https://github.com/angular/protractor/blob/master/lib/config.ts

3、Nightwatch.js：

Nightwatch需要手动在测试代码中添加合适的等待来保障测试的稳定，而Protractor和TestCafe则提供了内置的支持; 劣势在于繁琐的安装步骤

安装文档：http://nightwatchjs.org/gettingstarted/#installation

4、TestCafe

非常年轻但很受开发者欢迎，因为不需要以来WebDriver之类的东西，TestCafe环境只需一键即可完成，这意味着，你可以在任何安装了浏览器应用的物理设备上运行测试。TestCafe支持ES6/ES7语法 。TestCafe 的测试组织方式详见这里，选择符支持也非常强大，支持类似于 jQuery 的灵活异步的选择符，断言风格非常类似 Chai，

官网：https://devexpress.github.io/testcafe/

testCafe使用起来真的非常方便，只需要全局安装一下，无需任何配置

npm install -g testcafe

//ubuntu
sudo npm install -g testcafe

然后就可以直接写一个测试文件了，first.js

// 测试的页面地址是：https://devexpress.github.io/testcafe/example/
import {Selector} from 'testcafe';
fixture `Getting Started` 
    .page `https://devexpress.github.io/testcafe/example/`;

test('My first test', async t => {
    // Test code
})

最后在命令行运行

sudo testcafe firefox first.js

运行结果

5、CodeceptJS

官网：https://codecept.io/

链接：https://www.jianshu.com/p/b71bbf91021c
來源：简书
git: https://github.com/wangshijun/top-5-e2e-framework