Cypress學習筆記6——Debugging調試代碼

　　引言

　　咱們寫程序、寫複雜的腳本時，若是遇到問題，常常須要打斷點進行調式，而Cypress提供了很好的debug命令——debugger

　　debugger調試器

　　Cypress測試代碼在與應用程序相同的運行循環中運行。這意味着您能夠訪問在頁面上運行的代碼，以及瀏覽器提供給您的內容，如document, window, and debugger。

　　基於這些語句，您可能會試圖在測試中添加調試器，以下所示:

/* __author__ = 'Leo' */



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

  cy.get('#s-top-left')

  debugger // Doesn't work
})

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

　　

 

 　　Let’s use .then() to tap into the Cypress command during execution and add a debugger at the appropriate time:

　　讓咱們使用then()在執行過程當中點擊Cypress命令，並在適當的時候添加調試器:

it('let me debug when the after the command executes', () => {
  cy.visit('https://www.baidu.com/')

  cy.get('#s-top-left')
    .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

　　使用cy.debug()


　　Cypress還公開了用於調試命令的快捷方式.debug()。讓咱們用這個幫助器方法重寫上面的測試:

 

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

  cy.get('#s-top-left')
      .debug()
})

 

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

 代碼格式化一下：

it('let me debug like a fiend', function() {
  cy.visit('https://www.baidu.com/')
  cy.get('#s-top-left').debug()

})

　　

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

　　使用cy.pause()

　　在調試代碼時，除了用debug()，咱們還有一個命令就是.pause()命令:

it('let me debug like a fiend', function() {
  cy.visit('https://www.baidu.com/')
    cy.pause()
    cy.get('#s-top-left')

})

　　運行後:

　　左上角有兩個按鈕，從左往右分別是

• Resume：繼續執行測試用例並運行到結束
• Next:get：測試會變成逐步運行，點一下執行下一個命令

　　總結

　　若是對python測試開發相關技術感興趣的夥伴，歡迎加入測試開發學習交流QQ羣:696400122，不積跬步，無以致千里。