cypress中豐富的調試工具如何使用

這篇文章主要講解了“cypress中豐富的調試工具如何使用”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“cypress中豐富的調試工具如何使用”吧！

cypress調試工具

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標記)：

• 固定快照

可以看到有個圖釘標記，表示現在鎖定了這個快照。這時候鼠標移動到其他命令上，快照也不會切換。

這就方便我們在創建快照時，手動檢查被測試應用程序的DOM。

• 點擊事件

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

• 快照菜單面板

這是一個新的菜單面板。一些命令(如操作命令)如果使用多個快照，那么可以通過點擊: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()就會暫停，可以手動點擊繼續，進行下一步操作。

感謝各位的閱讀，以上就是“cypress中豐富的調試工具如何使用”的內容了，經過本文的學習后，相信大家對cypress中豐富的調試工具如何使用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！