Protractor - Protractor 和 Selenium Server

如前所述，Protractor 是一个开源的端到端测试框架，适用于 Angular 和 AngularJS 应用程序。它是 Node.js 程序。另一方面，Selenium 是一个浏览器自动化框架，包括 Selenium Server、WebDriver API 和 WebDriver 浏览器驱动程序。

Protractor 与 Selenium

如果我们谈论 Protractor 和 Selenium 的结合，Protractor 可以与 Selenium 服务器配合使用，提供自动化测试基础设施。该基础设施可以模拟用户与在浏览器或移动设备上运行的 Angular 应用程序的交互。 Protractor 与 Selenium 的结合可分为三个部分，即测试、服务器和浏览器，如下图所示 −

Selenium WebDriver 进程

如上图所示，使用 Selenium WebDriver 进行测试涉及以下三个进程 −

• 测试脚本
• 服务器
• 浏览器

在本节中，我们来讨论这三个进程之间的通信。

测试脚本与测试结果之间的通信服务器

前两个进程(测试脚本和服务器)之间的通信取决于 Selenium 服务器的工作。换句话说，我们可以说 Selenium 服务器的运行方式将决定测试脚本和服务器之间的通信过程。

Selenium 服务器可以作为独立 Selenium 服务器(selenium-server-standalone.jar)在我们的机器上本地运行，也可以通过服务(Sauce Labs)远程运行。在独立 Selenium 服务器的情况下，Node.js 和 Selenium 服务器之间将存在 http 通信。

服务器和浏览器之间的通信

众所周知，服务器负责在解释测试脚本中的命令后将命令转发到浏览器。这就是为什么服务器和浏览器也需要通信媒介的原因，这里的通信是在 JSON WebDriver Wire Protocol 的帮助下完成的。浏览器扩展了浏览器驱动程序，用于解释命令。

上述有关 Selenium WebDriver 进程及其通信的概念可以借助下图理解 −

在使用 Protractor 时，第一个进程，即测试脚本，使用 Node.js 运行，但在浏览器上执行任何操作之前，它会发送一个额外的命令，以确保被测试的应用程序是稳定的。

设置 Selenium 服务器

Selenium 服务器充当测试脚本和浏览器驱动程序之间的代理服务器。它基本上将测试脚本中的命令转发到 WebDriver，并将 WebDriver 的响应返回到测试脚本。设置 Selenium 服务器有以下选项，这些选项包含在测试脚本的 conf.js 文件中 −

独立 Selenium 服务器

如果我们想在本地机器上运行服务器，我们需要安装独立 Selenium 服务器。安装独立 Selenium 服务器的先决条件是 JDK(Java 开发工具包)。我们必须在本地机器上安装 JDK。我们可以通过从命令行运行以下命令来检查它 −

java -version

现在，我们可以选择手动或从测试脚本安装和启动 Selenium Server。

手动安装和启动 Selenium 服务器

要手动安装和启动 Selenium 服务器，我们需要使用 Protractor 附带的 WebDriver-Manager 命令行工具。安装和启动 Selenium 服务器的步骤如下 −

步骤 1 − 第一步是安装 Selenium 服务器和 ChromeDriver。可以通过运行以下命令来完成 −

webdriver-manager update

步骤 2 − 接下来，我们需要启动服务器。可以通过运行以下命令来完成 −

webdriver-manager start

步骤 3 − 最后，我们需要将配置文件中的 seleniumAddress 设置为正在运行的服务器的地址。默认地址为 http://localhost:4444/wd/hub。

从测试脚本启动 Selenium 服务器

要从测试脚本启动 Selenium 服务器，我们需要在配置文件中设置以下选项 −

• jar 文件的位置 −我们需要在配置文件中通过设置 seleniumServerJar 来设置独立 Selenium 服务器的 jar 文件位置。

• 指定端口 − 我们还需要指定用于启动独立 Selenium 服务器的端口。可以通过在配置文件中设置 seleniumPort 来指定。默认端口为 4444。

• 命令行选项数组 − 我们还需要设置要传递给服务器的命令行选项数组。可以通过在配置文件中设置 seleniumArgs 来指定。如果您需要命令数组的完整列表，请使用 -help 标志启动服务器。

使用远程 Selenium 服务器

运行测试的另一种选择是远程使用 Selenium 服务器。远程使用服务器的先决条件是我们必须拥有托管服务器的服务帐户。在使用 Protractor 时，我们内置了对以下托管服务器的服务的支持 −

TestObject

要将 TestObject 用作​​远程 Selenium 服务器，我们需要设置 testobjectUser(我们的 TestObject 帐户的用户名)和 testobjectKey(我们的 TestObject 帐户的 API 密钥)。

BrowserStack

要将 BrowserStack 用作远程 Selenium 服务器，我们需要设置 browserstackUser(我们的 BrowserStack 帐户的用户名)和 browserstackKey(我们的 BrowserStack 帐户的 API 密钥)。

Sauce Labs

要将 Sauce Labs 用作远程 Selenium 服务器，我们需要设置 sauceUser(我们的 Sauce Labs 帐户的用户名)和 SauceKey(我们的 Sauce Labs 帐户的 API 密钥)。

Kobiton

对于使用 Kobiton 作为远程 Selenium 服务器，我们需要设置 kobitonUser(我们的 Kobiton 帐户的用户名)和 kobitonKey(我们的 Kobiton 帐户的 API 密钥)。

不使用 Selenium 服务器直接连接到浏览器驱动程序

运行测试的另一个选项是不使用 Selenium 服务器直接连接到浏览器驱动程序。Protractor 可以在不使用 Selenium 服务器的情况下通过在配置文件中设置 directConnect: true 来直接针对 Chrome 和 Firefox 进行测试。

设置浏览器

在配置和设置浏览器之前，我们需要知道 Protractor 支持哪些浏览器。以下是 Protractor 支持的浏览器列表 −

• ChromeDriver
• FirefoxDriver
• SafariDriver
• IEDriver
• Appium-iOS/Safari
• Appium-Android/Chrome
• Selendroid
• PhantomJS

要设置和配置浏览器，我们需要转到 Protractor 的配置文件，因为浏览器设置在配置文件的功能对象中完成。

设置 Chrome

要设置 Chrome 浏览器，我们需要按如下方式设置功能对象

capabilities: {
   'browserName': 'chrome'
}

我们还可以添加嵌套在 chromeOptions 中的 Chrome 特定选项，其完整列表可在 https://sites.google.com/a/chromium.org/chromedriver/capabilities 中查看。

例如，如果您想在右上角添加 FPS 计数器，则可以在配置文件中按如下方式完成 −

capabilities: {
   'browserName': 'chrome',
   'chromeOptions': {
      'args': ['show-fps-counter=true']
   }
},

设置 Firefox

为了设置 Firefox 浏览器，我们需要设置功能对象，如下所示 −

capabilities: {
   'browserName': 'firefox'
}

我们还可以添加嵌套在 moz:firefoxOptions 对象中的 Firefox 特定选项，其完整列表可在 https://github.com/mozilla/geckodriver#firefox-capabilities 中查看。

例如，如果您想在安全模式下在 Firefox 上运行测试，则可以在配置文件中按如下方式完成 −

capabilities: {
   'browserName': 'firefox',
   'moz:firefoxOptions': {
     'args': ['—safe-mode']
   }
},

设置其他浏览器

要设置 Chrome 或 Firefox 以外的任何其他浏览器，我们需要从 https://docs.seleniumhq.org/download/ 安装单独的二进制文件。

设置 PhantonJS

实际上，由于 PhantomJS 存在崩溃问题，因此不再受支持。建议使用无头 Chrome 或无头 Firefox。它们可以按如下方式设置 −

要设置无头 Chrome，我们需要使用 –headless 标志启动 Chrome，如下所示−

capabilities: {
   'browserName': 'chrome',
   'chromeOptions': {
      'args': ["--headless", "--disable-gpu", "--window-size=800,600"]
   }
},

为了设置无头 Firefox，我们需要使用 –headless 标志启动 Firefox，如下所示 −

capabilities: {
   'browserName': 'firefox',
   'moz:firefoxOptions': {
      'args': ["--headless"]
   }
},

设置多个浏览器进行测试

我们还可以针对多个浏览器进行测试。为此，我们需要使用 multiCapabilities 配置选项，如下所示 −

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

哪个框架?

Protractor 支持两个 BDD(行为驱动开发)测试框架 Jasmine 和 Mocha。这两个框架都基于 JavaScript 和 Node.js。这些框架提供了编写和管理测试所需的语法、报告和脚手架。

接下来，我们看看如何安装各种框架 −

Jasmine 框架

它是 Protractor 的默认测试框架。安装 Protractor 时，您将获得 Jasmine 2.x 版本。我们不需要单独安装它。

Mocha 框架

Mocha 是另一个基本上在 Node.js 上运行的 JavaScript 测试框架。要使用 Mocha 作为我们的测试框架，我们需要使用 BDD(行为驱动开发)接口和 Chai As Promised 中的 Chai 断言。可以使用以下命令完成安装−

npm install -g mocha
npm install chai
npm install chai-as-promised

如您所见，安装 mocha 时使用了 -g 选项，这是因为我们已经使用 -g 选项全局安装了 Protractor。安装后，我们需要在测试文件中引入并设置 Chai。可以按如下方式完成 −

var chai = require('chai');
var chaiAsPromised = require('chai-as-promised');
chai.use(chaiAsPromised);
var expect = chai.expect;

之后，我们可以按原样使用 Chai As Promised −

expect(myElement.getText()).to.eventually.equal('some text');

现在，我们需要通过添加 framework: 'mocha' 将配置文件的 framework 属性设置为 mocha。可以将 mocha 的"reporter"和"slow"等选项添加到配置文件中，如下所示 −

mochaOpts: {
reporter: "spec", slow: 3000
}

Cucumber 框架

要使用 Cucumber 作为我们的测试框架，我们需要使用框架选项 custom 将其与 Protractor 集成。可以使用以下命令完成安装

npm install -g cucumber
npm install --save-dev protractor-cucumber-framework

如您所见，安装 Cucumber 时使用了 -g 选项，这是因为我们已经全局安装了 Protractor，即使用了 -g 选项。接下来，我们需要将配置文件的 framework 属性设置为 custom，方法是将 framework: 'custom' 和 frameworkPath: 'Protractor-cucumber-framework' 添加到名为 cucumberConf.js 的配置文件中。

下面显示的示例代码是一个基本的 cucumberConf.js 文件，可用于使用 Protractor 运行 cucumber 功能文件 −

exports.config = {
   seleniumAddress: 'http://localhost:4444/wd/hub',

   baseUrl: 'https://angularjs.org/',

   capabilities: {
      browserName:'Firefox'
   },

   framework: 'custom',

   frameworkPath: require.resolve('protractor-cucumber-framework'),

   specs: [
      './cucumber/*.feature'
   ],

   // cucumber command line options
   cucumberOpts: {
      require: ['./cucumber/*.js'],
      tags: [],
      strict: true,
      format: ["pretty"],
      'dry-run': false,
      compiler: []
   },
   onPrepare: function () {
      browser.manage().window().maximize();
   }
};