【技术】基于angularJS的前端自动化测试工具Protractor快速入门

1.官网

http://www.protractortest.org/#/

2.简介

Protractor是一个为Angular和AngularJS应用程序而生的端对端的测试框架，Protractor就像用户一样在真实的浏览器中去交互并运行你的测试程序。

（1）就像一个用户一样测试：

Protractor是基于WebDriverJS的，WebDriverJs就像一个用户一样能使用原生事件和特定的浏览器驱动去跟你的应用交互。

（2）为了测试Angular应用

Protractor支持Angular特定的定位器策略，允许你测试Angular的专门的元素而不需要在你的测试部分进行任何安装。

（3）自动等待

你不需要为你的测试添加等待和休眠，一旦网页完成了待定任务Protractor就能自动执行下一步测试，所以你不必担心去等待你的测试和网页同步。

3安装

准备环境：nodeJs和jdk

Protractor 5 is compatible withnodejs v6 and newer.

Protractor works with AngularJS versions greater than1.0.6/1.1.4

文档：https://github.com/angular/protractor#compatibility

查看protractor的版本命令：protractor --version

查看node.js的版本命令：node --version

查看是否装java的命令:java -version(注意只有一个“-”)

通过nodeJS的npm来全局安装protractor:

npm install -g protractor

这句命令会安装两个命令行工具，protractor和webdriver-manager，安装完后可以尝试运行protractor --version这条命令确保protractor是否安装成功。webdriver-manager是一个辅助工具，能很轻松地获得Selenium 服务器运行实例。

通过这句命令下载必要的二进制文件：

webdriver-manager update

通过这句命令开启服务器：

webdriver-manager start

输完这句命令将会启动Selenium服务器，并且会输出一串信息日志，这个命令行窗口不要关闭，专门给来启服务器的，重新运行其他命令要重新打开一个命令行窗口，因为关闭之后服务器也会跟着关闭，也可以通过按ctrl+c关闭服务器。你的Protractor会发送请求给你本地的浏览器。你可以通过输入http://localhost:4444/wd/hub查看服务器的信息和状态。

4.写一个测试案例

打开命令行工具或者终端窗口，并且创建一个测试的文件。

Protractor需要两个文件去执行，一个spec文件和一个配置文件。

让我们用一个简单的例子开始，在AngularJS官网去导航todo list，并新增一一个的todo项在列表中。

新增todo-spec.js文件，并复制下面的代码保存:

describe('angularjs homepage todo list', function() {it('should add a todo', function() {browser.get('https://angularjs.org');element(by.model('todoList.todoText')).sendKeys('write first protractor test');element(by.css('[value="add"]')).click();var todoList = element.all(by.repeater('todo in todoList.todos'));expect(todoList.count()).toEqual(3);expect(todoList.get(2).getText()).toEqual('write first protractor test');// You wrote your first test, cross it off the listtodoList.get(2).element(by.css('input')).click();var completedAmount = element.all(by.css('.done-true'));expect(completedAmount.count()).toEqual(2);});
});

describe和it语法是来自Jasmine框架，browser是通过Protractor全局创建的，用于浏览器级别的命令，例如用browser.get来导航某一网页。

5.配置

新建一个conf.js配置文件，并将下面代码复制到conf.js中：

exports.config = {seleniumAddress: 'http://localhost:4444/wd/hub',specs: ['todo-spec.js']
};

这个配置会告诉Protractor你的测试文件(specs)在哪里，哪儿去跟你的Selenium服务器(seleniumAddress)交流，它会使用所有其他的默认配置，谷歌浏览器是默认浏览器。

6.运行测试

新打开一个命令行程序现在通过这句命令运行测试：

protractor conf.js

你应该会看到谷歌浏览器被打开了，而且在AngularJS页面中导航到了todo列表，接下来关闭了它自己（这应该运行得非常快!）。

这个测试应该输出:1 test，3 assertions,0 failures.恭喜，你已经运行了你第一个Protractor测试！

7.学习更多

通过教程学习更多:

http://www.protractortest.org/#/tutorial

【技术】基于angularJS的前端自动化测试工具Protractor快速入门相关推荐

移动端自动化测试工具 Appium 快速入门
文章目录一.前言二.Appium 概述 1.架构图 2.UI 自动化收益三.环境安装 1.桌面版本安装 2.DOS命令安装 3.安装SDK 四.常用操作方法五.常见定位方式 1.ID 定位 2 ...
gulp前端自动化工具的快速入门案例
最近项目和工作中要开始使用自动化工具了,回想一下以前接触这个的时候就是什么nodejs,grunt之类的了,这次干脆就用一个新的,那么就是gulp... 全局下利用npm安装gulp sudo npm ...
前端自动化测试工具：SlimerJS、phantomJS 和 CasperJS
对于富客户端的 Web 应用页面,自动登录.页面修改.抓取页面内容.屏幕截图.页面功能测试-面对这些需求,使用后端语言需要花费不少的精力才能实现.此时 SlimerJS.phantomJS 或 Cas ...
ppt制作工具python-pptx 快速入门
ppt制作工具python-pptx 快速入门转载:https://www.jianshu.com/p/23734d34d788 hello #!/usr/bin/env python3 # -*- ...
常用的前端自动化测试工具介绍 —— Karma
在开发的过程中,除了代码本身,测试也是重要的一环.大体来说,测试分为以下几种类型: 单元测试功能测试性能测试安全测试对于普通开发者而言,单元测试和功能测试是最常见的两种测试方式,本系列文章要介 ...
Squish — 基于Qt的HMI自动化测试工具
目录自动化测试方案设置Squish 记录测试属性验证视觉验证总结本文翻译自Squish - Test automation tool for our HMI build with Qt 原 ...
前端构建工具-fis3使用入门
FIS3 是面向前端的工程构建工具.解决前端工程中性能优化.资源加载(异步.同步.按需.预加载.依赖管理.合并.内嵌).模块化开发.自动化工具.开发规范.代码部署等问题. 官网地址是: https:/ ...
开源性能测试工具JMeter快速入门（一）
目录一.JMeter简介二.JMeter功能介绍三.JMeter脚本四.关于JMeter小提示一.JMeter简介 1.定义 JMeter是Apache组织开发的基于Java的压力测试工具. ...
基于SpringBoot的SSM整合案例 -- SpringBoot快速入门保姆级教程（四）
文章目录前言 1.设计创建数据库表tbl_book 2.创建新的SpringBoot模块,勾选相关依赖 3. 添加SpringBoot创建项目时没有提供的相关坐标 4.根据数据库表创建实体类Book ...

【技术】基于angularJS的前端自动化测试工具Protractor快速入门

【技术】基于angularJS的前端自动化测试工具Protractor快速入门相关推荐

最新文章

热门文章