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

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

二、快照

在左側(cè)的命令行也是可以交互的，這里就可以點擊click命令，點擊后就發(fā)現(xiàn)變紫色了，說明事情有古怪。

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

固定快照

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

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

點擊事件

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

快照菜單面板

這是一個新的菜單面板。一些命令(如操作命令)如果使用多個快照，那么可以通過點擊:before和after，來回的切換快照。before快照是在觸發(fā)click事件之前進行的，after快照則是在點擊事件發(fā)生后立即執(zhí)行的。

比如現(xiàn)在點擊type命令，單擊before將以輸入框之前的樣子，應該顯示占位符文本信息。單擊after將顯示TYPE命令完成后輸入的樣子，顯示fake@email.com。

三、errors信息

調(diào)試代碼，自然少不了看報錯的error信息了。

在cypress中，如果發(fā)生了錯誤，會打印如下的信息(對應圖里標記的序號閱讀)：

Error name：這是錯誤的類型，比如AssertionError, CypressError。
Error message：通常會告訴我們哪里出了問題。它的長度不一，有些很短，而有些很長，可能會告訴我們應該如何準確地修正錯誤。
Learn more：一些錯誤消息包含一個Learn more的鏈接，點擊后跳轉(zhuǎn)到相關的Cypress文檔。
Code frame file：通常是堆棧跟蹤的頂部一行，顯示了在下面的代碼框架中突出顯示的文件、行和列。
Code frame：顯示發(fā)生故障的代碼片段，并突出顯示了相關的行和列。
View stack trace：單擊此按鈕可切換是否展示堆棧跟蹤。
Print to console button：單擊此按鈕將完整的錯誤打印到DevTools控制臺，也就是F12的console。

四、頁面事件

命令日志里還有2個看起來很有趣的日志:PAGE LOAD、NEW URL。這些不需要我們?nèi)ゼ?，當發(fā)生一些重要事件的時候，
cypress自己就會輸出這些日志。

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

發(fā)送了XHR的請求。
url改變。
頁面加載
表單提交。

五、控制臺的輸出

cypress還可以將額外的調(diào)試信息輸出到控制臺。

比如F12打開你的Dev Tools并點擊get來獲取.action-email類選擇器。

我們可以在控制臺中看到Cypress輸出額外的信息：

Command：已發(fā)出的命令。
Yielded：這個命令返回的內(nèi)容。
Elements：發(fā)現(xiàn)的元素數(shù)量。
Selector：使用的選擇器。

六、調(diào)試專用命令

除了UI界面上的各種輔助工具之外，還有專門用于調(diào)試的命令，例如：

cy.pause()
cy.debug()

現(xiàn)在，在代碼里加上一行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()就會暫停，可以手動點擊繼續(xù)，進行下一步操作。