TestCafe
　　TestCafe 是非常年轻但很受开发者欢迎的测试框架，因为不需要依赖WebDriver之类的东西，TestCafe 环境只需一键即可完成，这也意味着，你可以在任何安装了浏览器应用的物理设备上运行测试。TestCafe 对 ES6/ES7 语法的天然支持让它更具前瞻性，命令行工具产生的测试报告简洁但不失完整。由于开源的时间较短，相比于其他测试框架 TestCafe 的社区和生态还不够成熟。尽管如此，不断出现的各种 TestCafe 功能扩展也证明了它的社区和生态在不断壮大。对于站在 WEB 技术风口浪尖的同学，TestCafe 无疑是非常值得留意的 E2E 测试解决方案，开箱即用的特性极大的降低了使用者的成本。
　　安装步骤
　　npm install testcafe -g
　　编写测试
　　TestCafe 的测试组织方式详见这里，选择符支持也非常强大，支持类似于 jQuery 的灵活异步的选择符，断言风格非常类似 Chai，下面是测试代码：
import { Selector } from 'testcafe';
fixture `Github Search`
.page `https://github.com`;
test('should github search work as expected'， async t => {
const searchInput = Selector('.js-site-search-focus');
const searchList = Selector('.repo-list-item');
const resultItem = Selector('.repo-list-item h3 a');
const repoContent = Selector('.repository-content');
await t.setTestSpeed(0.8);
await t.expect(searchInput.exists).eql(true， 'should search input visible');
await t.typeText(searchInput， 'testcafe');
await t.pressKey('enter');
await t.expect(searchList.count).eql(10， 'should show 10 results');
await t.click(resultItem);
await t.expect(repoContent.exists).eql(true， 'should repo detail visible');
const location = await t.eval(() => window.location);
await t.expect(location.pathname).eql('/DevExpress/testcafe'， 'should testcafe repo found');
});
　　运行测试
　　testcafe chrome testcafe/test.js
　　查看报告
　　测试通过

　　测试失败

　　CodeceptJs
　　CodeceptJs 可能并不算是严格意义的 E2E 测试框架，它对各种测试运行工具做了一层封装，旨在提供更简洁的API，你可以自由选择下面这些测试运行工具：
　　· WebDriverIO
　　· Protractor
　　· Selenium WebDriver JS
　　· NightmareJS
　　CodeceptJs 让笔者比较欣赏的地方在于测试用例的组织，基于 Feature 和 Scenario 两个粒度来组织测试让它看起来更有 E2E 测试的样子，它支持新的 ES6 语法，同时也屏蔽各种复杂的回调细节，所有的测试用例都是以第一人称来做，让测试代码阅读起来更像是自然语言，而让笔者担忧的地方在于，过多的封装可能导致出问题时排查比较困难。
　　安装步骤
　　· 安装 CodeceptJs npm install -g codeceptjs
　　· 用命令行工具初始化配置 codecept.json：codeceptjs init
　　· 使用命令行工具生成测试：codeceptjs gt
　　· 此外，你需要安装你所选择的底层测试工具，比如 WebDriver、Protractor
　　编写测试
Feature('Github Search');
Scenario('search codecept repo'， (I) => {
I.amOnPage('https://github.com');
I.seeElement('.js-site-search-focus');
I.fillField('.js-site-search-focus'， 'codeceptjs');
I.pressKey('Enter');
I.seeElement('.repo-list-item');
I.click('.repo-list-item h3 a');
I.seeElement('.repository-content');
I.seeInCurrentUrl('/Codeception/CodeceptJS');
});
　　运行测试
　　codeceptjs run
　　查看报告
　　测试通过

　　测试失败

　　总结对比
　　本文中的所有代码可以在 GitHub 仓库上看到。任何开发工具的演化都是朝着更快捷、高效的目标。本文介绍的几个 E2E 测试框架可以说各有所长，在做框架选型的时候该考虑哪些因子呢？这些因子的优先级如何？下面是笔者的考虑：
　　· 上手简单：P0，环境搭建步骤？出错的概率？是否需要繁琐的配置？TestCafe 非常简单；
　　· 文档支持：P0，是否包含入门文档？API 参考？开发者文档？本文中的五款都还不错；
　　· 过程透明：P0，测试运行过程是否是透明的，能否观察到页面行为？CasperJS 像个黑盒；
　　· 运行速度：P0，测试运行速度能决定你 CI 流程的好坏；
　　· 测试报告：P0，是否支持多种报告？是否方便与 CI 流程集成？比如要支持 XML、JUnit 等格式输出；
　　· 调试功能：P0，出错时提供的信息是否清晰？是否支持截图？TestCafe 做的很好；
　　· 测试组织：P1，是否能与现有的技术栈很好的组合起来？不能结合独创的方式是否直观？如果是大型项目可以提高优先级，Protractor 和 CodeCeptJs 占优；
　　· 代码风格：P1，简洁的代码意味的更高的可读性、更低的维护成本；TestCafe、CodeCeptJs 不错；
　　· 社区支持：P2，围绕这个工具是否有成熟的社区？可以用来提问、贡献代码；
　　· 可扩展性：P3，是否支持 API 扩展？扩展成本如何？
　　如果你的项目中需要添加 E2E 测试，做决定的时候没有标准答案，因为还需要结合项目自身的特点，比如规模大小、对上面各因子的要求。
　　备注：本文的初始版本来源于 Medium 上的文章，但是笔者在原文基础上重新设计了测试用例，每个测试框架的介绍也参与了笔者自身的使用经验，框架选型上也融入了自己的思考，有兴趣的可以去看原文。