前端测试

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

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

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

E2E 测试的经常使用操做以下：

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

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

一、CasperJs:

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

官网：http://casperjs.org/

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

二、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

三、Nightwatch.js：

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

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

四、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

运行结果

五、CodeceptJS

官网：https://codecept.io/ 连接：https://www.jianshu.com/p/b71bbf91021c 來源：简书 git: https://github.com/wangshijun/top-5-e2e-framework