使用量角器进行自动化测试：详细步骤与指南

在现代Web应用开发中，自动化测试是确保软件质量的关键环节。量角器（Protractor）是一个端到端（E2E）测试框架，专为Angular和AngularJS应用设计，但也适用于非Angular应用。它通过模拟用户交互，验证应用程序的行为是否符合预期。本文将深入探讨如何使用量角器进行自动化测试，并提供详细的步骤和指导。

什么是量角器？

量角器是一个基于Node.js的自动化测试框架，构建在Selenium WebDriver之上。它允许你使用JavaScript或TypeScript编写测试脚本，并通过浏览器与Web应用程序交互。量角器的主要特点包括：

专为Angular应用设计： 量角器与Angular紧密集成，可以轻松定位Angular元素，并处理动态内容。
内置等待机制： 量角器具有隐式等待机制，可以自动等待页面元素加载，减少测试脚本的脆弱性。
强大的定位器： 量角器提供了丰富的定位器选项，可以根据ID、CSS选择器、XPath等定位页面元素。
并行测试： 量角器支持并行测试执行，可以加速测试过程。
易于集成： 量角器可以与其他测试框架（如Jasmine和Mocha）以及持续集成工具（如Jenkins和Travis CI）轻松集成。

安装量角器

在开始使用量角器之前，你需要安装以下组件：

Node.js 和 npm： 量角器基于Node.js，你需要安装Node.js和npm（Node Package Manager）。你可以从官方网站下载并安装：https://nodejs.org/
量角器： 通过npm安装量角器。打开终端或命令提示符，运行以下命令：
```
npm install -g protractor
```
Selenium WebDriver： 量角器使用Selenium WebDriver与浏览器交互。你需要安装一个WebDriver Manager，它可以自动下载和更新WebDriver驱动程序。运行以下命令安装：
```
npm install -g webdriver-manager
```
更新WebDriver： 安装WebDriver Manager后，运行以下命令更新WebDriver驱动程序：
```
webdriver-manager update
```

创建量角器测试项目

安装完必要组件后，你可以创建一个新的量角器测试项目。以下步骤将引导你创建一个基本的测试项目：

创建项目文件夹： 在你的计算机上创建一个新的文件夹，用于存放你的测试项目。例如，你可以命名为protractor-demo。
初始化npm： 进入项目文件夹，运行以下命令初始化npm：
```
npm init -y
```
安装量角器依赖： 运行以下命令安装量角器和测试框架Jasmine（或Mocha）：
```
npm install --save-dev protractor jasmine
```

创建配置文件： 在项目文件夹下创建一个名为protractor.conf.js的文件，并添加以下配置：

// protractor.conf.js
exports.config = {
  framework: 'jasmine',
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['test/*.js'],
};

创建测试文件夹： 在项目文件夹下创建一个名为test的文件夹，用于存放测试脚本。

创建测试脚本： 在test文件夹下创建一个名为example_spec.js的文件，并添加以下测试代码：

// test/example_spec.js
describe('Angularjs homepage', function() {
  it('should have a title', function() {
    browser.get('http://www.angularjs.org');
    expect(browser.getTitle()).toEqual('AngularJS');
  });
});

量角器配置详解

protractor.conf.js 文件是量角器的配置文件，它包含了测试运行所需的各种配置选项。以下是常用的配置选项：

framework： 指定使用的测试框架，可以是jasmine或mocha。
seleniumAddress： 指定Selenium WebDriver服务器的地址。通常情况下，你可以使用默认地址http://localhost:4444/wd/hub。
specs： 指定测试脚本文件的路径。可以使用通配符指定多个文件。
capabilities： 指定浏览器配置。例如：
```
capabilities: {
   'browserName': 'chrome'
 }
```

multiCapabilities： 指定多个浏览器配置，用于并行测试。例如：

multiCapabilities: [
 {
  'browserName': 'chrome'
 },
 {
  'browserName': 'firefox'
 }
 ]

onPrepare： 在测试开始前执行的函数，通常用于设置全局变量或初始化测试环境。
jasmineNodeOpts： Jasmine测试框架的配置选项。
mochaOpts： Mocha测试框架的配置选项。
baseUrl： 用于测试的应用程序的基础URL。
directConnect： 如果设置为true，量角器将直接连接到浏览器驱动程序，无需Selenium服务器。

运行量角器测试

配置完成后，你可以运行量角器测试。打开终端或命令提示符，进入项目文件夹，运行以下命令：

protractor protractor.conf.js

量角器将启动Selenium服务器和浏览器，并执行你的测试脚本。如果测试通过，你将看到类似以下的输出：

[15:47:42] I/launcher - Running 1 spec
[15:47:46] I/hosted - Using the selenium server at http://localhost:4444/wd/hub
Jasmine started

Angularjs homepage
  ✓ should have a title


1 spec, 0 failures
Finished in 3.451 seconds

[15:47:46] I/launcher - 0 instance(s) of WebDriver still running
[15:47:46] I/launcher - chrome #01 passed

量角器测试脚本详解

让我们更详细地了解一下量角器测试脚本的结构。一个典型的量角器测试脚本通常包含以下部分：

describe() 函数： 用于定义一组相关的测试用例。它接收一个字符串参数，用于描述测试用例的集合。
it() 函数： 用于定义一个独立的测试用例。它接收一个字符串参数，用于描述测试用例。
browser 对象： 量角器提供的全局对象，用于与浏览器交互。常用的方法包括：
- browser.get(url)：加载指定的URL。
- browser.getTitle()：获取当前页面的标题。
- browser.getCurrentUrl()：获取当前页面的URL。
- browser.navigate()：用于浏览器导航，例如browser.navigate().back()，browser.navigate().forward()和browser.navigate().refresh()。
- browser.sleep(ms)：暂停执行指定毫秒数。
element() 函数： 用于定位页面元素。它接收一个定位器参数。
locator 对象： 量角器提供的定位器对象，用于查找页面元素。常用的定位器包括：
- by.id(id)：根据元素的ID定位。
- by.css(cssSelector)：根据CSS选择器定位。
- by.xpath(xpath)：根据XPath定位。
- by.className(className)：根据元素的类名定位。
- by.tagName(tagName)：根据元素的标签名定位。
- by.model(modelName)：根据Angular的ngModel属性定位。
- by.binding(binding)：根据Angular的绑定表达式定位。
- by.repeater(repeater)：根据Angular的ng-repeat指令定位。
- by.buttonText(buttonText)：根据按钮文本定位。
- by.partialButtonText(partialButtonText)：根据按钮文本的部分内容定位。
element.all() 函数： 用于定位一组匹配条件的元素。它接收一个定位器参数。
expect() 函数： 用于执行断言。它接收一个值或表达式，并使用匹配器进行验证。常用的匹配器包括：
- toEqual(value)：验证值是否相等。
- toBe(value)：验证值是否相等（使用===）。
- toBeGreaterThan(value)：验证值是否大于指定值。
- toBeLessThan(value)：验证值是否小于指定值。
- toContain(value)：验证数组或字符串是否包含指定值。
- toBeTruthy()：验证值是否为真。
- toBeFalsy()：验证值是否为假。
- toBeNull()：验证值是否为null。
- toBeUndefined()：验证值是否为undefined。
- toMatch(regex)：验证字符串是否匹配指定的正则表达式。
- toThrow()：验证是否抛出异常。
- toThrowError(error)：验证是否抛出指定的异常。
element() 对象的方法：
- element.click()：点击元素。
- element.sendKeys(keys)：在元素中输入文本。
- element.getText()：获取元素的文本内容。
- element.getAttribute(attributeName)：获取元素的指定属性值。
- element.getCssValue(cssProperty)：获取元素的指定CSS属性值。
- element.isDisplayed()：判断元素是否可见。
- element.isEnabled()：判断元素是否可用。
- element.isSelected()：判断元素是否被选中。
- element.clear()：清除输入框中的内容。

量角器示例

让我们通过一些示例来演示量角器的使用：

示例 1：登录页面测试

假设你有一个登录页面，包含用户名输入框、密码输入框和一个登录按钮。以下代码演示了如何使用量角器测试登录功能：

// test/login_spec.js
describe('Login Page', function() {
  it('should login with valid credentials', function() {
    browser.get('http://your-app.com/login');

    element(by.id('username')).sendKeys('testuser');
    element(by.id('password')).sendKeys('testpassword');
    element(by.id('login-button')).click();

    expect(browser.getCurrentUrl()).toEqual('http://your-app.com/dashboard');
  });

  it('should display an error message with invalid credentials', function() {
    browser.get('http://your-app.com/login');

    element(by.id('username')).sendKeys('invaliduser');
    element(by.id('password')).sendKeys('invalidpassword');
    element(by.id('login-button')).click();

    let errorMessage = element(by.css('.error-message')).getText();
    expect(errorMessage).toContain('Invalid username or password');
  });
});

示例 2：列表页面测试

假设你有一个列表页面，其中包含多个列表项。以下代码演示了如何使用量角器测试列表页面：

// test/list_spec.js
describe('List Page', function() {
  it('should display a list of items', function() {
    browser.get('http://your-app.com/list');

    let listItems = element.all(by.css('.list-item'));
    expect(listItems.count()).toBeGreaterThan(0);
  });

  it('should display each item with a name', async function() {
   browser.get('http://your-app.com/list');
   let listItems = element.all(by.css('.list-item'));
   listItems.each(function(item) {
     let name = item.element(by.css('.item-name')).getText();
     expect(name).not.toEqual('');
    });
  });

});

示例 3：使用 Angular 定位器

如果你的应用是 Angular 应用，你可以使用量角器提供的 Angular 定位器，例如 by.model()、by.binding() 和 by.repeater()。

// test/angular_spec.js
describe('Angular App', function() {
 it('should bind data to input', function() {
  browser.get('http://your-angular-app.com');

  let inputElement = element(by.model('name'));
  inputElement.sendKeys('John Doe');

  let bindingElement = element(by.binding('name'));
  expect(bindingElement.getText()).toEqual('John Doe');
 });

 it('should iterate through repeater', function(){
   browser.get('http://your-angular-app.com/list');
   let repeater = element.all(by.repeater('item in items'));
   expect(repeater.count()).toBeGreaterThan(0);

   repeater.each(function(item){
      let itemName = item.element(by.binding('item.name')).getText();
      expect(itemName).not.toEqual('');
   });
 });
});

量角器最佳实践

为了编写高质量的量角器测试，请遵循以下最佳实践：

使用描述性的测试用例名称： 测试用例的名称应该清晰地描述所测试的功能。
避免使用硬编码的等待： 量角器的隐式等待机制可以减少对硬编码等待的需求。尽量使用 browser.wait() 或 protractor.ExpectedConditions 来等待页面元素加载或满足特定条件。
编写可维护的定位器： 尽量使用稳定的定位器，例如 by.id() 或 by.model()。避免使用过于复杂的 XPath 定位器。
将重复的代码提取为函数： 将常用的操作封装为函数，以提高代码的可重用性和可读性。
使用 Page Object 模式： 将页面元素和操作封装为 Page Object 类，以提高代码的可维护性。
进行并行测试： 使用 multiCapabilities 配置来并行执行测试，以减少测试时间。
集成到持续集成流程： 将量角器测试集成到持续集成流程中，以实现自动化测试。

高级量角器技术

除了基本的使用方法外，量角器还提供了一些高级技术，可以帮助你编写更强大的测试脚本：

浏览器窗口操作： 量角器允许你操作浏览器窗口，例如最大化窗口、最小化窗口、调整窗口大小等。

browser.driver.manage().window().maximize(); // 最大化窗口
browser.driver.manage().window().setSize(1024, 768); // 设置窗口大小

浏览器导航： 你可以使用browser.navigate() 方法进行浏览器导航，例如后退、前进、刷新。

browser.navigate().back(); // 后退
browser.navigate().forward(); // 前进
browser.navigate().refresh(); // 刷新

浏览器 alert 处理： 量角器可以处理浏览器 alert 对话框。

let alert = browser.switchTo().alert(); // 获取alert对话框
expect(alert.getText()).toEqual('Are you sure?'); // 获取alert文本
alert.accept(); // 点击确认按钮
alert.dismiss(); // 点击取消按钮

上传文件： 量角器可以通过 sendKeys() 方法上传文件。

let fileInput = element(by.css('input[type="file"]'));
fileInput.sendKeys('/path/to/your/file.txt');

执行 JavaScript 代码： 量角器可以通过 browser.executeScript() 方法执行 JavaScript 代码。

browser.executeScript('return document.title;').then(function(title) {
 expect(title).toEqual('Your Page Title');
});

使用自定义定位器： 你可以创建自定义定位器，以满足特定的定位需求。

by.addLocator('customLocator', function(value, using) {
 let usingEl = using || document;
 let elements = usingEl.querySelectorAll('[data-custom="' + value + '"]');
 return elements;
 });
 
 let customElement = element(by.customLocator('custom-value'));

总结

量角器是一个强大的自动化测试框架，可以帮助你轻松地测试你的Web应用程序。通过本文的详细步骤和指导，你应该能够开始使用量角器进行自动化测试，并编写出高质量的测试脚本。请记住，编写好的测试需要不断的实践和总结，希望本文能帮助你快速入门量角器，并为你的软件质量保驾护航。

How to Do

Get clear, simple answers to all your questions. We resolve your doubts.

使用量角器进行自动化测试：详细步骤与指南

使用量角器进行自动化测试：详细步骤与指南

什么是量角器？

安装量角器

创建量角器测试项目

量角器配置详解

运行量角器测试

量角器测试脚本详解

量角器示例

示例 1：登录页面测试

示例 2：列表页面测试

示例 3：使用 Angular 定位器

量角器最佳实践

高级量角器技术

总结