Protractor 核心 APIs

Protractor 是一个由 Google 开源的端到端测试框架，主要用于 AngularJS 应用的 E2E（端到端）测试。 Protractor API 为测试人员提供了开发和执行测试的方法和工具，包括访问浏览器，处理异步函数，模拟用户输入，编写测试脚本等等。

安装

使用 npm 进行全局安装：

$ npm install -g protractor

安装后，可以通过以下命令检查 Protractor 是否正确安装：

$ protractor --version

配置

在执行测试之前，需要配置 Protractor。Protractor 配置文件包含了测试用例、测试浏览器、测试框架、测试报告等等的信息。

示例配置文件

exports.config = {
  // 测试用例配置
  specs: ['./test/**/*.spec.js'],
  // 测试浏览器
  capabilities: {
    browserName: 'chrome'
  },
  // 测试框架
  framework: 'jasmine',
  // Jasmine 相关配置
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000
  },
  // 测试报告
  onPrepare: function () {
    var JasmineConsoleReporter = require('jasmine-console-reporter');
    jasmine.getEnv().addReporter(
      new JasmineConsoleReporter({
        colors: true,
        cleanStack: true,
        verbosity: 4,
        listStyle: 'flat',
        activity: false,
      })
    );
  },
  // 其他配置
  seleniumAddress: 'http://localhost:4444/wd/hub',
  baseUrl: 'http://example.com',
  allScriptsTimeout: 30000,
  getPageTimeout: 30000
};

配置说明

• specs：测试用例路径，支持 glob（例如：./test/**/*.spec.js）。
• capabilities：测试浏览器及其相关配置。更多详情可查看浏览器支持文档。
• framework：测试框架，支持 Jasmine 和 Mocha。
• jasmineNodeOpts：Jasmine 相关配置，例如是否显示颜色、超时时间等。
• onPrepare：在测试前的准备工作，例如引入测试报告插件等。
• seleniumAddress：Selenium 服务地址。
• baseUrl：测试站点的 URL。
• allScriptsTimeout：测试执行的最长时间。
• getPageTimeout：获取网页的最长时间。

核心 API

以下是 Protractor 的一些核心 API，它们是编写测试用例时比较常用的方法和工具。

browser.get(url)

打开指定 URL 的网页。

browser.get('https://www.example.com');

browser.getTitle()

获取当前网页的标题。

browser.getTitle().then(function (title) {
  console.log(title);
});

browser.wait(condition, timeout, message)

等待某个条件的成立。

var EC = protractor.ExpectedConditions;

// 等待某个元素可见
browser.wait(EC.visibilityOf(element(by.id('my-element'))), 5000);

// 等待某个元素不可见
browser.wait(EC.invisibilityOf(element(by.id('my-element'))), 5000);

// 等待某个元素是否存在
browser.wait(EC.presenceOf(element(by.id('my-element'))), 5000);

// 等待某个元素是否是可点击的
browser.wait(EC.elementToBeClickable(element(by.id('my-element'))), 5000);

// 等待某个元素是否被选中
browser.wait(EC.elementToBeSelected(element(by.id('my-element'))), 5000);

element(selector)

通过 CSS 选择器或其他方式选中页面中的元素。

// 通过 ID 选中元素
element(by.id('my-id'));

// 通过 class 选中元素
element(by.className('my-class'));

// 通过标签名选中元素
element(by.tagName('button'));

// 通过 name 属性选中元素
element(by.name('my-name'));

// 通过 CSS 选择器选中元素
element(by.css('#my-div > .my-class > button'));

// 通过模型名选中元素
element(by.model('myModel'));

element.all(selector)

选中页面中符合条件的所有元素。

// 选中所有的按钮元素
element.all(by.tagName('button'));

element.sendKeys(value)

向选中的元素发送键盘输入事件。

element(by.id('my-input')).sendKeys('Hello, world!');

element.click()

模拟点击操作。

element(by.id('my-button')).click();

element.getText()

获取元素的文本内容。

element(by.id('my-element')).getText().then(function (text) {
  console.log(text);
});

element.getAttribute(name)

获取元素指定属性的值。

element(by.id('my-input')).getAttribute('value').then(function (value) {
  console.log(value);
});

element.isSelected()

判断元素是否被选中。

element(by.id('my-checkbox')).isSelected().then(function (isSelected) {
  console.log(isSelected);
});

element.isEnabled()

判断元素是否可用。

element(by.id('my-button')).isEnabled().then(function (isEnabled) {
  console.log(isEnabled);
});

element.isDisplayed()

判断元素是否可见。

element(by.id('my-element')).isDisplayed().then(function (isDisplayed) {
  console.log(isDisplayed);
});

element.getLocation()

获取元素在页面上的坐标位置。

element(by.id('my-element')).getLocation().then(function (location) {
  console.log(location.x, location.y);
});

结语

以上仅是 Protractor API 的部分内容，更多详情可以查看文档。掌握这些 API 能够帮助测试人员更加高效地编写测试用例和开展测试工作。