js 接口自动化测试框架（js 接口自动化测试框架是什么）

本篇文章给大家谈谈js 接口自动化测试框架，以及js 接口自动化测试框架是什么对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。 今天给各位分享js 接口自动化测试框架的知识，其中也会对js 接口自动化测试框架是什么进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、使用配置表+Mocha动态生成用例的JSAPI自动化测试
• 2、前端自动化测试框架Jest 基础入门-
• 3、如何搭建webdriver+selenium+nodejs自动化测试框架
• 4、JavaScript代码测试必备的12款工具？

使用配置表+Mocha动态生成用例的JSAPI自动化测试

一、版本发布前，接口测试之痛

App版本发布前，我们都要手工做接口测试，目的是保证App内部H5页面所使用的JSAPI的功能正常，而对所有H5页面进行的P0级功能测试。为什么要做接口测试呢？因为JSAPI无法抓包，测试难度比较大，所以只能通过对H5页面的功能进行校验。但是手工测试，场景覆盖不全面，且耗时耗力。

二、JSAPI自动化测试方案

首先思考几个问题：一个APP有多少个JSAPI？它的用例场景有多少？如何能做到对用例的高效管理？

答案：对于我们app，有22条JSAPI，每条JSAPI多的话可能有几十个场景。传统的自动化方案，通常是一个场景需要手工编写一条用例，这种自动化的方案成本可以说也是非常高的，好在JSAPI并不常变动。但是，我们想实现一种更高效的自动化方式，不需要编写和管理那么多条用例，提升执行效率，同时降低学习成本。

2.1先来看看JSAPI是什么？

Html通过Jsapi，与app收发数据，形如：WebViewJavascriptBridge.callHandler

("API名称", {调用参数},  <回调函数); js调用app的指定api，该方法由页面主动触发举个例子：

如上，getMainInfo是html中一个button的响应函数。我们在js中，通过JSBridge实现对相应JSAPI的调用，如下：实现H5页面可以直接获取到APP的maininfo数据。

2.2方案与原理

1、首先要解决用例管理的问题，我们实现了一种基于配置表的自动化测试方案，不需要编写脚本，只需把所有用例（含请求参数及返回参数的预期值），放到excel配置表中，通过解析器把所有的参数读出来，再通过模版字符串自动生成用例集。

2、jsapi不能脱离app执行，因此在app增加彩蛋入口，连接到一个网页，打开网页时，由js文件自动加载用例集去调用相关的jsapi接口，并用chai断言库对结果进行校验。

3、jsapi有两种，一种是有参数返回的，一种是会引发UI变更的，下图分别是两种jsapi的自动化校验方案。第一种在下文进行了详尽的描述，第二种需要基于UI的自动化去实现，解决了h5页面的控件在app中无法识别的问题。采用js定时传参给html，配合前端自动化去触发调用的方式实现。

2.3用例管理

如下图：第一行是参数名，蓝色是请求参数，绿色是所有返回参数，用‘/’分隔。返回参数的预期值，用正则表达式来表达。

2.4用例解析器

将上述表格解析为如下格式，params和result是两个数组，每个sheet有几行，数组就有几个值，表格中每行代表一个场景。解析器基于Node.js，在服务端运行。

2.5使用Node.js+模版字符串动态生成api.js

在解析得到的所有JSAPI名称后，将调用方法以字符串的方式写入文件中，动态生成我们要调用的所有JSAPI的调用方法，再被html所引用即可：

动态生成的api.js文件是下图这样的：

我们的用例配置表中有n个sheet，即有n个JSAPI的用例，我们这里就自动生成这几个JSAPI的调用方法，传入的req就是我们在配置表中读到的每一行用例中的请求参数。拿到回包的res，再去校验是否与解析配置表得到的所有返回参数一致。

2.6使用Node.js+模版字符串动态生成测试用例

Mocha是JavaScript的自动化测试框架，既可以运行在nodejs环境中，也可以运行在浏览器环境中。如下图，通过调用mocha.setup(‘bdd’)，开启 Mocha 的测试功能（testing helpers）。然后，加载需要的测试项和相应测试的文件。最后，调用了 mocha.run() 执行相应测试。

下图所示部分，自动生成测试用例，也是采用解析JSAPIList的同时写test.js文件的形式。

Ps：describe：称为"测试套件"（test suite），表示一组相关的测试。它是一个函数，第一个参数是测试套件的名称，第二个参数是一个实际执行的函数。

it：称为"测试用例"（test case），表示一个单独的测试，是测试的最小单位。

所有测试用例均为动态生成，如下图：

2.7Mocha框架自动化执行测试用例集

JSAPI的测试页面已经完成了，我们需要把它放到app中才能执行。在app的彩蛋页面放一个入口，加载这个html，当打开这个html的时候，服务自动的去执行并展示结果。如图，执行12条用例，只用了0.14s。

2.8自动化效果

目前，jsapi覆盖率已达70%，用例场景171个，执行耗时1.98s，Android和iPhone两个平台发现bug16个，涉及场景共35个，必现crash2个。

三、效果分析

在h5高产的今天，JSAPI的接口自动化测试解决了手工测试低效且覆盖不完全的苦恼，该方案在复用程度上也是非常友好的高度可复用的。只需创建自己的用例配置表，修改html中JSAPI的连接方式即可。

前端自动化测试框架Jest 基础入门-

　 一、引言

前端这几年发展的非常迅速，我们的系统的功能正在变的越来越复杂，这对我们的前端工程化能力提出了更高的要求，听到工程化，大家的第一反应肯定是高质量的代码设计和高质量的代码实现。

但实际上，前端 自动化测试 也是前端工程化里面非常重要的一个环节。

　 　二、 Jest 基础入门

一个普通前端听到自动化测试，第一反应可能是：我工作这么多年也没写过测试，这个东西有用吗？

答：非常有用

如果你打开GitHub，去看一下流行的开源库或者框架的源码，你会发现，在这些源码里面，全部都包含了大量的自动化测试的代码。比如antd、lodash、再比如vue、react、echarts、redux等等……

开源的工具需要稳定性，而引入前端自动化测试为开源项目提供稳定性，是再好不过的选择了。

三、学习前提

阅读这篇 文章 需要以下知识储备：

·js、es6 基础语法

·node、npm 相关知识

·git 的相关操作

·react或者vue，至少了解一个

·状态管理工具，至少了解一个

四、背景及原理

首先在任意目录下创建一个math.js文件，假设这个文件是一个数学库，里面定义两个函数，分别是加法和减法：

// math.js

function add(a, b) {

return a + b;

}

function minus(a, b) {

return a - b;

}

这时候我们可以在业务代码里去使用这个数学库。

但是，假如，上面的minus函数我们不小心写错了，把减法写成了乘法，如果直接在业务代码中使用这个方法，就会带来无法预期的bug。

所以这时候，我们就需要对math.js这个公共库进行自动化测试，确保没问题之后，再让业务组件去调用，这样就会保证不会出特别多的bug了。

我们可以这样做：

在该目录下创建一个math.test.js文件，然后写一点测试代码：

const result = add(3, 7);

const expect = 10;

if (result !== expect) {

throw new Error(`3 + 7 应该等于${expect}，结果却是${result}`);

}

const result = minus(3, 3);

const expect = 0;

if (result !== expect) {

throw new Error(`3 - 3 应该等于${expect}，结果却是${result}`);

}

这时候我们运行这段代码，会发现没有抛出任何异常，说明这两个 测试用例 都通过了。

这就是自动化测试最原始的雏形。

然后我们思考一个问题，如何将这堆代码进行简化，做成一个公用的函数，比如这样：

// 测试 3 + 3 是否等于 6

expect(add(3, 3)).toBe(6);

// 测试 3 - 3 是否等于 0

expect(minus(3, 3)).toBe(0);

expect 方法实现：

function expect(result) {

return {

toBe(actual) {

if (result !== actual) {

throw new Error("预期值和实际值不相等");

}

},

};

}

这时候我们运行这段代码，会发现没有抛出任何异常，说明这两个测试用例都通过了。

虽然实现了 expect 函数，但是报错的内容始终是一样的，我们不知道是具体哪个方法出现了问题，这时候我们就会想到，我们需要将这个 expect 方法进一步做改良，我们如果能在 expect 方法外部再包装一层，就可以多传递一些额外的内容，比如创造这样的写法：

test("测试加法 3 + 3", () = {

expect(add(3, 3)).toBe(6);

});

test("测试减法 3 - 3", () = {

expect(minus(3, 3)).toBe(0);

});

这样封装之后，我们既能进行测试，又能得到测试的描述。

test 方法实现：

function test(desc, fn) {

try {

fn();

console.log(`${desc} 通过测试`);

} catch {

console.log(`${desc} 没有通过测试`);

}

}

所以前端自动化测试到底是什么？

答：实际上就是写了一段其它的用来测试的js代码，通过测试代码去运行业务代码，判断实际结果是否满足预期结果，如果满足，就是没有问题，如果不满足，就是有问题。

上面实现的 expect 方法 和 test 方法 实际上和主流的前端自动化测试框架 jest 里面的语法是完全一致的。所以上面的示例代码可以理解为 jest 的底层实现原理。

如何搭建webdriver+selenium+nodejs自动化测试框架

1
安装nodejs程序包
2
打开nodejs
从开始程序中选择Node.js---Node.js command prompt
3
在命令窗口输入以下命令
一、npm install webdreverio -g
二、npm install selenium-standalone@latest -g
4
安装selenium服务，在命令窗口输入以及下命令
selenium-standalone install
此时会报错，告诉你IE和谷歌驱动安排不成功
解决方法：新此目录下的C:\Users\saber\AppData\Roaming\npm\node_modules\selenium-standalone\.selenium的chromedriver和iedriver文件夹替换掉
5
配置环境变量
编辑用户变量：
变量名：PATH
变量值：C:\Users\saber\AppData\Roaming\npm
新建系统变量：
变量名：node_path
变量值：C:\Users\saber\AppData\Roaming\npm\node_modules
6
开启selenium服务，在命令窗口输入以下命令
selenium-standalone start
7
打开cmd窗口，输入脚本的位置
8
运行自动化测试脚本
至此，webdriver+selenium+nodejs的自动化框架就搭建完成，大家尽情编写js脚本吧。

JavaScript代码测试必备的12款工具？

1、Jasmine

Jasmine是一个行为驱动的测试开发框架，用于对JavaScript代码进行测试。它不依赖其它任何JavaScript框架，也不需要DOM。它的语法简洁、明确，写测试非常容易。

2、Mocha

Mocha是一个功能丰富的JavaScript测试框架，既运行于Node.js环境中，也可以运行于浏览器环境中。Mocha以串行方式运行测试，能做出灵活而准确的报告，也能将测试中未捕捉的异常映射到正确的测试用例。

3、Chai

Chai是个支持BDD/TDD的库，可用于node和浏览器，可配合任何JavaScript测试框架使用。

4、QUnit

QUnit是个功能强大又易于使用的JavaScript单元测试框架。jQuery、jQueryUI和jQueyMobile项目都使用这个框架，它能测试普通的JavaScript代码。

5、Sinon

Sinon.JS为JavaScript提供了独立的spies、stubs和mocks[译者注：Spy、Stub和Mock都是测试专用名词，Stub常被翻译为桩，spies是Spy的复数形式，是一种可以监视方法、调用和参数的技术]。它不依赖任何东西，可以配合任何单元测试框架工作。

6、Karma

Karma是针对连通浏览器的一个框架无关测试运行器。每一个测试结果对应每个浏览器，它的测试和显示都是通过命令行暴露给开发者的，这样他们就可以看到浏览器测试的通过或失败。

7、Selenium

Selenium有一个简单的目标：就是自动化浏览器。它主要用于自动化测试web应用程序，但是只是很简单地考虑到了基于网络的管理任务。

8、WebdriverIO

WebdriverIO允许用户仅添加几行代码就可以控制浏览器或移动应用程序，使测试代码更简单、简洁、易读。集成的TestRunner同样允许你以同步的方式调用异步命令，这样你不需要关心如何处理Promise以避免竞态条件。此外，它取消了所有的繁琐的设置工作，并且会为您管理的Selenium会话。

9、Nightwatch

Nightwatch.js是一个易于使用的Node.js，它是为基于浏览器的app和网站设计的终端到终端（E2E）的测试方法。它使用强大的W3CWebDriverAPI，用于在DOM元素上执行命令和断言。

10、PhantomCSS

PhantomCSS获得CasperJS捕获的屏幕截图，并使用Resemble.js将其与基准图进行对比，以测试RGB像素差异。java课程http://www.kmbdqn.cn/发现PhantomCSS然后生成图像差异对比，用于帮助您找到原因。

11、PhantomFlow

PhantomFlow使用决策树提供UI测试方案。针对PhantomJS,CasperJS和PhantomCSS的NodeJS包装器——PhantomFlow能够流畅地在代码中描述用户流程，同时生成用于可视化的结构化树数据。

关于js 接口自动化测试框架和js 接口自动化测试框架是什么的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。 js 接口自动化测试框架的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于js 接口自动化测试框架是什么、js 接口自动化测试框架的信息别忘了在本站进行查找喔。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。