cypress調(diào)試工具

Cypress附帶了一系列調(diào)試工具來幫助我們弄明白測(cè)試的經(jīng)過，利于我們更好的調(diào)試。
具體這些工具的能力都有啥？

• 回到每個(gè)命令的快照。
• 可以看到特殊的已發(fā)生的page events。
• 接收關(guān)于每個(gè)命令的額外輸出。
• 在多個(gè)命令快照之間 向前/向后 步進(jìn)。
• 暫停命令并迭代地逐步執(zhí)行。
• 當(dāng)找到隱藏的或者多個(gè)元素時(shí)，展示的更形象。

這里繼續(xù)使用上一章的測(cè)試代碼，來看下其中的一些具體操作。

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

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

二、 快照

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

其實(shí)這里有3點(diǎn)需要大家關(guān)注到(對(duì)應(yīng)圖里的1,2,3標(biāo)記)：

• 固定快照

可以看到有個(gè)圖釘標(biāo)記，表示現(xiàn)在鎖定了這個(gè)快照。這時(shí)候鼠標(biāo)移動(dòng)到其他命令上，快照也不會(huì)切換。

這就方便我們?cè)趧?chuàng)建快照時(shí)，手動(dòng)檢查被測(cè)試應(yīng)用程序的DOM。

• 點(diǎn)擊事件

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

• 快照菜單面板

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

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

三、errors信息

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

在cypress中，如果發(fā)生了錯(cuò)誤，會(huì)打印如下的信息(對(duì)應(yīng)圖里標(biāo)記的序號(hào)閱讀)：

1. Error name：這是錯(cuò)誤的類型，比如AssertionError, CypressError。
2. Error message：通常會(huì)告訴我們哪里出了問題。它的長(zhǎng)度不一，有些很短，而有些很長(zhǎng)，可能會(huì)告訴我們應(yīng)該如何準(zhǔn)確地修正錯(cuò)誤。
3. Learn more：一些錯(cuò)誤消息包含一個(gè)Learn more的鏈接，點(diǎn)擊后跳轉(zhuǎn)到相關(guān)的Cypress文檔。
4. Code frame file：通常是堆棧跟蹤的頂部一行，顯示了在下面的代碼框架中突出顯示的文件、行和列。
5. Code frame：顯示發(fā)生故障的代碼片段，并突出顯示了相關(guān)的行和列。
6. View stack trace：?jiǎn)螕舸税粹o可切換是否展示堆棧跟蹤。
7. Print to console button：?jiǎn)螕舸税粹o將完整的錯(cuò)誤打印到DevTools控制臺(tái)，也就是F12的console。

四、頁面事件

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

具體涉及到自動(dòng)輸出日志的事件有如下：

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

五、控制臺(tái)的輸出

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

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

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

• Command： 已發(fā)出的命令。
• Yielded： 這個(gè)命令返回的內(nèi)容。
• Elements： 發(fā)現(xiàn)的元素?cái)?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')
    })
})

可以看到程序運(yùn)行到cy.pause()就會(huì)暫停，可以手動(dòng)點(diǎn)擊繼續(xù)，進(jìn)行下一步操作。

以上就是cypress中豐富的調(diào)試工具使用方法的詳細(xì)內(nèi)容，更多關(guān)于cypress調(diào)試工具的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！