安装protractor进行前端自动化测试-web ui自动化测试

安装protractor进行前端自动化测试

介绍


protractor 是个 Node.js 程序。所以首先得安装 Node.js。然后就可以使用npm 安装 protractor 了。
通常 protractor 使用 Jasmine 测试框架作为他的测试接口。
下面的教程的测试将使用一个独立的 Selenium Server 来控制浏览器。需要安装 JDK 来运行这个服务器。可以用 java -version 命令来测试是否安装成功 JDK。

安装


全局安装protractor

npm install -g protractor
这个命令会安装两个命令行工具,protractor 和 webdriver-manager。尝试跑 protractor --version 确认安装成功。webdriver-manager 是一个辅助工具,他可以简单的让Selenium Server 的实例跑起来 用这个命令可以让他来下载必要的 binaries:

webdriver-manager update

现在可以打开一个服务器


webdriver-manager start

这个命令会开启一个Selenium Server ,然后输出一串的 log 信息。你的 Protractor 测试将会把请求发到服务器来控制本地的浏览器。在整个教程中,请让服务器在后面撒欢的跑。你可以到这里看服务器的状态信息 http://localhost:4444/wd/hub 。

step 0 - 写一测试


新开个命令行或终端窗口,并选个干净整洁的文件夹来做测试目录。

Protractor 运行需要两个文件,一个是 spec file(要测试的js脚本) ,一个是 configuration file(配置文件)。

我们先从一个简单的测试开始,内容是引导一个Angular app 例子和检验他的title。我们将会用到这里的 Super Calculator application —— http://juliemr.github.io/protractor-demo/

将下面的代码 copy 到 spec.js 中:

// spec.js
describe('angularjs homepage', function() {
  it('should have a title', function() {
    browser.get('http://juliemr.github.io/protractor-demo/');


    expect(browser.getTitle()).toEqual('Super Calculator');
  });
});
这里 describe 和 it 语法来自 Jasmine 框架。browser 由 Protractor 全局创建的,他可以用来执行浏览器级别的命令,例如用 browser 导航。


现在来创建配置文件,将下面的代码 copy 到 conf.js:


// conf.js
exports.config = {
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['spec.js']
}
这个配置文件通知 Protractor 你的测试文件(specs)的位置,还有Selenium Server 的对话地址(seleniumAddress)。其他配置项使用默认的,Chrome是默认浏览器。


现在运行测试(在命令行输入下面的命令,目录定位到conf.js相同的目录)

protractor conf.js


OK! 我们会看到 Chrome 打开一个指向 Calculator 的窗口,然后又闪关了。测试结果输出应为 1 tests, 1 assertion, 0 failures。真是可喜可贺,我们第一个 Protractor 测试已经成功了 (^o^)/~

step 1 - 元素交互

现在来修改下测试文件,让他与页面上的文件进行交互吧!变 ~ 身 ~


// spec.js
describe('angularjs homepage', function() {
  it('should add one and two', function() {
    browser.get('http://juliemr.github.io/protractor-demo/');
    element(by.model('first')).sendKeys(1);
    element(by.model('second')).sendKeys(2);

    element(by.id('gobutton')).click();

    expect(element(by.binding('latest')).getText()).
        toEqual('5'); // This is wrong!
  });
});
这里也使用了两个 Protractor 创建的全局 elemenet 和 by。element 函数用来寻找页面 HTML 元素,他会返回一个 ElementFinder 对象,这个对象可与元素交互或者获取他们的信息(狗仔队~~)。在这个测试中,我们使用 sendKeys 来给 输入值,click 来点击按钮,getText 来返回元素的内容。

element 需要一个定位仪参数。by 元素创建了定位仪,我们使用三个类型的定位仪。

by.model('first') 来查找元素 ng-model="first"。
by.id('gobutton') 来根据给定的id查找。
by.binding('latest') 来发现绑定了latest变量的元素,即 { {latest} }
关于定位仪 (by) 和元素查找器 (element) 的更多信息

运行测试

protractor conf.js
1 + 2 == 5肯定会 failed 啦~(≧▽≦)/~啦啦啦

step 2 - 多个测试

稍微美化点,将两个测试结合起来,提出重复的部分

// spec.js
describe('angularjs homepage', function() {
  var firstNumber = element(by.model('first'));
  var secondNumber = element(by.model('second'));
  var goButton = element(by.id('gobutton'));
  var latestResult = element(by.binding('latest'));

  beforeEach(function() {
    browser.get('http://juliemr.github.io/protractor-demo/');
  });

  it('should have a title', function() {
    expect(browser.getTitle()).toEqual('Super Calculator');
  });

  it('should add one and two', function() {
    firstNumber.sendKeys(1);
    secondNumber.sendKeys(2);

    goButton.click();

    expect(latestResult.getText()).toEqual('3');
  });

  it('should add four and six', function() {
    // Fill this in.
    expect(latestResult.getText()).toEqual('10');
  });
});
这里,我们将导航拉到一个 beforeEach 函数里,他会运行在每个 it 块前(即每个it运行前都会运行他)。

step 3 - 改变配置

// conf.js
exports.config = {
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['spec.js'],
  capabilities: {
    browserName: 'firefox'
  }
}
尝试重新运行测试。我们可以看到 Firefox 代替 chrome 跑了出来。capabilities 对象描述了测试使用的浏览器。所有可用的选项,看这里 the reference config file

还可以一次在多个浏览器中跑测试,像这样

// conf.js
exports.config = {
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['spec.js'],
  multiCapabilities: [{
    browserName: 'firefox'
  }, {
    browserName: 'chrome'
  }]
}
大家可以试试看效果。Chrome 和 Firefox 会同步进行测试,命令行中的结果是独立显示的。

我的 Firefox 没有安装在默认 C 盘的路径上,所以有报错 Cannot find firefox binary in PATH. Make sure firefox is installed. ,把 firefox.exe 的路径加在了系统变量 PATH ,也没有解决。

这个问题修改的参考文章,万万没想到,我最后还是重装了Firefox。不知道以后还能不能愉快地自定义安装地址了呢╮(╯▽╰)╭

step 4 - 元素列表


重新回到测试文件,有时会遇到多个元素的列表需要处理的问题。可以用 element.all 处理,这个方法会返回一个 ElementArrayFinder。在我们的这个 Calculator app 中,每个操作都记录在一个历史的表格中,使用的是 Angular 的 ng-repeater。下面让我们来测试这些操作是否记录在表格中。

// spec.js
describe('angularjs homepage', function() {
  var firstNumber = element(by.model('first'));
  var secondNumber = element(by.model('second'));
  var goButton = element(by.id('gobutton'));
  var latestResult = element(by.binding('latest'));
  var history = element.all(by.repeater('result in memory'));

  function add(a, b) {
    firstNumber.sendKeys(a);
    secondNumber.sendKeys(b);
    goButton.click();
  }

  beforeEach(function() {
    browser.get('http://juliemr.github.io/protractor-demo/');
  });

  it('should have a history', function() {
    add(1, 2);
    add(3, 4);

    expect(history.count()).toEqual(2);

    add(5, 6);

    expect(history.count()).toEqual(0); // This is wrong!
  });
});
这里我们做了两件事:

首先,我们创建了一个辅助函数add,并且增加了变量 history。
我们用了 element.all 结合 by.repeater 定位仪来获得一个 ElementArrayFinder。在 spec 文件中,我们用了count函数计算了历史记录的应有 length 。
ElementArrayFinder 处理 add 外还有许多方法。用 last 来获得一个匹配定位仪获得元素集中的最后一个元素。

it('should have a history', function() {
    add(1, 2);
    add(3, 4);

    expect(history.last().getText()).toContain('1 + 2');
    expect(history.first().getText()).toContain('foo'); // This is wrong!
  });
因为 Calculator 展示了最老的结果在底部,我们用 toContain Jasmine 匹配来假设元素的文字包含有“1+2”。

ElementArrayFinder 还有 each、map、 filter 和 reduce 这些方法和 JS 的数组方法很相似。
更多 API 细节看这里

http://angular.github.io/protractor/#/api?view=ElementArrayFinder

api

=============API ===============
Home
Quick Start 
Protractor Setup 
Protractor Tests 
Reference 
Tutorial
This is a simple tutorial that shows you how to set up Protractor and start running tests.

Prerequisites
Protractor is a Node.js program. To run, you will need to have Node.js installed. You will download Protractor package using npm, which comes with Node.js. Check the version of Node.js you have by running node --version. It should be greater than v0.10.0.

By default, Protractor uses the Jasmine test framework for its testing interface. This tutorial assumes some familiarity with Jasmine, and we will use version 2.3.

This tutorial will set up a test using a local standalone Selenium Server to control browsers. You will need to have the Java Development Kit (JDK) installed to run the standalone Selenium Server. Check this by running java -version from the command line.

Setup

Use npm to install Protractor globally with:

npm install -g protractor

This will install two command line tools, protractor and webdriver-manager. Try running protractor --version to make sure it's working.

The webdriver-manager is a helper tool to easily get an instance of a Selenium Server running. Use it to download the necessary binaries with:

webdriver-manager update
Now start up a server with:

webdriver-manager start
This will start up a Selenium Server and will output a bunch of info logs. Your Protractor test will send requests to this server to control a local browser. Leave this server running throughout the tutorial. You can see information about the status of the server at http://localhost:4444/wd/hub.

Step 0 - write a test
Open a new command line or terminal window and create a clean folder for testing.

Protractor needs two files to run, a spec file and a configuration file.

Let's start with a simple test that navigates to an example AngularJS application and checks its title. We’ll use the Super Calculator application at http://juliemr.github.io/protractor-demo/.

Copy the following into spec.js:

// spec.js
describe('Protractor Demo App', function() {
  it('should have a title', function() {
    browser.get('http://juliemr.github.io/protractor-demo/');


    expect(browser.getTitle()).toEqual('Super Calculator');
  });
});
The describe and it syntax is from the Jasmine framework. browser is a global created by Protractor, which is used for browser-level commands such as navigation with browser.get.

Now create the configuration file. Copy the following into conf.js:

// conf.js
exports.config = {
  framework: 'jasmine2',
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['spec.js']
}
This configuration tells Protractor where your test files (specs) are, and where to talk to your Selenium Server (seleniumAddress). It specifies that we will be using Jasmine version 2 for the test framework. It will use the defaults for all other configuration. Chrome is the default browser.

Now run the test with

protractor conf.js
You should see a Chrome browser window open up and navigate to the Calculator, then close itself (this should be very fast!). The test output should be 1 tests, 1 assertion, 0 failures. Congratulations, you've run your first Protractor test!

Step 1 - interacting with elements
Now let's modify the test to interact with elements on the page. Change spec.js to the following:

// spec.js
describe('Protractor Demo App', function() {
  it('should add one and two', function() {
    browser.get('http://juliemr.github.io/protractor-demo/');
    element(by.model('first')).sendKeys(1);
    element(by.model('second')).sendKeys(2);

    element(by.id('gobutton')).click();

    expect(element(by.binding('latest')).getText()).
        toEqual('5'); // This is wrong!
  });
});
This uses the globals element and by, which are also created by Protractor. The element function is used for finding HTML elements on your webpage. It returns an ElementFinder object, which can be used to interact with the element or get information from it. In this test, we use sendKeys to type into s, click to click a button, and getText to return the content of an element.

element takes one parameter, a Locator, which describes how to find the element. The by object creates Locators. Here, we're using three types of Locators:

by.model('first') to find the element with ng-model="first". If you inspect the Calculator page source, you will see this is .
by.id('gobutton') to find the element with the given id. This finds

你可能感兴趣的:(Tools,ionic)