文章目录
- 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创建),打开后的项目结构如下:
![Web应用的单元测试与自动化测试工具(Sencha Studio)_第1张图片](http://img.e-com-net.com/image/info8/dd479fbf03e7448a8bb31e74797a1faf.jpg)
- Source: 项目的源码文件, 子目录有:
- Code: 新增的类源码文件, 下一级目录有app、classic/src、modern/src
- Overides: 对框架已经存在的类文件进行覆写的源码文件,下一级目录有 overrides、classic/overrides、modern/overrides
- Tests: 测试目录, 默认是空
- Frameworks:Ext JS的框架
初始化测试项目
点击左侧的Tests节点, 右边显示如下:
![Web应用的单元测试与自动化测试工具(Sencha Studio)_第2张图片](http://img.e-com-net.com/image/info8/4cf9c61a161d4efd8decd65bf7596df7.jpg)
点击 “Initialize Test Project”按钮。点击之后, 在项目结构的“Tests”节点会多出两个节点:
添加一个对按钮显示的测试
测试步骤包括:
- 创建测试场景
选中“Tests”节点之后, 左侧项目导航上方的“New Scenario”按钮就可以点击了,点击之后的页面如下:
![Web应用的单元测试与自动化测试工具(Sencha Studio)_第3张图片](http://img.e-com-net.com/image/info8/3d595e07a8184257b7ac451167acfe73.jpg)
- 输出测试场景的名字, 这里命名是UnitTest
- Test type测试类型选择 In-browser
- 其他默认,点击Save按钮
- 创建测试套件
创建完成,会在Tests节点下多出一个UnitTest的节点,选中该节点后,上方会多出“New Test Suite”和“Clone Scenario”两个按钮。
点击New Test Suite下拉按钮,选择Jamine Test Suite。
![Web应用的单元测试与自动化测试工具(Sencha Studio)_第4张图片](http://img.e-com-net.com/image/info8/a165cfd3cc2d442fae8617315903a290.jpg)
点击后会弹出输入测试套件名字的窗口,这里使用ButtonText
![Web应用的单元测试与自动化测试工具(Sencha Studio)_第5张图片](http://img.e-com-net.com/image/info8/04f3d82ae8e44424baed882117120acd.png)
点击完成后在创建的测试场景下会多出一个测试套件命名的文件, 这里是ButtonText.js。
目录如下:
![Web应用的单元测试与自动化测试工具(Sencha Studio)_第6张图片](http://img.e-com-net.com/image/info8/2f6a76c689b24d04bf890f468ae321df.jpg)
双击在右边区块显示该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
- 选择需要运行的测试套件文件
- 点击上方三角形按钮
点击之后,会启动一个浏览器窗口,在运行页面的最右方会显示一个绿色的对勾。如下图
![Web应用的单元测试与自动化测试工具(Sencha Studio)_第7张图片](http://img.e-com-net.com/image/info8/cd578b65d09f4a0e8927fec473343538.jpg)
- 绿色对勾代表运行成功,说明运行是正确的,如果是运行不正确会出现红色的数字。如下图效果
![在这里插入图片描述](http://img.e-com-net.com/image/info8/080c258737764d7a8c800b10abf94e89.jpg)
- 新打开的浏览器窗口的地址是: http://127.0.0.1:8800/。这个新开的浏览器窗口在单元测试中看起来没什么作用,但是在端到端的测试中,可以看到自动化测试的效果,浏览器会自动运行相关的操作。
对一般在线网站的端到端的测试(以京东网的查询为例)
对于非Sencha框架的应用(比如一般的Web应用或在线网站),不能直接在Sencha中打开项目,可以新建一个测试项目后添加测试场景、测试套件以及运行测试。
创建测试项目
创建测试项目的步骤包括:
-
File > New Project,在File菜单选择New Project。
![Web应用的单元测试与自动化测试工具(Sencha Studio)_第8张图片](http://img.e-com-net.com/image/info8/d33772c6ee314cf78e464d2029a79214.jpg)
-
输入测试项目名称,测试项目保存的路径,测试项目的URL等信息(图)
![Web应用的单元测试与自动化测试工具(Sencha Studio)_第9张图片](http://img.e-com-net.com/image/info8/62079804b4af48b499ff7f36df32d391.jpg)
这里输入的项目名字是: Sencha Test Project,对以上输入项说明如下:
- 项目名称可以有空格
- 项目路径会根据项目名自动生成,使用下划线(_)替换空格,也可以指定自己的项目目录
- Location URL,项目的路径是指测试的Web应用的路径, 在这里一般设置的是根路径,该项目下的测试场景(Test Scenario)会继承这个根路径。这里的Demo项目会测试多个Web应用,所以暂不设置。
- Include Sencha Framework,是否包含Sencha的框架,选择之后选择SDK的路径。
- 点击“OK”完成创建,创建完成的项目结构如图:
![Web应用的单元测试与自动化测试工具(Sencha Studio)_第10张图片](http://img.e-com-net.com/image/info8/a88658fab0094976872f3171c398d8e8.jpg)
- Tests是测试相关的目录
- 如果对Ext JS应用进行单元测试,是可以直接导入Ext JS的应用,这样的话会包含源码文件的目录。
添加测试场景和测试套件
-
在左侧的项目导航中,选择Tests节点之后,可以发现上方的New Scenario从不可点击变为可点击状态。
如图所示:
![Web应用的单元测试与自动化测试工具(Sencha Studio)_第11张图片](http://img.e-com-net.com/image/info8/b520dfe96aec4e73b703ddbd209cc6f6.jpg)
-
创建测试场景: 点击“New Scenario”,输入测试场景的名字、输入URL地址和选择测试类型
![Web应用的单元测试与自动化测试工具(Sencha Studio)_第12张图片](http://img.e-com-net.com/image/info8/5ec50e37428645819478948657f8df32.jpg)
- 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”。如图:
![Web应用的单元测试与自动化测试工具(Sencha Studio)_第13张图片](http://img.e-com-net.com/image/info8/2f61cd07332c45e3aab5b24c28bdd133.jpg)
输入测试集的名字:
Name:Search
点击“OK”完成创建。
备注: Jasmine 是一个JavaSript单元测试框架
4. 创建完成之后, 在JD节点下就会产生一个Search.js 的文件,
![Web应用的单元测试与自动化测试工具(Sencha Studio)_第14张图片](http://img.e-com-net.com/image/info8/4dfa3ce8162d4121b43e70152439df8d.jpg)
双击该文件节点,在右边会显示该文件内容并且可以编辑,默认产生的文件内容如下:
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的开发工具查看一下京东搜索页面的文档结构。
![Web应用的单元测试与自动化测试工具(Sencha Studio)_第15张图片](http://img.e-com-net.com/image/info8/04c194c7306b45abb9d2a52cb55a3171.jpg)
在搜索页面上的常规操作是输入关键字,点击“搜索商品”按钮进行查找,通过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执行按钮。
![Web应用的单元测试与自动化测试工具(Sencha Studio)_第16张图片](http://img.e-com-net.com/image/info8/68281937960141909dbc881e9a4e3a54.jpg)
点击之后会新开一个浏览器窗口,观察这个窗口会发现:输入框会一个字一个字的输入设定的关键字,输入完成会点击搜索的按钮。
![Web应用的单元测试与自动化测试工具(Sencha Studio)_第17张图片](http://img.e-com-net.com/image/info8/ac8ca163dd2349a1a09752c29ac9265d.jpg)
稍后就会进入搜索的结果页面,如下图:
![Web应用的单元测试与自动化测试工具(Sencha Studio)_第18张图片](http://img.e-com-net.com/image/info8/c02813a22f9d40ca9c5444dee365b016.jpg)