Web应用的单元测试与自动化测试工具（Sencha Studio）
文章目录
- Sencha Studio 介绍
- Sencha Studio的功能
- 对Ext JS应用的单元测试
- 在Sencha Studio中打开Ext JS应用
- 初始化测试项目
- 添加一个对按钮显示的测试
- 对一般在线网站的端到端的测试（以京东网的查询为例）
- 创建测试项目
- 添加测试场景和测试套件
- 添加测试代码并执行自动化测试
- 网页文档内容结构分析
- 添加测试代码
- 运行测试
本篇承接自上一篇
[Ext JS]8.3 Sencha Studio安装与快速介绍之一
Sencha Studio 介绍
Sencha Studio 是Sencha提供的测试工具，也是被推荐的自动化测试工具。
- 功能很丰富，主要可以用来做单元测试和功能测试。
- 单元测试是开发人员对源代码进行测试
- 功能测试，在Sencha Studio也称作端到端测试，是测试工程师对应用的测试
- Sencha Studio 整合了两种前端测试的框架：
-Jasmine ： JavaScript 单元测试框架
-Selenium：继承测试、自动化测试的工具 - Sencha Studio可以用来测试Ext JS等基于Sencha框架的项目，也可以用于测试一般的Web项目或在线网站。
Sencha Studio的功能
Sencha Studio可以对基于Sencha应用和非基于Sencha框架的应用进行单元测试和端到到测试。
| Sencha应用 | 非Sencha应用 | |
|---|---|---|
| 单元测试 | 对Sencha框架代码层级的测试，比如Ext JS的模型或是组件的测试验证，不需要启动应用 | 使用场景不多 |
| 端到端测试 | 启动应用后对页面的测试 | 任何Web应用或是网站 |
这里演示两个实例：
- 对基于Ext JS框架的应用进行单元测试
- 对一般的网站进行端到端的测试，这里以在京东网查询一本书为例演示对一般网站的端到端测试
对Ext JS应用的单元测试
在Sencha Studio中打开Ext JS应用
在Sencha Studio打开已经存在的的Ext JS项目（项目使用Sencha Cmd创建），打开后的项目结构如下：
- Source： 项目的源码文件， 子目录有：
- Code： 新增的类源码文件， 下一级目录有app、classic/src、modern/src
- Overides： 对框架已经存在的类文件进行覆写的源码文件，下一级目录有 overrides、classic/overrides、modern/overrides
- Tests： 测试目录， 默认是空
- Frameworks：Ext JS的框架
初始化测试项目
点击左侧的Tests节点， 右边显示如下：
点击 “Initialize Test Project”按钮。点击之后， 在项目结构的“Tests”节点会多出两个节点：
- Page Objects
- lib
添加一个对按钮显示的测试
测试步骤包括：
- 创建测试场景
选中“Tests”节点之后， 左侧项目导航上方的“New Scenario”按钮就可以点击了，点击之后的页面如下：
- 输出测试场景的名字， 这里命名是UnitTest
- Test type测试类型选择 In-browser
- 其他默认，点击Save按钮
- 创建测试套件
创建完成，会在Tests节点下多出一个UnitTest的节点，选中该节点后，上方会多出“New Test Suite”和“Clone Scenario”两个按钮。
点击New Test Suite下拉按钮，选择Jamine Test Suite。
点击后会弹出输入测试套件名字的窗口，这里使用ButtonText
点击完成后在创建的测试场景下会多出一个测试套件命名的文件， 这里是ButtonText.js。
目录如下：
双击在右边区块显示该JS文件的内容， 默认产生的内容如下：
describe("ButtonText", function() {
it("should pass", function() {
expect(1).toBe(1);
});
});
- describe 定义测试套件
- it 定义测试规格（Spec），也就是测试用例。一个测试套件文件中可以由多个测试规格，这些测试规格可以单独运行。
- expect(1).toBe(1); 是期望，这里是1的值等于1。
- 使用代码创建一个按钮，对按钮的文本进行期望断言，修改后的js文件如下：
describe("ButtonText", function() {
it("should pass", function() {
var btn = Ext.create('Ext.button.Button',{
renderTo:Ext.getBody(),
text:'My Button'
});
expect(btn.getText()).toBe('My Button');
});
});
- 运行测试
双击测试场景的节点，在右边会显示运行的页面。
- 选择浏览器， 这里选择Chrome
- 选择需要运行的测试套件文件
- 点击上方三角形按钮
点击之后，会启动一个浏览器窗口，在运行页面的最右方会显示一个绿色的对勾。如下图
- 绿色对勾代表运行成功，说明运行是正确的，如果是运行不正确会出现红色的数字。如下图效果
- 新打开的浏览器窗口的地址是： http://127.0.0.1:8800/。这个新开的浏览器窗口在单元测试中看起来没什么作用，但是在端到端的测试中，可以看到自动化测试的效果，浏览器会自动运行相关的操作。
对一般在线网站的端到端的测试（以京东网的查询为例）
对于非Sencha框架的应用（比如一般的Web应用或在线网站），不能直接在Sencha中打开项目，可以新建一个测试项目后添加测试场景、测试套件以及运行测试。
创建测试项目
创建测试项目的步骤包括：
-
File > New Project，在File菜单选择New Project。
-
输入测试项目名称，测试项目保存的路径，测试项目的URL等信息（图）
这里输入的项目名字是： Sencha Test Project，对以上输入项说明如下：
- 项目名称可以有空格
- 项目路径会根据项目名自动生成，使用下划线（_）替换空格，也可以指定自己的项目目录
- Location URL，项目的路径是指测试的Web应用的路径， 在这里一般设置的是根路径，该项目下的测试场景（Test Scenario）会继承这个根路径。这里的Demo项目会测试多个Web应用，所以暂不设置。
- Include Sencha Framework，是否包含Sencha的框架，选择之后选择SDK的路径。
- 点击“OK”完成创建，创建完成的项目结构如图：
- Tests是测试相关的目录
- 如果对Ext JS应用进行单元测试，是可以直接导入Ext JS的应用，这样的话会包含源码文件的目录。
添加测试场景和测试套件
-
在左侧的项目导航中，选择Tests节点之后，可以发现上方的New Scenario从不可点击变为可点击状态。
如图所示：
-
创建测试场景： 点击“New Scenario”，输入测试场景的名字、输入URL地址和选择测试类型
- Name： JD
- Location(URL)：https://search.jd.com/ （京东的搜索页面）
- 在“Advanced”区块选择Test Type为“ In-browser”，也就是在浏览器中测试。
- 默认选项是WebDriver，WebDriver是一个自动化测试的工具。WebDriver是Selenium 2别名。Selenium 是一个很出名的自动化测试工具，WebDriver是其主要的竞争对手， 不过后来两者合并，发布了Selenium 2版本。
Selenium可以模仿人操作浏览器那样操作浏览器。
点击“Save”之后，在Tests节点下面就会多出一个 “JD”节点
- 创建测试集（Test Suite）
选中“JD”节点，在上方的工具栏多出了两个按钮“New Test Suite”和“Clone Scenario”
“New Test Suite”是一个包含下拉选项的按钮， 点击后选择“Jasmine Test Suite”。如图：
输入测试集的名字：
Name：Search
点击“OK”完成创建。
备注： Jasmine 是一个JavaSript单元测试框架
4. 创建完成之后， 在JD节点下就会产生一个Search.js 的文件，
双击该文件节点，在右边会显示该文件内容并且可以编辑，默认产生的文件内容如下：
describe("Home Search", function() {
it("should pass", function() {
expect(1).toBe(1);
});
});
以上代码解析如下：
- describe 用于定义测试集（Test Suite），一个测试集可以包含多个测试用例（Test Case）
- it 用于定义测试规格（Spec），也就对应测试用例。
- expect(1).toBe(1); 用于定义期望和断言，这里期望的是1==1。
添加测试代码并执行自动化测试
网页文档内容结构分析
首先使用Chrome的开发工具查看一下京东搜索页面的文档结构。
在搜索页面上的常规操作是输入关键字，点击“搜索商品”按钮进行查找，通过Chrome开发工具可以发现
- 关键字输入框是一个input类型的元素，其id是keyword
- “搜索商品”按钮同样也是input类型，但是没有id
在Sencha Test中，可以使用ST对象的相关方法对页面中的元素进行定位，有id的元素可以直接通过id查询，没有id的元素可以使用类似CSS的选择器进行定位。对于这里的示例：
- 关键字输入框使用
@keyword定位 - “搜索商品”按钮使用
input[type="submit"]定位
关于页面元素定位，可以参考本系列其他文章。
添加测试代码
基于以上分析， 要模拟输入关键字后点击按钮搜索的话，添加的代码如下：
describe("Search", function() {
it("should pass", function() {
ST.element('@keyword').type('Spring+Spring MVC+MyBatis整合开发实战 机械工业出版社');
ST.element('input[type="submit"]').click();
});
});
- ST.element() 是Sencha Test定位元素的方法
- type() 是在定位到的元素中自动输入
- click() 则是触发定位元素的点击事件
运行测试
双击JD节点，在右边区块选择浏览器，需要勾选Search.js 后，点击上方的Run执行按钮。
点击之后会新开一个浏览器窗口，观察这个窗口会发现：输入框会一个字一个字的输入设定的关键字，输入完成会点击搜索的按钮。
稍后就会进入搜索的结果页面，如下图：
