【cypress】4. 豐富的除錯工具

把蘋果v咬哭發表於2021-05-01
除錯

Cypress附帶了一系列除錯工具來幫助我們弄明白測試的經過，利於我們更好的除錯。
具體這些工具的能力都有啥？

  • 回到每個命令的快照。
  • 可以看到特殊的已發生的page events。
  • 接收關於每個命令的額外輸出。
  • 在多個命令快照之間 向前/向後 步進。
  • 暫停命令並迭代地逐步執行。
  • 當找到隱藏的或者多個元素時，展示的更形象。

這裡繼續使用上一章的測試程式碼，來看下其中的一些具體操作。

describe('My First Test', () => {
    it('Gets, types and asserts', () => {
        cy.visit('https://example.cypress.io')

        cy.contains('type').click()

        // Should be on a new URL which includes '/commands/actions'
        cy.url().should('include', '/commands/actions')

        // Get an input, type into it and verify that the value has been updated
        cy.get('.action-email')
            .type('fake@email.com')
            .should('have.value', 'fake@email.com')
    })
})

一、 Time travel

姑且叫它時間穿梭吧。期初我還有點莫名其妙，後來用了才知道，確實好用。就是當你的滑鼠在左側的命令日誌上懸停時，cypress會自動回到那個命令解析時的快照，
於是乎，在右側的預覽視窗，就可以看到對應這個命令進行的動作。

二、 快照

在左側的命令列也是可以互動的，這裡就可以點選click命令，點選後就發現變紫色了，說明事情有古怪。

其實這裡有3點需要大家關注到(對應圖裡的1,2,3標記)：

  1. 固定快照

可以看到有個圖釘標記，表示現在鎖定了這個快照。這時候滑鼠移動到其他命令上，快照也不會切換。
這就方便我們在建立快照時，手動檢查被測試應用程式的DOM。

  1. 點選事件

由於.click()是一個操作命令，那麼在事件發生的座標處就可以看到一個紅色的命中框。

  1. 快照選單皮膚

這是一個新的選單皮膚。一些命令(如操作命令)如果使用多個快照，那麼可以通過點選:before和after，來回的切換快照。
before快照是在觸發click事件之前進行的，after快照則是在點選事件發生後立即執行的。

比如現在點選type命令，單擊before將以輸入框之前的樣子，應該顯示佔位符文字資訊。單擊after將顯示TYPE命令完成後輸入的樣子，
顯示fake@email.com。

三、errors資訊

除錯程式碼，自然少不了看報錯的error資訊了。

在cypress中，如果發生了錯誤，會列印如下的資訊（對應圖裡標記的序號閱讀）：

  1. Error name：這是錯誤的型別，比如AssertionError, CypressError。
  2. Error message：通常會告訴我們哪裡出了問題。
    它的長度不一，有些很短，而有些很長，可能會告訴我們應該如何準確地修正錯誤。
  3. Learn more：一些錯誤訊息包含一個Learn more的連結，點選後跳轉到相關的Cypress文件。
  4. Code frame file：通常是堆疊跟蹤的頂部一行，顯示了在下面的程式碼框架中突出顯示的檔案、行和列。
  5. Code frame：顯示發生故障的程式碼片段，並突出顯示了相關的行和列。
  6. View stack trace：單擊此按鈕可切換是否展示堆疊跟蹤。
  7. Print to console button：單擊此按鈕將完整的錯誤列印到DevTools控制檯，也就是F12的console。

四、頁面事件

命令日誌裡還有2個看起來很有趣的日誌:PAGE LOAD、NEW URL。這些不需要我們去加，當發生一些重要事件的時候，
cypress自己就會輸出這些日誌。

具體涉及到自動輸出日誌的事件有如下：

  • 傳送了XHR的請求。
  • url改變。
  • 頁面載入
  • 表單提交。

五、控制檯的輸出

cypress還可以將額外的除錯資訊輸出到控制檯。
比如F12開啟你的Dev Tools並點選get來獲取.action-email類選擇器。

我們可以在控制檯中看到Cypress輸出額外的資訊：

  • Command： 已發出的命令。
  • Yielded： 這個命令返回的內容。
  • Elements： 發現的元素數量。
  • Selector：使用的選擇器。

六、除錯專用命令

除了UI介面上的各種輔助工具之外，還有專門用於除錯的命令，例如：

  • cy.pause()
  • cy.debug()

現在，在程式碼里加上一行cy.pause()，儲存。

describe('My First Test', () => {
    it('clicking "type" shows the right headings', () => {
        cy.visit('https://example.cypress.io')

        cy.pause()

        cy.contains('type').click()

        // Should be on a new URL which includes '/commands/actions'
        cy.url().should('include', '/commands/actions')

        // Get an input, type into it and verify that the value has been updated
        cy.get('.action-email')
            .type('fake@email.com')
            .should('have.value', 'fake@email.com')
    })
})

可以看到程式執行到cy.pause()就會暫停，可以手動點選繼續，進行下一步操作。

相關文章