Cypress - 除錯

Cypress 有一個非常好的除錯功能，我們可以進行時間旅行，檢視測試執行期間實際發生的情況。這可以透過將滑鼠懸停在測試執行器日誌上來完成。

當我們在測試執行器視窗中逐步操作時，元素會被高亮顯示。我們還可以使用 Cypress 命令 `pause`。這會暫停執行，在此期間我們可以除錯之前的步驟。之後，我們可以再次恢復執行。

實現

Cypress 中除錯命令的實現如下：

describe('Tutorialspoint Test', function () {
   // test case
   it('Scenario 1', function (){
      // launch the application
      cy.visit("https://#");
      // enable cookie logging
      Cypress.Cookies.debug(true)
      cy.getCookies
      //pause execution
      cy.pause()
      cy.setCookie('cookie1', 'value1' )
   });
});

執行結果

輸出結果如下：

輸出日誌顯示執行已暫停（由“暫停”按鈕表示）。然後，透過單擊“恢復”按鈕（出現在“暫停”按鈕旁邊），我們可以在除錯之前的步驟後恢復執行。

輸出日誌現在包含暫停後執行的所有步驟。

如果我們在瀏覽器上開啟開發者控制檯（按 F12），並從測試執行器中選擇一個步驟，控制檯將顯示使用的命令和生成的返回值。

例如，對於 `setCookie` 步驟，控制檯顯示命令 - `setCookie`，返回值顯示 Cookie 名稱 - `cookie1` 和值 - `value1`。