我的新書《前端自動(dòng)化測(cè)試框架Cypress從入門到精通》出版啦！

自從我的新書<前端自動(dòng)化測(cè)試框架 -- Cypress從入門到精通>上市以來(lái)，這本書受到了大量同學(xué)熱情的追捧和討論。在跟同學(xué)們的交流中，我也了解到， 原來(lái)除了國(guó)外優(yōu)秀的公司(例如Adobe, 迪士尼，AutoDesk等等）， 國(guó)內(nèi)也有很多公司在嘗試使用Cypress提升測(cè)試效率。而在Cypress中國(guó)群內(nèi)、在公眾號(hào)iTesting里，我每天都能看到大量關(guān)于Cypress的使用討論和私下問(wèn)詢。這讓我感到無(wú)比榮幸。（買了書的同學(xué)們，公眾號(hào)回復(fù)你的微信號(hào)，拉你到Cypress中國(guó)群）。

今天是你不知道的Cypress系列（5） -- "眼瞎"的TestRunner

TestRunner是什么

關(guān)于TestRunner, 我想大家都已經(jīng)非常熟悉了。在我的的書中也有其各個(gè)用法的專門介紹，這里不再贅述。

僅再次列下其定義：

TestRunner是一個(gè)獨(dú)特的測(cè)試運(yùn)行器。Cypress的所有命令通過(guò)它運(yùn)行。通過(guò)TestRunner你可以觀測(cè)到， 在某一個(gè)時(shí)刻：1. 哪些命令在執(zhí)行。2. 這些命令在執(zhí)行時(shí)，你的應(yīng)用程序處于什么狀態(tài)。

Cypress八大特性里的時(shí)間穿梭能力，和可調(diào)試性能力，其實(shí)就是通過(guò)TestRunner來(lái)實(shí)現(xiàn)的。

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)  })})

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)    })  })})

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)  })})

結(jié)論

然后就是各種查資料， 最后發(fā)現(xiàn)Cypress早有結(jié)論：

1. 如果一個(gè)元素出現(xiàn)和消失的間隔在21ms內(nèi)，那么大概率TestRunner會(huì)“瞎”。

有的同學(xué)可能會(huì)想， Test Runner看不見(jiàn)，有沒(méi)有其它辦法能看見(jiàn)？比如Cypress不是提供視頻可以錄制運(yùn)行中的所有情況么？我把運(yùn)行過(guò)程錄制下來(lái)慢慢查不就行了？

1. 不行！標(biāo)準(zhǔn)的視頻，是每秒30幀， 每幀的標(biāo)準(zhǔn)間隔是33ms。

解決之道

既然找到了Root cause,解決起來(lái)就簡(jiǎn)單了，有如下解法：

• 1. 加Sleep time

// 強(qiáng)烈不推薦， 用了我大Cypress，是不可能sleep的！cy.wait(1000) 

• 2. 使用cy.intercept等待網(wǎng)絡(luò)請(qǐng)求返回并加裝完成后再執(zhí)行

// 強(qiáng)烈推薦！cy.intercept('XXX你的代碼').as('myRequest')cy.wait('@myRequest')xxxxx   //  你的后續(xù)代碼

• 3. 直接模擬服務(wù)器延遲返回

 //五星好評(píng)，強(qiáng)烈推薦！  cy.intercept('/todos', {    fixture: 'todos.json',    delayMs: 1000,  })

Cypress有很多奇淫巧技， 我已經(jīng)總結(jié)超過(guò)百篇

別走開(kāi)，下一篇更精彩！

往期回看：

                    你不知道的Cypress系列（1） --雞肋的BDD

                    你不知道的Cypress系列（2） -- ”該死"的PO模型！

                    你不知道的Cypress系列（3） -- 是時(shí)候重構(gòu)自己的思維了！

                    你不知道的Cypress系列（4） -- “PO”已死，App Action當(dāng)立？

為了更好的支持我創(chuàng)作，麻煩同學(xué)們動(dòng)動(dòng)小手，點(diǎn)贊 + 在看 + 轉(zhuǎn)發(fā)一鍵三聯(lián)：）

技術(shù)討論

公眾號(hào)里直接回復(fù) 666， 帶你入圈。