cypress 上手使用

簡介

The web has evolved. Finally, testing has too.

cypress 最近很火的e2e（即end to end（端到端））測試框架，它基於node js，Jquery的一些用法他裏面也能夠通用。

官網，github

API詳解參考

1、環境準備

1.1 VSCode安裝，參考這裏，直接根據平臺下載安裝。

1.2 Cypress安裝，參考這裏

 

2、樣例及經常使用API

2.1  樣例

/// <reference types="Cypress" />

 

describe('My first test case for cypress',function(){

    it('visit baidu home page and search for testerhome:',function(){
        cy.visit('http://www.baidu.com') //訪問url
        cy.title().should('contain','百度一下，你就知道')   //驗證頁面 title 是否正確

        cy.get('#kw')      //根據 css 定位搜索輸入框
         .type('testerhome')        //輸入關鍵字
        .should('have.value','testerhome')  //驗證關鍵字自動是否展現正確

        cy.get('#su').click()   //根據 css 定位搜索按鈕並點擊

        cy.url().should('include','wd=testerhome')     //驗證目標url 是否正確包含關鍵字

        cy.title().should('contain','testerhome_百度搜索')  //驗證頁面 title 是否正確

        cy.get('[id="1"]')   
        .should('contain','TesterHome')   // 驗證第一個結果中是否包含TesterHome

        cy.screenshot()
    })
})    

 

代碼解釋：

• reference表示告訴 VSCode 要去Cypress package 裏找相關的語義解析
• describe聲明一個測試用例集；
• it聲明瞭一個測試用例；
• beforeEach在每一個測試用例運行前須要作的事，before在全部測試用例運行前須要作的事；
• cy.get接受一個 js selector， 就是元素定位字符串（Cypress 也支持 xpath 定位）
• 經過then或should，咱們能夠把get到的元素對象傳遞到下一步，以便作進一步處理，這裏經過then把找到的button_start_search傳遞到下一步，

2.2 斷言

expect([]).to.be.a('Array') // 判斷類型
expect(a.b).to.exist // 判斷屬性是否存在
expect(1).to.be.oneOf([1,2,3]) // 判斷值是不是其中之一
expect('testing').to.match(/^test/) // 正則匹配
...

2.3調用接口&Mock

 

3、使用

3.1 運行狀況　

從左向右分別顯示：成功數、失敗數、未運行、耗時，是否自動滾屏和從新運行按鈕

 

注意在編寫用例時，每次保存會自動觸發測試，對於調試來講是比較方便的。

 

3.2 獲取控件定位

1.點擊選擇器　->2.點擊定位元素　->3.複製生成代碼

3.3 生成報告（Junit-allure）

在 cypress.json 中添加依賴：

"reporter": "junit",
"reporterOptions": {
 "mochaFile": "results/my-test-output[hash].xml", // 經過hash 標籤區分不一樣文件的用例結果
 "toConsole": true
}

執行 cypress run 的時候會自動生成xml文件
使用 allure 生成對應報告：

// 生成allure 報告
allure generate results --clean

// 打開報告
allure open allure-report

3.4 CI/CD

 

優勢：

• 速度感受上比selenium 要快。
• 內置的request 方法能夠直接跳過UI 層的登陸，但要求是你能調用對應的登陸接口。
• 某些步驟運行失敗時自動重試。這樣能夠提升運行的穩定性。
• 運行失敗時自動截圖