你不知道的Cypress系列（5） -- "眼瞎"的TestRunner?
iTesting，愛測試，愛分享
我的新書《前端自動化測試框架Cypress從入門到精通》出版啦！
自從我的新書<前端自動化測試框架 -- Cypress從入門到精通>上市以來，這本書受到了大量同學(xué)熱情的追捧和討論。在跟同學(xué)們的交流中，我也了解到， 原來除了國外優(yōu)秀的公司(例如Adobe, 迪士尼，AutoDesk等等）， 國內(nèi)也有很多公司在嘗試使用Cypress提升測試效率。而在Cypress中國群內(nèi)、在公眾號iTesting里，我每天都能看到大量關(guān)于Cypress的使用討論和私下問詢。這讓我感到無比榮幸。（買了書的同學(xué)們，公眾號回復(fù)你的微信號，拉你到Cypress中國群）。
今天是你不知道的Cypress系列（5） -- "眼瞎"的TestRunner
01
—
TestRunner是什么
關(guān)于TestRunner, 我想大家都已經(jīng)非常熟悉了。在我的的書中也有其各個用法的專門介紹，這里不再贅述。
僅再次列下其定義：
TestRunner是一個獨特的測試運行器。Cypress的所有命令通過它運行。通過TestRunner你可以觀測到， 在某一個時刻：1. 哪些命令在執(zhí)行。2. 這些命令在執(zhí)行時，你的應(yīng)用程序處于什么狀態(tài)。
Cypress八大特性里的時間穿梭能力，和可調(diào)試性能力，其實就是通過TestRunner來實現(xiàn)的。
02
—
Test Runner兩種運行模式
Cypress有兩種運行方式，分別是交互性運行（Interaction Mode），和無頭（Headless Mode）運行。
區(qū)別一個是測試運行時你可以看到瀏覽器啟動、執(zhí)行測試。另一個是沒有瀏覽器界面，你看不到運行過程。
無論是哪種方式運行，大家記得Cypress 是通過它內(nèi)置的Test Runner來運行你的測試用例的就行。
03
—
什么， TestRunner也會“瞎”？！
沒想到吧？剛開始我也是拒絕相信的。直到我發(fā)現(xiàn)我的測試用例還是會出現(xiàn)不穩(wěn)定、隨機失敗的現(xiàn)象（Flaky Test）。怪了！不是說用了Cypress之后就不會有這種問題了么？于是我就尋仙訪藥啊，終于，找到了原因所在。先給大家看一個例子：
describe('iTesting Demo', () => {it('歡迎關(guān)注iTesting', () => {cy.visit('/?delay=500')cy.get('.loading').should('be.visible')cy.get('.loading').should('not.be.visible')cy.get('li.todo').should('have.length', 2)})})
這是Cypress官網(wǎng)的一個用例，這個測試第一次成功，再次運行失敗了。特別是你把它集成到CI上的時候，你大概率會看到這種失敗。
為什么會這樣呢？
Test Runner "瞎"了！
04
—
TestRunner為什么會“瞎”
describe('iTesting Demo', () => {Cypress._.times(20, (k) => {it(`歡迎關(guān)注iTesting ${k}`, () => {cy.visit('/?delay=500')cy.get('.loading').should('be.visible')cy.get('.loading').should('not.be.visible')cy.get('li.todo').should('have.length', 2)})})})
那么我們確定，代碼是有問題，再一眼一眼看吧。這個時候，有條件的你可能也要看下開發(fā)的代碼如何寫的。例如，visit的時候發(fā)生了什么， click的時候哪些事件被觸發(fā)了？ 通過了解開發(fā)邏輯可以幫助你快速定位問題。
describe('iTesting Demo', () => {it('歡迎關(guān)注iTesting', () => {cy.visit('/?delay=500')cy.get('.loading').should('be.visible')cy.wait(1000)cy.get('.loading').should('not.be.visible')cy.get('li.todo').should('have.length', 2)})})
05
—
結(jié)論
然后就是各種查資料， 最后發(fā)現(xiàn)Cypress早有結(jié)論：
1. 如果一個元素出現(xiàn)和消失的間隔在21ms內(nèi)，那么大概率TestRunner會“瞎”。有的同學(xué)可能會想， Test Runner看不見，有沒有其它辦法能看見？比如Cypress不是提供視頻可以錄制運行中的所有情況么？我把運行過程錄制下來慢慢查不就行了？
1. 不行！標(biāo)準的視頻，是每秒30幀， 每幀的標(biāo)準間隔是33ms。06
—
解決之道
既然找到了Root cause,解決起來就簡單了，有如下解法：
1. 加Sleep time
// 強烈不推薦， 用了我大Cypress，是不可能sleep的！cy.wait(1000)
2. 使用cy.intercept等待網(wǎng)絡(luò)請求返回并加裝完成后再執(zhí)行
// 強烈推薦！cy.intercept('XXX你的代碼').as('myRequest')cy.wait('@myRequest')xxxxx // 你的后續(xù)代碼
3. 直接模擬服務(wù)器延遲返回
//五星好評，強烈推薦！cy.intercept('/todos', {fixture: 'todos.json',delayMs: 1000,})
Cypress有很多奇淫巧技， 我已經(jīng)總結(jié)超過百篇
別走開，下一篇更精彩！
往期回看：
你不知道的Cypress系列（1） --雞肋的BDD
你不知道的Cypress系列（2） -- ”該死"的PO模型！
你不知道的Cypress系列（3） -- 是時候重構(gòu)自己的思維了！
你不知道的Cypress系列（4） -- “PO”已死，App Action當(dāng)立？
為了更好的支持我創(chuàng)作，麻煩同學(xué)們動動小手，點贊 + 在看 + 轉(zhuǎn)發(fā)一鍵三聯(lián)：）
技術(shù)討論
公眾號里直接回復(fù) 666， 帶你入圈。
- - 時人莫小池中水, 淺處不妨有臥龍 - -
作者：
Kevin Cai, 江湖人稱蔡老師。
兩性情感專家，非著名測試開發(fā)。
技術(shù)路線的堅定支持者，始終相信Nobody can be somebody。
· 猜你喜歡的文章 ·