Ext JS应用测试概览| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

Ext JS应用测试概览

## Ext JS应用测试概览

### 关于测试
从测试的角色和阶段来看，习惯上将测试分为以下四个阶段：
```
测试阶段 测试人员 测试方式 测试内容
单元测试 开发人员 白盒 对代码的最小可测试单元，比如一个函数。验证“设计”
集成测试 开发人员 白盒+黑盒 对多个类和模块之间的接口， 验证“设计”和“需求”
系统测试 测试人员 黑盒 根据需求文档进行测试 ，从需求文档展出测试场景与用例
验收测试 终端用户 黑盒 又称用户测试或交付测试或UAT（User Accept Test）
```
|  测试阶段 |  测试人员  | 测试方式  |测试内容 |
| ------------: | ------------: | ------------: | ------------: |
|  单元测试 | 开发人员  | 白盒  | 对代码的最小可测试单元，比如一个函数。验证“设计”  |
| 集成测试  | 开发人员  | 白盒+黑盒  |  对多个类和模块之间的接口， 验证“设计”和“需求” |
| 系统测试  |  测试人员  | 黑盒  | 根据需求文档进行测试 ，从需求文档展出测试场景与用例  |
|  验收测试 | 终端用户  | 黑盒  | 又称用户测试或交付测试或UAT（User Accept Test）  |

从测试内容来看，测试包含：又有以下术语：
函数代码测试（Code）：对代码中的函数或类的功能进行验证。
功能测试（Functional Tests）：对系统的整体功能进行验证
性能测试（Performance Test）：对系统的资源占有，响应速度等进行测试
端到端的测试（End to End Test）：对应到的是系统测试和验收测试阶段。
自动化测试（Auto Test）：使用自动化测试工具，实现无人值守的测试。一般是持续集成（CI）的一部分。
兼容测试（Compatibility Test）：包括操作系统，软件版本兼容，对于Web应用，还有常见的浏览器兼容。
Sencha 提供了一个测试工具集：Sencha Test，在Sencha Test中的测试术语包含：
前端的单元测试 Unit Tests：对代码层级进行测试，比如模型或是组件的测试
功能测试 Functional Tests，对应端到端测试（End-to-End 测试），在应用启动后对通过URL进行测试。
### Sencha Test 总体介绍
Sencha Test是Sencha提供的测试平台，可以用于测试Ext JS、ExtReact等应用，可以测试一般的Web应用。Sencha Test包括两个主要部分：
界面测试工具 Sencha Studio
命令行测试工具 STC （Sencha Test Command）
使用Sencha Test，可以对Web应用进行单元测试和功能测试。
### 单元测试 VS 功能测试
单元测试可以描述为针对应用程序的基础代码的测试，单元测试一般是应用开发人员需要编写的，可以不启动应用。
功能测试则是分析正在运行的应用程序，而不是简单地测试其各个部分。
单元测试
单元测试是代码层级的测试，关注代码执行是否正确，对于Ext JS而已：
可以在不运行应用的状况下对数据模型进行测试。
应用程序内使用的视图也可以独立于应用程序进行测试。
相比功能测试，单元测试有其特有的优势，比如：
通过正在运行的应用程序进行测试时，应用程序的许多方面可能很难测试或需要很长时间。 测试可能要求您首先遵循一组特定的导航步骤，或者以特定的用户类型登录
单元测试实例：
对模型有效性的单元测试(没有视图的逻辑)
不启动应用，创建一个测试，启动注入”普通用户“权限的视图。
以模型验证为例， 定义一个User的模型类：
```javascript
Ext.define('Ext7DemoApp.model.User', {    
	extend: 'Ext7DemoApp.model.Base',    
	fields: [        
	'id',  'name', 'kingdom'
	],    
	validators:{        
	name:'presence',        
	kingdom:{
		type:'inclusion',
		list: ['魏国', '蜀国', '吴国']
	}   
}});
```

验证模型实例是否有效的示例代码如下：
```javascript
describe("UserValidation", function () {    
	it("should pass", function (done) {        //传入done参数表示执行异步测试               
		var user = new Ext7DemoApp.model.User(__my_user_data),                   
		failedValidation = user.getValidation().dirty;
		expect(failedValidation).toBe(!true);                
		done(); //调用done表示测试结束    
		});
});
```

### 功能测试
单元测试灵活，简单。但是在不启动应用程序状况下，有些功能是无法验证的，比如：
复杂路由的测试
应用环境的测试（比如数据库连接）
功能测试对质量保证和最终用户特别感兴趣。
功能测试实例： 普通用户可以编辑用户表单的某些栏位，需要启动应用，使用普通用户的账号登录。
### 单元测试与功能测试比较
|  单元测试 |  功能测试  |   |
| :------------: | :------------: | :------------: |
|  测试人员 |   开发人员 | 测试工程师  |
| 是否需启动应用  |  否 |  是 |
| 目标  |  代码模块 | 应用的质量保证和最终用户 的要求  |
| 优点   | 简单、快速  | 全面  |
|  缺点 | 对路由以及环境等无法测试  | 测试步骤较多  |

### Sencha Test的组成
Sencha Test包含两个部分
Sencha Studio , 界面操作
Sencha Test Command， 简称stc, 命令行工具
Sencha Studio提供了图形化的交互式测试运行程序， 适合开发人员和测试人员使用；stc提供脚本运行方式，适合Jenkins或TeamCity等自动化CI（持续集成）工具。
Sencha Test的主要功能有：
测试运行器
测试管理和配置
各种浏览器的集成
Sencha Studio
Sencha Studio使用项目来管理测试，这个项目可以是一个独立的项目，也可以和原应用程序放置在一起。
Sencha Studio可以使用在Sencha cmd构建的项目中，也可以使用在不使用Sencha cmd的项目中。
Sencha Studio内置了代码编辑器，可以识别Jasmine和Sencha Test API的代码的自动辅助和完成。当然也可以使用其他的编辑器。
测试的代码文件最好也放入代码控管。
### STC 命令行工具
使用WebDriver管理浏览器，支持本地浏览器，也可以使用云端的浏览器（Sauce Labs或者BrowserStack ）
实现全方位的自动化测试
将测试导入源码控制器（比如Git）
结合CI，检测到应用程序或测试文件修改，自动调用CLI
### Sencha Test的功能
### 测试API
Sencha Test提供了一套测试的API，名字是Futrues API ，这些API以ST开头。相比单纯使用Jasmine的测试代码，Futrues API提供了更高级的功能，比如：
界面测试的异步特性
使用API执行连续的测试步骤，比如找到页面的Grid，定位某一行的某一列，判断这个Cell的值是否是预期的值。
Sencha Test可以理解Sencha框架（例如Ext JS和ExtReact）以及非Sencha Web应用程序。 Sencha Test API提供了许多功能，以最大程度地减少测试Ext JS和其他Web应用程序所需的工作量。 尽管大多数测试框架（包括Jasmine）本质上都是同步的，但Sencha Test提供了一个称为“ Futures API”的API系列，它可以识别GUI测试的异步特性。
使用Futures API，可以简单、紧凑的方式表达GUI交互的复杂序列。可以自动的模仿人的测试动作，比如：
```javascript
ST.grid('#userGrid').               // 通过组件查询定位到指定网格    
rowWith('firstName', 'Bill').   // 通过条件匹配对应的行        
cell('lastName').           //选择该行的某一列            
reveal().               // 定位到该单元格            
textLike('Preston');    // 测试该单元格的值是否与期望值相同
```

如果在指定的时间内，单个格的值和期望的值不同，则测试失败。否则，成功。
Futures API提供了更多的Ext JS和ExtReact组件感知方法，以及用于处理原始DOM元素的API。 验证逻辑可以轻松添加到事件序列中，并且可以以同样的简便性插入自定义等待条件。
### Event Recorder （事件记录器）
事件记录器可以录制用户操作应用程序的事件流。也就是将在页面中操作的过程转换成代码。使用Sencha Studio 内置的编辑器，可以快速启动事件记录器并将一系列事件插入测试中。
在Sencha Studio中使用事件记录器的界面如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ou9Xd9vI-1595344199853)(images/screenshot_1595343470859.png)]
### Inspect Tool (检查工具)
Sencha Studio还提供一种机制来检查正在运行的Web应用程序中的组件或元素，并生成稳定的定位器，该定位器可用于在整个用户测试中引用这些组件/元素。
一旦使用Inspect工具整理了所需的定位器，就可以将它们与适当的Future API一起直接插入到测试套件中，或者可以创建Page Object，从而可以在中央位置存储和管理定位器 ，而不是在多个位置复制定位器字符串。
Inspect的使用入口如下：
![](/upload/picture/2022-09-27/upload_b51aa2e38094f8dc06e10b5df7a073a4.png)
### 结果查看
更直观的查看测试的结果（纵向测试的项次，横向不同的浏览器）。也可以将将执行结果保存到归档服务器上，
测试结果查看如下：
	![](/upload/picture/2022-09-27/upload_f5f46ed096241eae8cbda510bcc34e3e.png)
### 可视化屏幕比较
Sencha Test还提供了一种简单的方法，通过捕获屏幕快照并将它们与基线进行比较来验证应用程序的正确状态。这就像在适当的时间使用ST.screenshot（）API一样简单。第一次运行测试时会自动建立基线（或预期）图像。如果屏幕截图与建立的基线不匹配，则随后的测试运行将导致测试失败。
尽管计算测试速度更快，并且在可以使用它们时通常是首选，但视觉测试有时是测试应用程序某些方面的唯一方法。例如，设置颜色或文本对齐方式的CSS规则的结果，以及图表等高度可视化的组件。
使用WebDriver在无人参与的测试运行过程中（通过stc）捕获屏幕快照。将这些数据与从存档服务器获得的基准进行比较，并将结果存储在存档服务器中，以供以后在Sencha Studio中查看。如果正确答案随时间变化，Sencha Studio也能够更新基线。
### 代码覆盖率
Sencha 顶部工具栏中的“覆盖”按钮使您可以在启用代码覆盖率的情况下运行测试。 此选项仅适用于浏览器方案。
Sencha Test包含Istanbul的集成版本，Istanbul是领先的JavaScript代码覆盖工具，您可以使用该工具识别测试中已覆盖和未覆盖的代码量之间的差距。 利用这种集成，Sencha Test通过百分比分析以可读格式提供了对语句，分支，函数和行级别的详细细分。
在启用代码覆盖率的情况下运行测试后，测试运行完成后将显示代码覆盖率报告。
要将文件/文件夹从代码覆盖率报告的范围中排除，请使用Sencha Studio中的“项目设置”屏幕。 例如，应该排除Ext JS SDK目录，因为您希望将代码覆盖率分析的重点放在自己的应用程序代码上。 要排除ext目录中的所有代码文件，请使用以下代码覆盖率过滤器：
^/ext/.*?$
报告示例：
![](/upload/picture/2022-09-27/upload_42084a4cd333b81021a0a108b9ee154a.png)
Sencha Test Archiver (测试存档器)
Sencha Test Archiver是由stc提供的基于Node JS的Web服务器。 存档程序（或“存档服务器”）通常安装在CI环境中的指定计算机上。 可以将单个存档服务器配置为处理任意数量的团队和项目。 或者，可以根据需要安装多个存档服务器。
测试运行器（Test Runner）
选择浏览器和需要测试的测试套件进行测试。
可用的浏览器， 本地浏览器，不同版本，不同类型
对于浏览器内方案，Sencha Test将检查其周围环境，并在测试运行器选项卡的“浏览器”视图中的“本地浏览器”标题下显示本地计算机上的浏览器。 这包括同一浏览器的多个版本。 例如，您可能有一个Beta版本和多个旧的Chrome版本。 这些都将被检测到并显示为“本地浏览器”。
对于WebDriver方案，默认情况下，Sencha Test将在“嵌入式”部分下显示Google Chrome。 这将使用Sencha Test中的嵌入式Selenium Server实例来针对Chrome启动WebDriver测试。 要针对其他浏览器运行测试
场景测试视图：以属性布局显示测试套件、Spec和expect。复选框用于勾选测试的项目。
交互式测试运行器（GUI　Test Runner）
测试运行器（Test Runner）允许开发人员或测试工程师选择特定的测试，针对多个浏览器并行执行这些测试，并实时查看结果。
命令行测试运行器（CLI Test Runner）
使用WebDriver管理需要的浏览器。 Sencha Test支持使用本地WebDriver集线器以及连接到云的提供商，例如Sauce Labs或BrowserStack。
### Sencha Test主要功能列表
Inspector：监视器，快速定位页面组件或元素，生成API测试代码。
ALM：与缺陷管理工具集成，比如JIRA
External Libraries：加载外部JS文件，扩展其他测试。
Sencha Test API：可以针对Ext JS组件和一般的HTML编码测试
Event Recorder： 基于事件自动生成测试代码
Test Runner：测试运行器可以在本地机器或是远程机器运行测试。（选择浏览器）
Archive Server：归档服务器， 保存CI运行的测试结果
STC：命令行工具，与CI集成
Browser Farm：浏览器场，可以添加远程浏览器
Visual Testing： 屏幕比较
Page Objects：网页中的定位器集中保存
### Sencha Test测试中的术语
Workspace工作区 ， 这是在Sencha框架中就有的概念， 一个工作区可以包含多个应用（Application）或包（Package）。
Test Scenario 测试场景， 这是User Scenario的对应，比如完成一次商品的购买可作为一个场景，一个测试场景可以包含测试集合（Test Suite）。
Test Suite：测试套件，是测试用例（Test Case）的集合。一个测试集合包含多个测试用例。
Spect（it）测试规格：其实也就是Test Case：测试用例。
expect 断言
其他
Sencha Test整合了一些优秀的开源测试库（包括Jasmine，WebDriver以及Istanbul），所以在使用上可以看到这些库的影子。

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

Ext JS应用测试概览

网站导航