Protractor - Protractor 與 Selenium Server

上一頁
下一頁

如前所述，Protractor 是一個開源的端到端測試框架，用於 Angular 和 AngularJS 應用程式。它是一個 Node.js 程式。另一方面，Selenium 是一個瀏覽器自動化框架，包括 Selenium Server、WebDriver API 和 WebDriver 瀏覽器驅動程式。

Protractor 與 Selenium

如果我們談論 Protractor 和 Selenium 的結合，Protractor 可以與 Selenium server 協同工作，以提供自動化測試基礎設施。該基礎設施可以模擬使用者與在瀏覽器或移動裝置上執行的 Angular 應用程式的互動。Protractor 和 Selenium 的結合可以分為三個部分：測試、伺服器和瀏覽器，如下圖所示：

Protractor with Selenium

Selenium WebDriver 程序

正如我們在上圖中看到的，使用 Selenium WebDriver 進行測試涉及以下三個程序：

  • 測試指令碼
  • 伺服器
  • 瀏覽器

在本節中，讓我們討論這三個程序之間的通訊。

測試指令碼與伺服器之間的通訊

前兩個程序（測試指令碼和伺服器）之間的通訊取決於 Selenium Server 的工作方式。換句話說，Selenium server 的執行方式將決定測試指令碼和伺服器之間通訊過程的形式。

Selenium server 可以作為獨立的 Selenium Server (selenium-server-standalone.jar) 在我們的機器上本地執行，也可以透過服務（Sauce Labs）遠端執行。對於獨立的 Selenium server，Node.js 和 Selenium server 之間將進行 HTTP 通訊。

伺服器和瀏覽器之間的通訊

眾所周知，伺服器負責在解釋測試指令碼中的命令後將其轉發到瀏覽器。這就是為什麼伺服器和瀏覽器也需要一種通訊媒介，在這裡，通訊是藉助於 **JSON WebDriver Wire Protocol** 完成的。瀏覽器透過瀏覽器驅動程式擴充套件來解釋命令。

可以透過下圖瞭解關於 Selenium WebDriver 程序及其通訊的上述概念：

Web Driver processes

在使用 Protractor 時，第一個程序，即測試指令碼使用 Node.js 執行，但在對瀏覽器執行任何操作之前，它將傳送一個額外的命令以確保被測試的應用程式穩定。

設定 Selenium Server

Selenium Server 充當測試指令碼和瀏覽器驅動程式之間的代理伺服器。它基本上將命令從我們的測試指令碼轉發到 WebDriver，並將 WebDriver 的響應返回到我們的測試指令碼。設定 Selenium server 有以下幾種選項，這些選項包含在測試指令碼的 **conf.js** 檔案中：

獨立 Selenium Server

如果我們想在本地機器上執行伺服器，我們需要安裝獨立的 Selenium server。安裝獨立 Selenium server 的前提是 JDK（Java Development Kit）。我們的本地機器上必須安裝 JDK。我們可以透過從命令列執行以下命令來檢查它：

java -version

現在，我們可以選擇手動安裝和啟動 Selenium Server，也可以從測試指令碼啟動。

手動安裝和啟動 Selenium server

要手動安裝和啟動 Selenium server，我們需要使用 Protractor 附帶的 WebDriver-Manager 命令列工具。安裝和啟動 Selenium server 的步驟如下：

**步驟 1** - 第一步是安裝 Selenium server 和 ChromeDriver。這可以透過執行以下命令來完成：

webdriver-manager update

**步驟 2** - 接下來，我們需要啟動伺服器。這可以透過執行以下命令來完成：

webdriver-manager start

**步驟 3** - 最後，我們需要在配置檔案中將 seleniumAddress 設定為正在執行的伺服器的地址。預設地址為 **https://:4444/wd/hub**。

從測試指令碼啟動 Selenium server

要從測試指令碼啟動 Selenium server，我們需要在配置檔案中設定以下選項：

  • **jar 檔案位置** - 我們需要透過設定 seleniumServerJar 來在配置檔案中設定獨立 Selenium server 的 jar 檔案位置。

  • **指定埠** - 我們還需要指定用於啟動獨立 Selenium Server 的埠。這可以透過在配置檔案中設定 seleniumPort 來指定。預設埠為 4444。

  • **命令列選項陣列** - 我們還需要設定要傳遞給伺服器的命令列選項陣列。這可以透過在配置檔案中設定 seleniumArgs 來指定。如果您需要完整的命令陣列列表，請使用 **-help** 標誌啟動伺服器。

使用遠端 Selenium Server

執行測試的另一個選項是遠端使用 Selenium server。遠端使用伺服器的前提條件是，我們必須擁有託管伺服器的服務的帳戶。在使用 Protractor 時，我們對託管伺服器的以下服務具有內建支援：

TestObject

要使用 TestObject 作為遠端 Selenium Server，我們需要設定 testobjectUser（我們的 TestObject 帳戶的使用者名稱）和 testobjectKey（我們的 TestObject 帳戶的 API 金鑰）。

BrowserStack

要使用 BrowserStack 作為遠端 Selenium Server，我們需要設定 browserstackUser（我們的 BrowserStack 帳戶的使用者名稱）和 browserstackKey（我們的 BrowserStack 帳戶的 API 金鑰）。

Sauce Labs

要使用 Sauce Labs 作為遠端 Selenium Server，我們需要設定 sauceUser（我們的 Sauce Labs 帳戶的使用者名稱）和 SauceKey（我們的 Sauce Labs 帳戶的 API 金鑰）。

Kobiton

要使用 Kobiton 作為遠端 Selenium Server，我們需要設定 kobitonUser（我們的 Kobiton 帳戶的使用者名稱）和 kobitonKey（我們的 Kobiton 帳戶的 API 金鑰）。

直接連線到瀏覽器驅動程式而無需使用 Selenium Server

執行測試的另一個選項是直接連線到瀏覽器驅動程式，而無需使用 Selenium server。Protractor 可以透過在配置檔案中設定 directConnect: true 來直接進行測試，而無需使用 Selenium Server，針對 Chrome 和 Firefox。

設定瀏覽器

在配置和設定瀏覽器之前，我們需要知道 Protractor 支援哪些瀏覽器。以下是 Protractor 支援的瀏覽器列表：

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

為了設定和配置瀏覽器，我們需要轉到 Protractor 的配置檔案，因為瀏覽器設定是在配置檔案的 capabilities 物件中完成的。

設定 Chrome

要設定 Chrome 瀏覽器，我們需要如下設定 capabilities 物件：

capabilities: {
   'browserName': 'chrome'
}

我們還可以新增 Chrome 特定的選項，這些選項巢狀在 chromeOptions 中，其完整列表可在 https://sites.google.com/a/chromium.org/chromedriver/capabilities 檢視。

例如，如果您想在右上角新增 FPS 計數器，則可以在配置檔案中如下操作：

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

設定 Firefox

要設定 Firefox 瀏覽器，我們需要如下設定 capabilities 物件：

capabilities: {
   'browserName': 'firefox'
}

我們還可以新增 Firefox 特定的選項，這些選項巢狀在 moz:firefoxOptions 物件中，其完整列表可在 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 是另一個 JavaScript 測試框架，基本上執行在 Node.js 上。要使用 Mocha 作為我們的測試框架，我們需要使用 BDD（行為驅動開發）介面和 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。mocha 的選項，例如 'reporter' 和 'slow'，可以如下新增到配置檔案中：

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

Cucumber 框架

為了使用 Cucumber 作為我們的測試框架，我們需要使用 framework 選項 **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: 'https://: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();
   }
};
列印頁面
上一頁
下一頁
廣告
© . All rights reserved.