Protractor - Protractor和 Selenium 服务器


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

SeleniumProtractor

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

SeleniumProtractor

Selenium WebDriver 进程

正如我们在上图中看到的,使用 Selenium WebDriver 的测试涉及以下三个过程 -

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

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

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

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

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

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

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

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

Web 驱动程序进程

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

设置 Selenium 服务器

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

独立的 Selenium 服务器

如果我们想在本地计算机上运行服务器,我们需要安装独立的 selenium 服务器。安装独立selenium服务器的先决条件是JDK(Java Development Kit)。我们必须在本地计算机上安装 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 作为远程 Selenium 服务器,我们需要设置 testobjectUser(我们的 TestObject 帐户的用户名)和 testobjectKey(我们的 TestObject 帐户的 API 密钥)。

浏览器堆栈

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

酱料实验室

为了使用 Sauce Labs 作为远程 Selenium 服务器,我们需要设置 SauceUser(我们的 Sauce Labs 帐户的用户名)和 SauceKey(我们的 Sauce Labs 帐户的 API 密钥)。

科比顿

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

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

运行测试的另一种选择是直接连接到浏览器驱动程序,而不使用 Selenium 服务器。通过在配置文件中设置 directConnect: true ,Protractor 可以直接针对 Chrome 和 Firefox 进行测试,无需使用 Selenium Server。

设置浏览器

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

  • Chrome驱动程序
  • Firefox驱动程序
  • Safari驱动程序
  • IE驱动程序
  • Appium-iOS/Safari
  • Appium-Android/Chrome
  • 塞兰德机器人
  • PhantomJS

为了设置和配置浏览器,我们需要移动到 Protractor 的配置文件,因为浏览器设置是在配置文件的功能对象内完成的。

设置 Chrome

为了设置 Chrome 浏览器,我们需要设置功能对象,如下所示

capabilities: {
   'browserName': 'chrome'
}

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

例如,如果您想在右上角添加 FPS-counter,则可以在配置文件中按如下方式完成 -

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

设置火狐浏览器

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

capabilities: {
   'browserName': 'firefox'
}

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

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

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

设置其他浏览器

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

设置 PhantonJS

实际上,PhantomJS 由于崩溃问题而不再受支持。相反,建议使用无头 Chrome 或无头 Firefox。它们可以设置如下 -

为了设置 headless Chrome,我们需要使用 –headless 标志启动 Chrome,如下所示 -

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

为了设置 headless Firefox,我们需要使用–headless标志启动 Firefox,如下所示 -

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

设置多个浏览器进行测试

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

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

哪个框架?

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

接下来,我们看看如何安装各种框架 -

茉莉花框架

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

摩卡框架

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

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。摩卡的“reporter”和“slow”等选项可以添加到配置文件中,如下所示 -

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

Cucumber框架

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

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

正如你所看到的,在安装 Cucumber 时使用了 -g 选项,这是因为我们已经全局安装了 Protractor,即使用 -g 选项。接下来,我们需要将框架属性设置为配置文件的自定义,方法是将框架:'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();
   }
};