前言
Cypress提供了一個很好的測試運行器, 它為你提供了一套可視化結構的測試和斷言套件, 很快你也會看到命令, 頁面事件, 網絡請求等.
當你還沒熟練掌握元素定位時，在運行器界面點開探測器，會自動幫我們定位好元素，甚至寫好部分代碼。
調試
Cypress提供了調試工具來幫你理解一個測試,能夠做下面事情的能力:
- 適時的追溯每一個命令的快照.
- 查看發生的特殊的頁面事件.
- 接收關於每個命令的額外輸出.
- 在多個命令間向前/后移動.
- 將命令暫停並且反復的單步調試它們.
- 當發現隱藏的或者多個元素的時候可視化它們.
讓我們使用現有的測試代碼看看其中的一些實際操作.
時間旅行
將鼠標懸停在命令日志中的 GET 命令上,會看到右邊定位到的元素位置
Cypress自動回溯到該命令解析之時的快照. 此外, 因為 cy.get() 在頁面找到了 DOM 元素, Cypress 還突出顯示元素並將其滾動到視圖中
雖然登錄之后，跳轉到了一個新的url地址 http://49.235.1.x:8080/zentao/my/
但是當我們把鼠標懸浮在 GET上時, Cypress 返回快照被記錄時出現的URL.
快照
命令也是交互式的,繼續去點擊一下CLICK命令.
注意到它高亮成紫色. 它做了三件值得注意的事…
- 固定快照
我們現在已經固定了這個快照. 懸浮在其他命令之上將不會返回它們. 這給了我們機會去手動檢查處於當時快照情況下的測試下的應用程序的DOM元素.
-
事件hitbox
因為.click()是一個動作命令, 這意味着我們還會在事件發生的坐標處看到一個紅色的hitbox. -
快照菜單面板
還有一個新的菜單面板. 某些命令(比如動作命令)將拍攝若干個快照: 之前和之后. 我們現在可以在這些快照間來回切換.
頁面事件
注意還有一個看起來很有趣的日志: (PAGE LOAD)后面緊跟着另一個入口(NEW URL).
這些都不是我們主動發出的命令 - Cypress 會記錄下程序關鍵事件的發生，請注意它們會看起來不同(它們是灰色的, 並且沒有數字).
Cypress注銷頁面事件:
- 網絡XHR請求
- URL哈希變化
- 頁面加載
- 表單提交
控制台輸出
除了命令是交互的, 它們也在你的控制台輸出額外的調試信息.打開你的Dev Tools並且點擊 #submit 的選擇器的 POST 請求.
我們能夠看到Cypress在控制台輸出了額外的信息:
- Command (被執行的命令)
- Yielded (被這個命令返回的東西)
- Elements (發現的元素個數)
- Selector (我們用的參數)
我們甚至可以把返回的東西展開並且檢查每一個單獨的元素, 或者我們甚至可以點擊它們, 並在元素面板里面檢查它們!
其它命令
除了具有有用的UI之外, 還有專門用於調試任務的特殊命令.
- cy.pause()
- cy.debug()
讓我們添加一個 cy.pause() 到我們的測試代碼里面並且看下會發生什么.
describe('My First Test', function() {
it('clicking "type" shows the right headings', function() {
cy.visit('https://example.cypress.io')
cy.pause()
cy.contains('type').click()
// 應該在一個新的包含'/commands/actions'的URL上
cy.url().should('include', '/commands/actions')
// 獲得一個輸入框, 將輸入值輸入並且驗證是否輸入框有更新
cy.get('.action-email')
.type('fake@email.com')
.should('have.value', 'fake@email.com')
})
})
現在Cypress提供我們一個UI界面來在每個命令之間前進(類似於一個調試器).
