Angular Protractor UI 测试WEB的API 介绍

最近项目组在用protroctor进行Web前端的自动化测试，因为之前没有接触过这块，所以一边学习一边总结。

本文介绍了使用Protractor对AngularJS开发的web应用进行自动化功能测试的API

Protractor是AngularJS团队发布的一款开源的端到端web测试运行工具。它可以模拟用户的实际交互，帮助验证Angular应用的实际运行状况。Protractor使用Jasmine测试框架来定义测试用例。Protractor为不同的页面交互提供一套健壮的API。相对于其他的端到端的工具，Protractor有着自己的优势，它知道怎么和AngularJS的代码一起运行。

1.首先必须安装执行环境nodejs

2.安装浏览器，推荐chrome

3.安装protractor+webdriver   

    npm install protractor -g
    webdriver-manager update

    安装完成后执行protractor --version，检查安装是否正常

    在命令行控制台启动Selenium测试服务器。
    webdriver-manager start
    //默认情况下，Selenium测试服务器接入地址为：http://localhost:4444/wd/hub

4.输出测试报告需要安装相关插件
      //输出html报告
      npm install protractor-jasmine2-html-reporter -g
      //输出junit格式的xml报告
      npm install jasmine-reporters -g
      //由于需要在config文件中加载。一般把这两个插件放在根目录的node_modules 目录下

 

浏览器常用的相关操作API：

browser.get(url)   //访问url指定的web页面

browser.close()   //关闭当前窗口

browser.sleep(ms)   //等待，单位毫秒

browser.pause()  //暂停执行，停止在当前页面，主要用于调试

browser.get(url) 访问url指定的web页面

browser.manage().deleteAllCookies() 删除所有cookie

browser.manage().addCookie(key,value) 添加cookie

element.all(locator) 查找locator描述的所有元素

element(locator) 查找locator描述的单个元素

 

如何定位元素，protractor中常用的定位元素的API：

by.id('myElement') //id为myElement的元素

by.css('[class="element"]') //根据元素的属性定位元素，此例为样式class为element的元素。同时也支持jquery的selector语法来定位元素，例如（by.css('.element')）。

by.binding('list.title') //绑定了ng-bind="list.title"的元素

by.repeater('modules.content') //绑定了ng-repeat="module in modules.content"的元素

by.model('person.name') //绑定了ng-model="person.nam"的元素

by.className('className') //绑定了class 属性为 ‘className’ 的元素

by.buttonText('Search') //绑定了按钮文字为 ‘Search’ 的按钮

by.tagName('div') //绑定了标签为div的元素

element.all(by.css('.css')) === $$('.css')

by.xpath('//div/li/a') // 先找到div->li->a 元素

关于xpath的更多知识，可以访问：http://www.w3school.com.cn/xpath/xpath_syntax.asp

或者protractor：http://www.protractortest.org/#/api?view=webdriver.By.xpath

 

定位的元素如何操作

Protractor中使用element(locator) //定位单个元素

和element.all(locator) //定位所有符合条件的元素。

 

定位到元素后能做哪些操作？常用操作举例如下：

element.all(by.binding('list.title')).count() //返回查找到的元素的个数

element.all(by.css('.element')).get(1) //返回定查找到的元素中的第二个元素

element(by.css('.myname')).getText() //返回查找到的元素的text

element(by.id('user_name').sendKeys('user1') //向查找到的元素输入'user1'

element(by.id('user_desc').sendKeys(protractor.Key.ENTER); //向查找到的元素输入回车键

element(by.id('user_desc').sendKeys(protractor.Key.TAB); //向查找到的元素输入TAB键

element(by.id('user_name')).clear(); //清空查找到的元素的内容

element(by.id('submit')).clear(); //点击查找到的元素

element(by.id('Search')).clikc(); //点击事件