Cypress web自動化27-Debugging調試你的代碼

前言

在寫腳本的過程中，有時候會遇到一些問題需要慢慢調試找出原因，Cypress 提供了調試的方法，方便我們快速定位到問題

debugger 調試器

你的Cypress測試代碼運行在與應用程序相同的運行循環中.這意味着你可以訪問頁面上運行的代碼, 以及瀏覽器為你提供的東西, 比如document, window等等, 當然也包括調試器.

基於這些陳述, 你可能想在測試中添加一個 debugger 調試器, 就像這樣:

it('let me debug like a fiend', function() {
  cy.visit('https://www.cnblogs.com/yoyoketang/')

  cy.get('#blog_nav_sitehome')

  debugger // Doesn't work
})

但是上面的代碼並不會運行。Cypress 的文檔里面介紹，cy命令是以隊列的形式添加到列表里，最后才執行的。
debugger 將在 cy.visit() and cy.get() 之前執行，如下圖。

我們可以使用 .then（）在執行期間進入 Cypress 命令，並在適當的時間添加調試器

it('let me debug when the after the command executes', function () {
  cy.visit('https://www.cnblogs.com/yoyoketang/')

  cy.get('#blog_nav_sitehome')
    .then(($selectedElement) => {
      // Debugger is hit after the cy.visit
      // and cy.get command have completed
      debugger
    })
})

這樣就可以先運行代碼，在 debugger 位置暫停

上面的代碼整個工作流程如下

• cy.visit()訪問頁面，Cypress等待加載
• 查詢該元素，如果沒有立即找到它，Cypress會自動等待並重試一會兒。
• 將執行傳遞給.then（）的函數，並將找到的元素傳遞給它。
• 在.then（）函數的上下文中，調用 debugger 調試器，停止瀏覽器並調用 Developer Tools 的焦點。
• 檢查應用程序的狀態，執行 debugger

使用 .debug()

Cypress 通過了一個 .debug() 方法，可以直接調用，更省事！

it('let me debug like a fiend', function() {
  cy.visit('https://www.cnblogs.com/yoyoketang/')

  cy.get('#blog_nav_sitehome')
      .debug()
})

此時 cy.get() 會生成一個 subject 變量，在 Developer Tools 里面可以直接使用 console 調試

使用 .debug() 快速檢查任何（或多個）測試期間應用程序的部分。您可以將它附加到任何 Cypress 命令鏈上，以查看系統此時的狀態。

作者：上海-悠悠 交流QQ群:939110556
原文blog: https://www.cnblogs.com/yoyoketang