Protractor - 編寫第一個測試

在本章中，讓我們瞭解如何在 Protractor 中編寫第一個測試。

Protractor所需的檔案

Protractor 需要以下兩個檔案才能執行：

規範或測試檔案

它是執行 Protractor 的重要檔案之一。在這個檔案中，我們將編寫我們的實際測試程式碼。測試程式碼是使用我們的測試框架的語法編寫的。

例如，如果我們使用 **Jasmine** 框架，則測試程式碼將使用 **Jasmine** 的語法編寫。此檔案將包含測試的所有功能流程和斷言。

簡單來說，我們可以說該檔案包含與應用程式互動的邏輯和定位器。

示例

以下是簡單的指令碼 TestSpecification.js，其中包含導航到 URL 並檢查頁面標題的測試用例：

//TestSpecification.js
describe('Protractor Demo', function() {
   it('to check the page title', function() {
      browser.ignoreSynchronization = true;
      browser.get('https://tutorialspoint.tw/tutorialslibrary.htm');
      browser.driver.getTitle().then(function(pageTitle) {
         expect(pageTitle).toEqual('Free Online Tutorials and Courses');
      });
   });
});

程式碼解釋

上面規範檔案的程式碼可以解釋如下：

瀏覽器

它是 Protractor 建立的全域性變數，用於處理所有瀏覽器級別的命令。它基本上是 WebDriver 例項的包裝器。browser.get() 是一個簡單的 Selenium 方法，它將告訴 Protractor 載入特定頁面。

**describe** 和 **it** - 兩者都是 Jasmine 測試框架的語法。**'Describe'** 用於包含測試用例的端到端流程，而 **'it'** 包含一些測試場景。我們可以在測試用例程式中有多個 **'it'** 塊。
**Expect** - 這是一個斷言，我們將在其中將網頁標題與一些預定義資料進行比較。
**ignoreSynchronization** - 它是瀏覽器的標籤，當我們嘗試測試非 Angular 網站時使用。Protractor 期望僅與 Angular 網站一起使用，但如果我們想與非 Angular 網站一起使用，則必須將此標籤設定為 **“true”**。

配置檔案

顧名思義，此檔案提供了所有 Protractor 配置選項的說明。它基本上告訴 Protractor 以下內容：

在哪裡查詢測試或規範檔案
選擇哪個瀏覽器
使用哪個測試框架
在哪裡與 Selenium 伺服器通訊

示例

以下是簡單的指令碼 config.js，其中包含測試

// config.js
exports.config = {
   directConnect: true,

   // Capabilities to be passed to the webdriver instance.
   capabilities: {
      'browserName': 'chrome'
   },

   // Framework to use. Jasmine is recommended.
   framework: 'jasmine',

   // Spec patterns are relative to the current working directory when
   // protractor is called.
   specs: ['TestSpecification.js'],

程式碼解釋

上面配置檔案包含三個基本引數的程式碼可以解釋如下：

功能引數

此引數用於指定瀏覽器的名稱。它可以在 conf.js 檔案的以下程式碼塊中看到：

exports.config = {
   directConnect: true,

   // Capabilities to be passed to the webdriver instance.
   capabilities: {
      'browserName': 'chrome'
},

如上所示，此處給出的瀏覽器名稱為“chrome”，它是 Protractor 的預設瀏覽器。我們也可以更改瀏覽器名稱。

框架引數

此引數用於指定測試框架的名稱。它可以在 config.js 檔案的以下程式碼塊中看到：

exports.config = {
   directConnect: true,

   // Framework to use. Jasmine is recommended.
   framework: 'jasmine',

這裡我們使用的是 'jasmine' 測試框架。

原始檔宣告引數

此引數用於指定原始檔宣告的名稱。它可以在 conf.js 檔案的以下程式碼塊中看到：

exports.config = {
   directConnect: true,
   // Spec patterns are relative to the current working 
   directory when protractor is called.
   specs: ['TsetSpecification.js'],

如上所示，此處給出的原始檔宣告名稱為 **'TestSpecification.js'**。這是因為，對於此示例，我們建立了名稱為 **TestSpecification.js** 的規範檔案。

執行程式碼

由於我們已經對執行 Protractor 所需的檔案及其編碼有了基本的瞭解，讓我們嘗試執行該示例。我們可以按照以下步驟執行此示例：

**步驟 1** - 首先，開啟命令提示符。
**步驟 2** - 接下來，我們需要轉到我們儲存檔案（即 config.js 和 **TestSpecification.js**）的目錄。
**步驟 3** - 現在，透過執行命令 Protractor config.js 來執行 config.js 檔案。

下面顯示的螢幕截圖將解釋執行示例的上述步驟：

在螢幕截圖中可以看到測試已透過。

現在，假設如果我們正在測試非 Angular 網站並且沒有將 ignoreSynchronization 標籤設定為 true，那麼在執行程式碼後我們將收到錯誤“Angular could not be found on the page”。

它可以在以下螢幕截圖中看到：

報告生成

到目前為止，我們已經討論了執行測試用例所需的檔案及其編碼。Protractor 也能夠為測試用例生成報告。為此，它支援 Jasmine。JunitXMLReporter 可用於自動生成測試執行報告。

但在那之前，我們需要使用以下命令安裝 Jasmine 報告程式：

npm install -g jasmine-reporters

如您所見，在安裝 Jasmine Reporters 時使用了 -g 選項，這是因為我們已全域性安裝了 Protractor，並使用 -g 選項。

成功安裝 jasmine-reporters 後，我們需要將以下程式碼新增到我們之前使用的 config.js 檔案中：

onPrepare: function(){ //configure junit xml report

   var jasmineReporters = require('jasmine-reporters');
   jasmine.getEnv().addReporter(new jasmineReporters.JUnitXmlReporter({
      consolidateAll: true,
      filePrefix: 'guitest-xmloutput',
      savePath: 'test/reports'
   }));

現在，我們新的 config.js 檔案將如下所示：

// An example configuration file.
exports.config = {
   directConnect: true,

   // Capabilities to be passed to the webdriver instance.
   capabilities: {
      'browserName': 'chrome'
   },

   // Framework to use. Jasmine is recommended.
   framework: 'jasmine',

   // Spec patterns are relative to the current working directory when
   // protractor is called.
   specs: ['TestSpecification.js'],
   //framework: "jasmine2", //must set it if you use JUnitXmlReporter

   onPrepare: function(){ //configure junit xml report

      var jasmineReporters = require('jasmine-reporters');
      jasmine.getEnv().addReporter(new jasmineReporters.JUnitXmlReporter({
         consolidateAll: true,
         filePrefix: 'guitest-xmloutput',
         savePath: 'reports'
      }));
   },
};

以與我們之前執行相同的方式執行上述配置檔案後，它將在根目錄下的 **reports** 資料夾中生成一個包含報告的 XML 檔案。如果測試成功，則報告將如下所示：

但是，如果測試失敗，則報告將如下所示：

列印頁面