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

简介:

笔者在本文中会结合自身实践和 GitHub 趋势对比最受欢迎的 Node.js E2E 测试解决方案,期望对大家的技术选型有帮助

测试,尤其是自动化测试在现代 WEB 工程中有着非常重要的角色,与交付过程集成良好的自动化测试流程可以在新版发布时帮你快速回归产品功能,也可以充当产品文档。测试因粒度不同又可以分为单元测试、接口测试、功能测试。在 WEB 领域,功能测试亦称为端到端测试(End to End Test,简称 E2E 测试),笔者在本文中会结合自身实践和 GitHub 趋势对比最受欢迎的 Node.js E2E 测试解决方案,首先我们按 GitHub 的 star 总数量排序,取前 5 名列举如下(注意:你阅读本文时 star 的数量可能已经不是最新的)。

  • CasperJS — 6460 个 star,官网,代码,最近更新于 7 天前;
  • Protractor — 6408 个 star,官网,代码,最近更新于 10 天前;
  • Nightwatch.js — 6121 个 star,官网,代码,最近更新于 6 天前;
  • TestCafe — 2268 个 star,官网,代码,最近更新于 1 天前;
  • CodeceptJS — 1087 个 star,官网,代码,最近更新于 7 天前;

然后分别从环境搭建、测试编写、测试报告等方面来直观展示这 5 个 E2E 测试框架,期望能够对做测试框架选型的同学有帮助。为了更客观的体现各测试框架的特点,笔者设计了一些包含 E2E 测试中常用操作的测试用例,分别使用不同的框架来编写。E2E 测试的常用操作如下:

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

CasperJS

CasperJS 是 star 数最高的测试框架,也是笔者最早开始采用的 E2E 测试框架,使用 Python 编写,虽不算是严格意义上的原生 Node.js 解决方案,但因为能够使用 npm 安装,且能够很好的与 Node.js 工具链组合使用,笔者还是把它列在了这里。其特别之处在于只能与无界面浏览器(Headless Browser)组合使用,比如 PhantomJS 和 SlimerJS,这也让 CasperJS 的优势显而易见:测试运行速度比真实浏览器快不少,且你不需要在持续集成系统中安装各种浏览器或者某个浏览器的不同版本;潜在的坑在于,无界面浏览器的表现有时和真实浏览器不完全相同,会带来某些难以排查解决的浏览器兼容问题。

安装步骤

  • 安装 Python 2.6 或更高版本
  • 安装 PhantomJS:npm install -g phantomjs
  • 安装 CasperJS:npm install -g casperjs

编写测试

如果使用 ES6 之前的风格来编写 CasperJS 测试,代码看起来会显得非常臃肿,而实际上 CasperJS 也不支持任何 ES6/ES7 的新语法,除非你在运行测试之前自己对代码进行预编译,实际代码如下:

 
  1. casper.test.begin('Github Search'function suite(test) { 
  2.  
  3.     casper.start('https://github.com'function () {    // 打开首页 
  4.  
  5.         test.assertVisible('.js-site-search-form''should search input visible'); 
  6.  
  7.         this.fill('.js-site-search-form', { q: 'casperjs' }, true); // 键入搜索词、并提交 
  8.  
  9.     }); 
  10.  
  11.  
  12.     casper.then(function () { 
  13.  
  14.         test.assertEval(function() {    // 确认搜索结果是 10 
  15.  
  16.             return __utils__.findAll('.repo-list-item').length >= 10; 
  17.  
  18.         }, 'should show 10 results'); 
  19.  
  20.     }); 
  21.  
  22.  
  23.     casper.then(function () { 
  24.  
  25.         this.click('.repo-list-item h3 a'); // 点击第1条结果 
  26.  
  27.     }); 
  28.  
  29.  
  30.     var location = null
  31.  
  32.  
  33.     casper.then(function () {   // 这里是取环境变量 
  34.  
  35.         test.assertVisible('.repository-content''should repo detail visible'); 
  36.  
  37.         location = this.evaluate(function () { 
  38.  
  39.             return window.location; 
  40.  
  41.         }); 
  42.  
  43.     }); 
  44.  
  45.  
  46.     casper.then(function () {   // 确认目前跳转到了 casperjs 官方仓库 
  47.  
  48.         test.assertEquals(location.pathname, '/casperjs/casperjs''should casperjs repo found'); 
  49.  
  50.     }); 
  51.  
  52.  
  53.     casper.run(function () { 
  54.  
  55.         test.done(); 
  56.  
  57.     }); 
  58.  
  59. }); 

为 CasperJS 对 CoffeeScript 有天然的支持,熟悉 CoffeeScript 的同学可以尝试使用 CoffeeScript 编写测试,或者使用这个工具转换为 CoffeScript。

运行测试

 
  1. casperjs test casperjs/test.js 

查看报告

►测试通过

►测试失败

Protractor

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

安装步骤

  • 安装 JDK
  • 安装 Protractor:npm install –g protractor
  • 初始化 WebDriver Manager:webdriver-manager update
  • 创建配置文件

编写测试

Protractor 默认开启了等待 Angular 加载并初始化完成的功能,如果你测试的不是 Angular 应用,则需要关闭这个功能,测试代码示例如下:

 
  1. describe('angularjs homepage todo list'function () { 
  2.  
  3.     browser.ignoreSynchronization = true;   // 不启用智能等待,因为 github 不是用 angluar 编写的 
  4.  
  5.     browser.get('https://github.com'); 
  6.  
  7.  
  8.     it('should search input visible'function () { 
  9.  
  10.         var searchInput = element(by.className('js-site-search-focus')); 
  11.  
  12.         var searchForm = element(by.className('js-site-search-form')); 
  13.  
  14.         expect(searchInput.isDisplayed()).toEqual(true); 
  15.  
  16.         searchInput.sendKeys('protractor'); 
  17.  
  18.         searchForm.submit(); 
  19.  
  20.     }); 
  21.  
  22.  
  23.     it('should show 10 results'function () { 
  24.  
  25.         var searchList = element.all(by.className('repo-list-item')); 
  26.  
  27.         expect(searchList.count()).toEqual(10); 
  28.  
  29.         element(by.css('.repo-list-item h3 a')).click(); 
  30.  
  31.     }); 
  32.  
  33.  
  34.     it('should repo detail visible'function () { 
  35.  
  36.         var repoContent = element.all(by.className('repository-content')); 
  37.  
  38.         expect(repoContent.isDisplayed()).toEqual([true]); 
  39.  
  40.     }); 
  41.  
  42.  
  43.     it('should protractor repo found'function (done) { 
  44.  
  45.         browser.executeScript(function () { 
  46.  
  47.             return window.location; 
  48.  
  49.         }).then(function (location) { 
  50.  
  51.             expect(location.pathname).toEqual('/angular/protractor'); 
  52.  
  53.             done(); 
  54.  
  55.         }); 
  56.  
  57.     }); 
  58.  
  59. }); 

运行测试

  • 运行 WebDriver Manager: webdriver-manager start
  • 运行测试:protractor protractor.config.js

查看报告

►测试通过

►测试失败

Nightwatch

同样流行的 Nightwatch,可以认为是 Protractor 的主要竞争对手,使用 Nigthwatch 编写的代码非常简洁,但是你需要手动在测试代码中添加合适的等待来保障测试的稳定,而 Protractor 和 TestCafe 则提供了内置的支持;Nightwatch 的主要劣势在于繁琐的安装步骤,可能部分同学看到这个安装文档或者下面的安装步骤就知难而退了。

安装步骤

  • 安装 JDK,版本 7 以上
  • 下载 Selenium: selenium-server-standalone-{VERSION}.jar,复制到测试目录
  • 下载 WebDriver for Google Chrome,复制到测试目录
  • 安装 Nightwatch: npm install -g nightwatch
  • 创建配置文件,需要在配置中声明 chromewebdriver 的地址;

编写测试

 
  1. module.exports = { 
  2.  
  3.     'Github Search'function (browser) { 
  4.  
  5.         browser // 打开首页、填写搜索词、提交搜索表单 
  6.  
  7.             .url('https://github.com'
  8.  
  9.             .assert.visible('.js-site-search-focus''should search input visible'
  10.  
  11.             .setValue('.js-site-search-focus''nightwatch'
  12.  
  13.             .submitForm('.js-site-search-form'
  14.  
  15.             .pause(1000); 
  16.  
  17.  
  18.         browser.execute(function () {   // 确认展示 10 条搜索结果 
  19.  
  20.             return document.querySelectorAll('.repo-list-item').length; 
  21.  
  22.         }, function (args) { 
  23.  
  24.             browser.assert.equal(args.value, 10, 'should show 10 results'); 
  25.  
  26.         }); 
  27.  
  28.  
  29.         browser.click('.repo-list-item h3 a').pause(1000); 
  30.  
  31.  
  32.         browser.assert.visible('.repository-content''should repo detail visible'); 
  33.  
  34.  
  35.         browser.execute(function () { 
  36.  
  37.             return window.location; 
  38.  
  39.         }, function (args) {    // 确认打开了 nightwatch 官网 
  40.  
  41.             browser.assert.equal(args.value.pathname, '/nightwatchjs/nightwatch''should nightwatch repo found'); 
  42.  
  43.         }); 
  44.  
  45.  
  46.         browser.end(); 
  47.  
  48.     } 
  49.  
  50. };  

运行测试

  • 运行 Selenium:java -jar selenium-server-standalone-3.0.0.jar
  • nightwatch test.js

查看报告

►测试通过

►测试失败

TestCafe

TestCafe 是非常年轻但很受开发者欢迎的测试框架,因为不需要依赖 WebDriver 之类的东西,TestCafe 环境只需一键即可完成,这也意味着,你可以在任何安装了浏览器应用的物理设备上运行测试。TestCafe 对 ES6/ES7 语法的天然支持让它更具前瞻性,命令行工具产生的测试报告简洁但不失完整。由于开源的时间较短,相比于其他测试框架 TestCafe 的社区和生态还不够成熟。尽管如此,不断出现的各种 TestCafe 功能扩展也证明了它的社区和生态在不断壮大。对于站在 WEB 技术风口浪尖的同学,TestCafe 无疑是非常值得留意的 E2E 测试解决方案,开箱即用的特性极大的降低了使用者的成本。

安装步骤

  • npm install testcafe -g

编写测试

TestCafe 的测试组织方式详见这里,选择符支持也非常强大,支持类似于 jQuery 的灵活异步的选择符,断言风格非常类似 Chai,下面是测试代码:

 
  1. import { Selector } from 'testcafe'
  2.  
  3.  
  4. fixture `Github Search` 
  5.  
  6.     .page `https://github.com`; 
  7.  
  8.  
  9. test('should github search work as expected', async t => { 
  10.  
  11.     const searchInput = Selector('.js-site-search-focus'); 
  12.  
  13.     const searchList = Selector('.repo-list-item'); 
  14.  
  15.     const resultItem = Selector('.repo-list-item h3 a'); 
  16.  
  17.     const repoContent = Selector('.repository-content'); 
  18.  
  19.  
  20.     await t.setTestSpeed(0.8); 
  21.  
  22.     await t.expect(searchInput.exists).eql(true'should search input visible'); 
  23.  
  24.     await t.typeText(searchInput, 'testcafe'); 
  25.  
  26.     await t.pressKey('enter'); 
  27.  
  28.  
  29.     await t.expect(searchList.count).eql(10, 'should show 10 results'); 
  30.  
  31.     await t.click(resultItem); 
  32.  
  33.  
  34.     await t.expect(repoContent.exists).eql(true'should repo detail visible'); 
  35.  
  36.  
  37.     const location = await t.eval(() => window.location); 
  38.  
  39.     await t.expect(location.pathname).eql('/DevExpress/testcafe''should testcafe repo found'); 
  40.  
  41. });  

运行测试

 
  1. 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

编写测试

 
  1. 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');}); 

运行测试

 
  1. 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 测试,做决定的时候没有标准答案,因为还需要结合项目自身的特点,比如规模大小、对上面各因子的要求。


作者:wangshijun

来源:51CTO

相关文章
|
1月前
|
开发框架 JavaScript 安全
js开发:请解释什么是Express框架,以及它在项目中的作用。
Express是Node.js的Web开发框架,简化路由管理,支持HTTP请求处理。它采用中间件系统增强功能,如日志和错误处理,集成多种模板引擎(EJS、Jade、Pug)用于HTML渲染,并提供安全中间件提升应用安全性。其可扩展性允许选用合适插件扩展功能,加速开发进程。
|
1月前
|
敏捷开发 分布式计算 测试技术
深入理解软件测试中的自动化框架选择与优化策略
【2月更文挑战第29天】 在软件开发的生命周期中,测试环节扮演着至关重要的角色。随着敏捷开发和持续集成的普及,自动化测试成为确保软件质量和加快产品上市速度的关键手段。本文将探讨在构建自动化测试框架时面临的挑战,分析不同类型自动化框架的特点及其适用场景,并提出一系列优化策略,旨在帮助测试工程师提高测试效率,确保测试结果的准确性。
23 0
|
6天前
|
Web App开发 JavaScript 前端开发
深入理解自动化测试框架Selenium的设计与实现
【4月更文挑战第20天】 在软件测试领域,自动化测试已成为提升测试效率和确保产品质量的关键手段。Selenium作为一款广泛使用的开源自动化测试框架,其设计精巧且功能强大,为Web应用提供了一种灵活、高效的测试解决方案。本文将深入探讨Selenium的核心架构与实现细节,解析其如何通过模拟用户操作来执行测试用例,以及它如何适应不断变化的Web技术标准。通过对Selenium内部机制的剖析,旨在帮助测试工程师更好地掌握该工具,并在测试实践中发挥其最大效能。
|
7天前
|
监控 测试技术 数据安全/隐私保护
如何将代理IP集成到自动化测试框架中?
如何将代理IP集成到自动化测试框架中?
|
10天前
|
敏捷开发 监控 前端开发
深入理解自动化测试框架Selenium的架构与实践
【4月更文挑战第16天】 在现代软件开发过程中,自动化测试已成为确保产品质量和加快迭代速度的关键手段。Selenium作为一种广泛使用的自动化测试工具,其开源、跨平台的特性使得它成为业界的首选之一。本文旨在剖析Selenium的核心架构,并结合实际案例探讨其在复杂Web应用测试中的高效实践方法。通过详细解读Selenium组件间的交互机制以及如何优化测试脚本,我们希望为读者提供深入理解Selenium并有效运用于日常测试工作的参考。
15 1
|
10天前
|
自然语言处理 测试技术 API
深入理解自动化测试框架Selenium的设计理念与实践
【4月更文挑战第15天】 在现代软件开发过程中,自动化测试已成为确保产品质量和加速迭代的关键手段。Selenium作为一种广泛使用的自动化测试框架,提供了对多种浏览器和平台的支持,极大地促进了Web应用的功能测试。本文旨在剖析Selenium的核心设计理念,探讨其在实际项目中的应用,并指出常见的误区及最佳实践,以期帮助测试工程师更高效地利用Selenium进行测试工作。
|
12天前
|
监控 测试技术 API
深入理解自动化测试框架Selenium的设计与实现
【4月更文挑战第14天】在软件开发过程中,自动化测试是确保代码质量、减少人工重复劳动的关键步骤。Selenium作为一款广泛使用的自动化测试工具,提供了对多种浏览器和操作系统的支持。本文将探讨Selenium的核心组件及其架构设计,分析其如何通过WebDriver与浏览器交互,以及它如何支持多种编程语言进行脚本编写。同时,我们还将讨论Selenium Grid的作用以及它如何实现并行测试,以缩短测试周期并提高测试效率。
176 59
|
13天前
|
Web App开发 前端开发 Java
框架分析(11)-测试框架
框架分析(11)-测试框架
|
13天前
|
开发框架 JavaScript 前端开发
【Node系列】Express 框架
Express.js 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架,提供一系列强大的特性来帮助你创建各种 web 和移动设备应用。
33 2
|
13天前
|
JavaScript 前端开发 API
框架分析(3)-Vue.js
框架分析(3)-Vue.js