Protractor - 除錯

現在我們已經瞭解了前面章節中 Protractor 的所有概念，讓我們在本章中詳細瞭解除錯概念。

簡介

端到端 (e2e) 測試很難除錯，因為它們依賴於應用程式的整個生態系統。我們已經看到它們依賴於各種操作，或者更準確地說，依賴於之前的操作，例如登入，有時還依賴於許可權。除錯 e2e 測試的另一個困難在於它依賴於 WebDriver，因為 WebDriver 在不同的作業系統和瀏覽器上的行為不同。最後，除錯 e2e 測試還會生成冗長的錯誤訊息，難以區分瀏覽器相關問題和測試過程錯誤。

故障型別

測試套件的失敗可能有多種原因，以下是幾種常見的故障型別：

WebDriver 故障

當命令無法完成時，WebDriver 會丟擲一個錯誤。例如，瀏覽器無法獲取定義的地址，或者找不到預期的元素。

WebDriver 意外故障

當 WebDriver 管理器更新失敗時，會發生意外的瀏覽器和作業系統相關的故障。

Protractor Angular 故障

當 Protractor 未能如預期那樣在庫中找到 Angular 時，就會發生 Protractor Angular 故障。

Protractor Angular2 故障

在這種故障中，當配置中找不到 useAllAngular2AppRoots 引數時，Protractor 會失敗。發生這種情況是因為，如果沒有此引數，測試過程會在期望多個元素的情況下檢視單個根元素。

Protractor 超時故障

當測試規範遇到迴圈或長時間池並未能及時返回資料時，就會發生此類故障。

期望失敗

最常見的測試失敗之一，展示了正常的期望失敗是什麼樣子的。

為什麼在 Protractor 中除錯很重要？

假設您編寫了測試用例並且它們失敗了，那麼瞭解如何除錯這些測試用例非常重要，因為很難找到發生錯誤的確切位置。在使用 Protractor 時，您會在命令列中看到一些紅色的長錯誤訊息。

暫停和除錯測試

以下是 Protractor 中除錯的方法：

暫停方法

在 Protractor 中使用暫停方法除錯測試用例是最簡單的方法之一。我們可以在想要暫停測試程式碼的位置鍵入以下命令：

browser.pause();

當執行的程式碼遇到上述命令時，它將在該點暫停執行程式。之後，我們可以根據自己的偏好輸入以下命令：

鍵入 C 以向前移動

每當一個命令執行完畢，我們都必須鍵入 C 以向前移動。如果您不鍵入 C，測試將不會執行完整程式碼，並且由於 Jasmine 超時錯誤而失敗。

鍵入 repl 以進入互動模式

互動模式的好處是我們可以向瀏覽器傳送 WebDriver 命令。如果要進入互動模式，請鍵入repl。

鍵入 Ctrl-C 以退出並繼續測試

要從暫停狀態退出測試並從停止處繼續測試，我們需要鍵入 Ctrl-C。

示例

在此示例中，我們有一個名為example_debug.js的規範檔案，Protractor 嘗試使用定位符by.binding('mmmm') 識別一個元素，但 URL（https://angularjs.org/）頁面沒有具有指定定位符的元素。

describe('Suite for protractor debugger',function(){
   it('Failing spec',function(){
      browser.get("http://angularjs.org");
      element(by.model('yourName')).sendKeys('Vijay');
         //Element doesn't exist
         var welcomeText = 
         element(by.binding('mmmm')).getText();
         expect('Hello '+welcomeText+'!').toEqual('Hello Ram!')
   });
});

現在，要執行上述測試，我們需要在上述規範檔案中新增 browser.pause() 程式碼，您想要暫停測試的位置。它將如下所示：

describe('Suite for protractor debugger',function(){
   it('Failing spec',function(){
      browser.get("http://angularjs.org");
      browser.pause();
      element(by.model('yourName')).sendKeys('Vijay');
      //Element doesn't exist
      var welcomeText = 
      element(by.binding('mmmm')).getText();
      expect('Hello '+welcomeText+'!').toEqual('Hello Ram!')
   });
});

但在執行之前，我們還需要對配置檔案進行一些更改。我們在前面章節中使用的名為example_configuration.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: ['example_debug.js'],
      allScriptsTimeout: 999999,
      jasmineNodeOpts: {
      defaultTimeoutInterval: 999999
   },
   onPrepare: function () {
      browser.manage().window().maximize();
      browser.manage().timeouts().implicitlyWait(5000);
   }
};

現在，執行以下命令：

protractor example_configuration.js

執行上述命令後，偵錯程式將啟動。

偵錯程式方法

在 Protractor 中使用暫停方法除錯測試用例是一種稍微高階的方法。我們可以在想要中斷測試程式碼的位置鍵入以下命令：

browser.debugger();

它使用節點偵錯程式來除錯測試程式碼。要執行上述命令，我們必須在從測試專案位置開啟的單獨的命令提示符中鍵入以下命令：

protractor debug protractor.conf.js

在此方法中，我們也需要在終端中鍵入 C 以繼續測試程式碼。但與暫停方法相反，在此方法中，只需要鍵入一次。

示例

在此示例中，我們使用的是與上面相同的規範檔案，名為example_debug.js。唯一的區別是，我們不需要使用browser.pause()，而是需要使用browser.debugger()來中斷測試程式碼。它將如下所示：

describe('Suite for protractor debugger',function(){
   it('Failing spec',function(){
      browser.get("http://angularjs.org");
      browser.debugger();
      element(by.model('yourName')).sendKeys('Vijay');
      //Element doesn't exist
      var welcomeText = element(by.binding('mmmm')).getText();
      expect('Hello '+welcomeText+'!').toEqual('Hello Ram!')
   });
});

我們使用的是與上述示例中相同的配置檔案example_configuration.js。

現在，使用以下除錯命令列選項執行 Protractor 測試

protractor debug example_configuration.js

執行上述命令後，偵錯程式將啟動。

列印頁面