JavaScript实现UI自动化心得

相关知识

• Node JS环境、Protractor工具、Jasmine框架、JavaScript语言

简介

• Protractor是作为Angular JS应用程序的测试工具，简单的理解就是驱动脚本来实现客户端到服务器端测试的一种工具，也就是我们常听到的一个词，e2e(end to end),也就是端到端的测试，其中Angular JS是一款优秀的前端开发框架，当时的开发团队就额外设计出Protractor这样一个小工具便于测试基于Angular JS开发的产品，它的构建基于Selenium WebDriver之上，所以使用起来你会发现很多方法和不同语言下的webdriver操作类似，至少形式上看上去很像，而且是围绕着Selenium WebDriver进行封装的，因此，Protractor中包含的每一个feature对于Selenium WebDriver都是可用的。但是需要注意一点，假如我设计的自动化代码并不是基于Angular JS开发的，那么就会有个疑问，是不是还可以钟情于这款框架呢，答案是肯定的，我们只需要在js代码中加入这样一行“browser.ignoreSynchronization = true”，就可以跳过Angular JS产品的验证了。当然，既然人家最初设计目的是为了测试基于Angular JS的产品，它会提供了独享的一些方法，例如waitforangular()

• 我们还会接触到另外一个词“Jasmine”,其实它是Protractor内部支持的三种行为驱动开发中的一种，具体有Jasmine/Mocha/Cucumber，也就是我们理解上的自动化测试框架的三种，我听过前两种，第三种没用过，而且要注意一点protractor默认使用的就是Jasmine，自动化测试框架主要是提供语法、提供流程管理模块、和报告工具，主要也就是这三点，这些框架都是基于JavaScript和Nodejs的，Nodejs就是支持javascript的运行环境。

准备过程

• 接下来简单看下怎么搭建一个基于Protractor测试框架的测试环境，用来写我们的自动化测试代码。

• 第一步毫无疑问，安装Node.js，安装Node.js并不难，可以直接到 https://nodejs.org/en/ 网站上下载相应的安装包，这里选择的是windows的安装包，有的网络会下载比较慢，虽然只有12M左右（亲身经历，还会经常中断。。。）。

• 其中npm package manager是我们安装Node.js最为重要的目的，当然，Add to PATH是帮助我们省去了配置变量的环节，也是很重要的，安装步骤不多赘述，如果图方便的话，闭上眼睛一路Next下去就好。

• 安装完成后，打开命令窗口，使用命令 “npm —version” 查看Node.js是否安装成功。

• 由于这里需要使用pratractor，所以需要使用命令 “npm install —global protractor” 或者 “npm install -g protractor” 全局安装protractor，为什么是全局安装而不是本地安装，因为我们这里只需要使用CLI(Command Line Interface) 而不需要用require将protractor包含进去，如果需要后者，则需要再在本地安装一次，当然，如果不放心，也完全可以将全局和本地都安装一次，以后如果需要用，就可以直接用了，这里作为例子来看，只需要全局安装即可。

• 这时候，可以试着启用webdriver, 注意，如果这里是先做了webdriver-manager update操作，而直接输入 webdriver-manager start则会不成功，它会提示 java 不能识别，它既不是内部也不是外部命令。而紧接着才安装JDK的话，在相同的command window中也同样会持续这个提示，此时只需要重新开一个新的command window即可。

• 这时候可以发现，webdriver 启动了，接下来我们试着开始写case来看下是不是可以运行了。

脚本过程

• 我们一定要编写的文件只有两个，一个是configure.js，当然文件名是随意编写的，也可以叫做config.js，用做什么呢，目的有两个，一个是指定4444端口作为selenium调用服务的配置，另一个是作为执行测试用例的入口文件，也就是可以在这个文件内指定运行哪些测试用例。

• 代码如下：

(function () {

       exports.config = {

           seleniumAddres : 'http://localhost:4444/wd/hub',

           specs: 'testcase.js'

       }

   }

)()

• 另一个文件也就是我们的测试用例文件，名字叫做testcase.js，当然名字也是可以用别的，代码如下（代码是可以直接运行的哦），里面有一条自动化测试用例，用于测试光宇游戏社区点击登录按钮之后，输入用户名和密码后，会出现复杂验证码弹层，也就是我们的期望值。

(function (){
    var requires = require('./testdata.js')
    describe('XXX_Community', function () {
        var url = requires.urls.AngularJSURL
        beforeEach(function() {
            browser.ignoreSynchronization = true
            browser.manage().window().maximize();
            browser.get(url)
        });
        it('Account_Login_WithPassword_001', function () {
            element(by.xpath('//*[@id="js_pubtoplogin_div"]/div[1]/a')).click()
            element(by.id('Account')).sendKeys('xieshuyu')
            element(by.id('Password')).sendKeys('xieshuyu')
            var EC = protractor.ExpectedConditions;
            browser.wait(EC.presenceOf(element(by.id('sigin'))), 5000);
            element(by.id('sigin')).click()
            expect(element(by.xpath('/html/body/div[8]')).isPresent()).toBeTruthy()
            }
        )
    })
})()

说明部分

• 如果有一定代码经验的同学，其实看这段代码和我们之前的自动化用例代码差别并不是很大，变化的就是形式和语言。

• 1、describe就是我们通常讲的自动化测试用例集，it就是自动化测试用例，两个的实质就是js方法，it当中包含了测试用例的内容，包含了操作步骤和断言；

• 2、如果要停止运行某一个case，只需用xit()代替it()，同理在describe前加’x’也可以停止整个describe封装的运行；

• 3、引号中的description用来描述case行为，便于在查看报告时理解case行为；

• 4、expect()用于判断结果，一个case中可以有多个expect()，只有当所有的expect()都通过的时候，这个case才可以通过，否则会提示失败，常见匹配器如下：
  expect(x).toEqual(y); 当x和y相等时候通过
  expect(x).toBe(y); 当x和y是同一个对象时候通过
  expect(x).toMatch(pattern); x匹配pattern（字符串或正则表达式）时通过
  expect(x).toBeDefined(); x不是undefined时通过
  expect(x).toBeUndefined(); x 是 undefined时通过
  expect(x).toBeNull(); x是null时通过
  expect(x).toBeTruthy(); x和true等价时候通过
  expect(x).toBeFalsy(); x和false等价时候通过
  expect(x).toContain(y);x（数组或字符串）包含y时通过
  expect(x).toBeLessThan(y); x小于y时通过
  expect(x).toBeGreaterThan(y); x大于y时通过
  expect(function(){fn();}).toThrow(e); 函数fn抛出异常时候通过

• 5、关于element元素的定位，常用方法如下（暂时用到这么多）：

• element(by.xpath(‘//*[@id=”js_pubtoplogin_div”]/div[1]/a’))

• element(by.id(‘xieshuyu’))

• element(by.name(‘xieshuyu’))

• element(by.className(‘xieshuyu’))

• element(by.model(‘xieshuyu’)) //根据ng-model名来查找元素，Angular JS专用（还记得上文提到的吗，呵呵呵）

• element(by.binding(‘xieshuyu’)) //查找绑定了指定名的元素，Angular JS专用

• element(by.repeater(‘xieshuyu’)) //查找指定repeater中的元素，Angular JS专用

执行方式

• 看到这，是不是有点小兴奋了呢，哈哈哈！其实执行方式很简单，前提是环境已经配置正确了，在文件路径下切换到对应的cmd窗口，然后输入“protractor config.js —config spec —disableChecks”，记得加上—disableChecks，会避免一些不必要的检查。

  然后你就可以谷歌浏览器被打开了，然后执行我们测试用例的文件，至少从视觉效果上来看，执行速度高于利用java来写的自动化代码，速度很快，但是有一个缺点，至少我理解上是这样的，我们都知道javascript是一种前端流行语言，是不支持后台操作的，就连数据库连接和执行sql语句也是不支持的，所以我们自动化流程中可能用到的数据库操作是没办法利用它实现的，但这里会有一个问题值得讨论，我们的UI端的自动化是否需要或者有必要连接后台来模拟一些用例的前提条件，以后再写另外的一篇博客来讨论吧，在这一句两句也说不清楚。

  如果有同学看到这里，会不会有个疑问，也就是有没有发现我们的代码是没有任何语句来指定谷歌浏览器驱动的地方，那怎么在输入“protractor config.js —config spec —disableChecks”之后就自动打开chrome进行自动化测试了呢。其实答案就是特别简单，因为人家protractor支持的默认浏览器就是chrome，还有一点，我想到也就是nodejs环境本身就是一个基于Chrome V8引擎的。

后续

• 文中提到的代码只是一个简单的自动化测试用例demo，用于说明利用NodeJS环境+Protractor工具+Jasmine框架+JavaScript语言是可以做到UI的自动化，而且效果还不错的，之后会陆续更新的。如果有什么说的不准确的地方，欢迎留言!

——————————————————————————————————————————————

给大家推荐一个学习资料分享群（574253227），里面大牛已经为我们整理好了许多的学习资料，有自动化，接口，性能等等的学习资料！