cypress測試編寫

當(dāng)環(huán)境安裝好了之后，就可以著手嘗試第一個(gè)測試的編寫了。

一、新建一個(gè)文件

在你的項(xiàng)目下的cypress/integration文件夾中創(chuàng)建一個(gè)新文件sample_spec.js，我這里直接在webstorm編輯器中創(chuàng)建。

創(chuàng)建好之后，打開cypress的應(yīng)用，會(huì)看到Cypress Test Runner立即將新文件顯示在集成測試列表中。

Cypress會(huì)監(jiān)視規(guī)格文件的任何更改，并自動(dòng)顯示任何更改。

雖然這是一個(gè)空文件，但是也可以點(diǎn)擊運(yùn)行試試看。

顯示No tests found，這是正常情況，因?yàn)槲掖_實(shí)啥也沒寫。不過有時(shí)候cypress在解析測試文件內(nèi)容的時(shí)候也會(huì)有這種報(bào)錯(cuò)提示，可以F12打開開發(fā)者工具，查看console里是不是有錯(cuò)誤消息。

二、編寫第一個(gè)測試文件

這里關(guān)注點(diǎn)有3個(gè)：

• 編寫第一個(gè)通過的測試。
• 編寫我們的第一個(gè)失敗測試。
• 觀察cypress實(shí)時(shí)網(wǎng)頁重載的過程

實(shí)時(shí)重載就是，當(dāng)測試文件內(nèi)容有改變保存的時(shí)候，可以看到瀏覽器自動(dòng)實(shí)時(shí)重載。

1. 編寫一個(gè)測試通過的代碼

現(xiàn)在，修改剛才新文件的，添加以下代碼，然后保存。

describe('My First Test', () => {
    it('Does not do much!', () => {
        expect(true).to.equal(true)
    })
})

保存后，重載運(yùn)行，測試通過啦。

雖然這個(gè)測試文件沒干啥正經(jīng)事兒，這就是第一個(gè)pass的測試!?
在命令日志中，有展示出的信息，包含了測試套件、測試、以及測試斷言情況，斷言通過就是綠色的。

2. 編寫一個(gè)測試失敗的代碼

可以在文件里繼續(xù)添加下面的代碼，然后保存。

describe('My First Test', () => {
    it('Does not do much!', () => {
        expect(true).to.equal(false)
    })
})

這時(shí)候，測試失敗了，信息和關(guān)鍵字都是用紅色來顯示的。

3. 測試文件中的describe, it, 和expect 是什么

在編輯器里查看測試文件，很容易看到在代碼里，describe, it, 和 expect這3個(gè)是關(guān)鍵字。

cypress也是通過在內(nèi)部使用了其他流行的工具或者框架來實(shí)現(xiàn)這些功能：

describe 和it 來自于 Mocha

expect來自于Chai

三、編寫一個(gè)真實(shí)的測試文件

一個(gè)完整可靠的測試通常包含3個(gè)階段：

• 測試前置準(zhǔn)備
• 執(zhí)行測試
• 測試執(zhí)行后的斷言。

我們也會(huì)常見到一些短語概括，比如 Given, When, Then, 或者 Arrange, Act, Assert，描述的也都是這種思路。所以，在cypress里編寫測試文件，同樣也遵循上述原則：

• 訪問一個(gè)網(wǎng)頁。
• 查詢元素。
• 與該元素交互。
• 斷言頁面上的內(nèi)容。

1. 步驟一：訪問一個(gè)頁面

這里使用官方的一個(gè)頁面作為測試頁面。

將要訪問的URL傳遞給cy.visit():

describe('我的第一個(gè)測試', () => {
    it('訪問 Kitchen Sink 頁面', () => {
        cy.visit('https://example.cypress.io')
    })
})

保存文件后，切換到cypress運(yùn)行器，可以看到如下變化：

• 命令日志現(xiàn)在顯示了新的VISIT操作。
• 訪問的Kitchen Sink頁面已經(jīng)加載到右側(cè)的預(yù)覽窗口。
• 測試是綠色的，雖然沒有任何斷言。

如果請求的頁面返回時(shí)帶有非2xx狀態(tài)碼，比如404或者500，或者訪問的應(yīng)用程序代碼中有JavaScript報(bào)錯(cuò)，測試會(huì)失敗。

VISIT顯示藍(lán)色掛起狀態(tài)，直到頁面加載完成。

如果該請求返回時(shí)帶有非2xx狀態(tài)代碼，如404或500，或者如果應(yīng)用程序代碼中有JavaScript錯(cuò)誤，測試就會(huì)失敗

注意

你測試的應(yīng)用程序得是你可以控制的，為什么呢？

• 如果你隨便測試一個(gè)別的頁面應(yīng)用，它們隨時(shí)可能改變，那么測試可能就不能順利進(jìn)行。
• 別的應(yīng)用可能會(huì)進(jìn)行A/B測試，那么你多次相同的操作，可能無法獲得一致的結(jié)果。
• 它們可能會(huì)檢測到你是一個(gè)腳本并阻止你的訪問(谷歌會(huì)這樣做)。
• 他們可能有安全功能啟用，防止Cypress工作。

Cypress的重點(diǎn)用來幫助每天構(gòu)建和測試自己的應(yīng)用程序的，并不是一個(gè)通用的web自動(dòng)化工具，所以不適合用來測試非你控制之外的應(yīng)用。

2. 步驟二：查詢一個(gè)元素

在第一步里已經(jīng)可以成功打開測試頁面，那現(xiàn)在就來查找一個(gè)元素，就拿type開刀吧。

可以使用cy.contains()，找到包含type的元素。

describe('My First Test', () => {
    it('finds the content "type"', () => {
        cy.visit('https://example.cypress.io')
 
        cy.contains('type')
    })
})

保存。

這里同樣沒加斷言，但是測試也通過了。原因在于cypress的默認(rèn)斷言，許多Cypress的命令當(dāng)沒有找到預(yù)期目標(biāo)時(shí)候，就會(huì)構(gòu)建失敗。

可以試試，用頁面上沒有的東西替換type，比如hype。測試就變紅了，但是需要4秒。為什么要等4s，因?yàn)閏ypress它會(huì)自動(dòng)等待并重新嘗試，不會(huì)立即失效!

3. 步驟三：點(diǎn)擊一個(gè)元素

找到了包含type的元素，這是一個(gè)鏈接，于是可以點(diǎn)擊它，在后面加上.click()即可。

describe('My First Test', () => {
  it('clicks the link "type"', () => {
    cy.visit('https://example.cypress.io')
 
    cy.contains('type').click()
  })
})

點(diǎn)擊跳轉(zhuǎn)成功。

另外，從cy.contains('type').click()這行代碼可以看出，在cypress里可以采用鏈?zhǔn)秸{(diào)用的方式，更直觀的描述出要做的事情。

4. 步驟四：斷言

得到了新的頁面，就可以在新頁面里加一些斷言了，驗(yàn)證跳轉(zhuǎn)成功。

比如，驗(yàn)證新頁面的URL是預(yù)期的URL。

斷言用到.should方法。

describe('My First Test', () => {
    it('clicking "type" navigates to a new url', () => {
        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')
    })
})

保存測試文件，測試通過，斷言正確。

添加更多的交互命令和斷言

到這里，一個(gè)完整的測試文件就可以說結(jié)束了。不過，cypress也并不限定在一個(gè)測試文件里只能做單個(gè)的交互和斷言。

因?yàn)樵趯?shí)際應(yīng)用場景中，某些被測試的功能，可能需要多個(gè)步驟。那么，我們可以在這個(gè)測試文件里繼續(xù)添加交互命令和斷言。

比如，在跳轉(zhuǎn)的新的頁面里，可以繼續(xù)使用cy.get()來根據(jù)CSS類選擇元素。然后，可以使用.type()命令將文本輸入到選定的輸入框。

最后，我們可以驗(yàn)證輸入的值是否成功。

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

回顧測試

最終的代碼，就實(shí)現(xiàn)了在Cypress中進(jìn)行一個(gè)簡短的測試：訪問一個(gè)頁面，找到并單擊一個(gè)鏈接，驗(yàn)證URL，然后驗(yàn)證新頁面上元素的行為。

如果大聲讀出來，聽起來可能是這樣的:

1. 訪問`https://example.cypress.io`

2. 找到包含了`type`的元素

3. 點(diǎn)擊這個(gè)元素

4. 獲取新頁面的url

5. 斷言獲取到的url里包含`/commands/actions`

6. 用css`.action-email`獲取到輸入框

7. 輸入`fake@email.com`

8. 斷言內(nèi)容輸入成功

是不是符合文章開始描述的編寫測試的思想。如果用Given, When, Then來解讀也是可以的：

1. Given 一個(gè)用戶訪問`https://example.cypress.io`

2. When 他點(diǎn)擊了type的label標(biāo)簽

3. And 他在`.action-email`這個(gè)輸入框里輸入了 "fake@email.com" 

4. Then 新頁面的url應(yīng)該包含`/commands/actions`

5. And 這個(gè)`.action-email`輸入框有了輸入內(nèi)容"fake@email.com"

關(guān)于頁面轉(zhuǎn)換

• 上面的測試代碼，跨越了2個(gè)頁面。
• cypress會(huì)自動(dòng)的發(fā)現(xiàn)page transition event這種頁面轉(zhuǎn)化事件，并且會(huì)自動(dòng)停止運(yùn)行命令，直到下一個(gè)頁面加載完成。
• 如果下一個(gè)頁面最終沒有加載完成，那么Cypress就會(huì)結(jié)束測試并且標(biāo)記error。
• 在前面提到過，Cypress在超時(shí)找到DOM元素之前等待了4秒，但是在最后的代碼中，Cypress檢測到頁面轉(zhuǎn)換事件，它會(huì)自動(dòng)將單個(gè)page LOAD事件的超時(shí)增加到60秒。
• 換句話說，基于命令和發(fā)生的事件，Cypress自動(dòng)更改預(yù)期超時(shí)。

以上就是使用cypress編寫第一個(gè)測試的詳細(xì)內(nèi)容，更多關(guān)于cypress測試編寫的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論