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()
})