第cypress中豐富的調(diào)試工具使用方法目錄cypress調(diào)試工具一、Timetravel二、快照三、errors信息四、頁面事件五、控制臺的輸出六、調(diào)試專用命令

cypress調(diào)試工具

Cypress附帶了一系列調(diào)試工具來幫助我們弄明白測試的經(jīng)過，利于我們更好的調(diào)試。

具體這些工具的能力都有啥？

回到每個命令的快照?？梢钥吹教厥獾囊寻l(fā)生的pageevents。接收關(guān)于每個命令的額外輸出。在多個命令快照之間向前/向后步進。暫停命令并迭代地逐步執(zhí)行。當(dāng)找到隱藏的或者多個元素時，展示的更形象。

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

describe('MyFirstTest',()={

it('Gets,typesandasserts',()={

cy.visit('https://example.cypress.io')

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

//ShouldbeonanewURLwhichincludes'/commands/actions'

cy.url().should('include','/commands/actions')

//Getaninput,typeintoitandverifythatthevaluehasbeenupdated

cy.get('.action-email')

.type('fake@')

.should('have.value','fake@')

})

一、Timetravel

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

二、快照

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

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

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

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

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

快照菜單面板

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

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

三、errors信息

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

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

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

四、頁面事件

命令日志里還有2個看起來很有趣的日志:PAGELOAD、NEWURL。這些不需要我們?nèi)ゼ樱?dāng)發(fā)生一些重要事件的時候，

cypress自己就會輸出這些日志。

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

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

五、控制臺的輸出

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

比如F12打開你的DevTools并點擊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('MyFirstTest',()={

it('clicking"type"showstherightheadings',()={

cy.visit('https://example.cypress.io')

cy.pause()

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

//ShouldbeonanewURLwhichincludes'/commands/actions'

cy.url().should('include','/commands/actions')

//Getaninput,typeintoitandverifythatthevaluehasbeenupdated

cy.get('.action-email')

.type('fake@')

.should('