Web应用的单元测试与自动化测试工具（Sencha Studio）

本篇承接自上一篇
[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

添加一个对按钮显示的测试

测试步骤包括：

1. 创建测试场景
   选中“Tests”节点之后， 左侧项目导航上方的“New Scenario”按钮就可以点击了，点击之后的页面如下：
   

• 输出测试场景的名字， 这里命名是UnitTest
• Test type测试类型选择 In-browser
• 其他默认，点击Save按钮

2. 创建测试套件
   创建完成，会在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。

3. 使用代码创建一个按钮，对按钮的文本进行期望断言，修改后的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');
    });
});

4. 运行测试
   双击测试场景的节点，在右边会显示运行的页面。

• 选择浏览器， 这里选择Chrome
• 选择需要运行的测试套件文件
• 点击上方三角形按钮

点击之后，会启动一个浏览器窗口，在运行页面的最右方会显示一个绿色的对勾。如下图

• 绿色对勾代表运行成功，说明运行是正确的，如果是运行不正确会出现红色的数字。如下图效果

• 新打开的浏览器窗口的地址是： http://127.0.0.1:8800/。这个新开的浏览器窗口在单元测试中看起来没什么作用，但是在端到端的测试中，可以看到自动化测试的效果，浏览器会自动运行相关的操作。

对一般在线网站的端到端的测试（以京东网的查询为例）

对于非Sencha框架的应用（比如一般的Web应用或在线网站），不能直接在Sencha中打开项目，可以新建一个测试项目后添加测试场景、测试套件以及运行测试。

创建测试项目

创建测试项目的步骤包括：

1. File > New Project，在File菜单选择New Project。
   

2. 输入测试项目名称，测试项目保存的路径，测试项目的URL等信息（图）
   
   这里输入的项目名字是： Sencha Test Project，对以上输入项说明如下：

• 项目名称可以有空格
• 项目路径会根据项目名自动生成，使用下划线（_）替换空格，也可以指定自己的项目目录
• Location URL，项目的路径是指测试的Web应用的路径， 在这里一般设置的是根路径，该项目下的测试场景（Test Scenario）会继承这个根路径。这里的Demo项目会测试多个Web应用，所以暂不设置。
• Include Sencha Framework，是否包含Sencha的框架，选择之后选择SDK的路径。

3. 点击“OK”完成创建，创建完成的项目结构如图：
   

• Tests是测试相关的目录
• 如果对Ext JS应用进行单元测试，是可以直接导入Ext JS的应用，这样的话会包含源码文件的目录。

添加测试场景和测试套件

1. 在左侧的项目导航中，选择Tests节点之后，可以发现上方的New Scenario从不可点击变为可点击状态。
   如图所示：
   

2. 创建测试场景： 点击“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”节点

3. 创建测试集（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执行按钮。

点击之后会新开一个浏览器窗口，观察这个窗口会发现：输入框会一个字一个字的输入设定的关键字，输入完成会点击搜索的按钮。

稍后就会进入搜索的结果页面，如下图：