cypress?e2e測試編寫要注意什么

這篇文章主要介紹“cypress e2e測試編寫要注意什么”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“cypress e2e測試編寫要注意什么”文章能幫助大家解決問題。

不要認為cypress是同步的

不要認為cypress是以同步的方式執行，不要用const、let、var等去定義一個變量，隨后調用它

const a = cy.get('a');
cy.visit('https://example.cypress.io');
// 在這里有可能拿不到a，因為cy.get是異步操作，應該在before（）鉤子函數中定義變量。
a.first().click();

盡量避免直接訪問第三方

盡量避免直接訪問第三方，因為第三方提供的訪問API，返回的數據不可控，可能會發生改變；如果有這個需求，要使用cy.request()來調用第三方庫的API。

登錄需要注意的地方

登錄在cypress上有些困難： 許多OAuth服務商會運行A/B兩套方案，導致登錄屏幕動態更改，從而導致自動化測試變得困難。另外，OAuth服務商會根據你的訪問次數和頻率來判斷是否是機器人訪問，如果一旦被認定不是真人操作，就會導致不好的結果。

解決方案

token存根，并在測試前帶上token返回第三方，從而達到欺騙第三方已經登錄的目的

• 如果非要獲取真實令牌，使用cy.request()并使用OAuth提供的API（這些API不常修改）

• 除了讓測試代碼繞過 OAuth 之外，您還可以向服務器尋求幫助。也許 OAuth 令牌所做的只是在數據庫中生成一個用戶。通常，OAuth僅在最初有用，并且您的服務器會與客戶端建立自己的會話。如果是這種情況，請使用 cy.request（） 直接從服務器獲取會話并完全繞過提供程序。

避免測試用例之間的相互依賴

現在的test依賴于之前的test創造的環境，這是錯誤的寫法。正確的寫法應該是將之前test需要生成的結果寫在before() 鉤子中，每次都可以共享。

使用官方更加推薦的寫法

比較以下兩段代碼的差異：

// 不好的寫法
describe('my form', () => {
    beforeEach(() => {
        cy.visit('/users/new')
        cy.get('[data-testid="first-name"]').type('johnny')
    })
    it('has validation attr', () => {
        cy.get('[data-testid="first-name"]').should('have.attr', 'data-validation', 'required')
    })
    it('has active class', () => {
        cy.get('[data-testid="first-name"]').should('have.class', 'active')
    })
    it('has formatted first name', () => {
        cy.get('[data-testid="first-name"]').should('have.value', 'Johnny')
    })
})
// 推薦的寫法
describe('my form', () => {
    beforeEach(() => {
        cy.visit('/users/new')
    })
    it('validates and formats first name', () => {
        cy.get('[data-testid="first-name"]').type('johnny').should('have.attr', 'data-validation', 'required').and('have.value', 'Johnny')
    })
})

為什么建議寫成第二段代碼那樣？

集成測試和單元測試不同，你始終能知道失敗的斷言和位置在哪里。不用自己將其拆成一個個小的單元去測試哪段代碼出問題。

• 另外，當寫成一個個的測試用例時，在結束一個測試用例后，會重置測試條件，從而造成性能浪費。

避免寫可能失敗的代碼

我們在做出數據請求后，希望等待數據響應后，再做接下來的操作。有可能會寫成等待多少秒后再執行下一步的操作。但是，這里存在的問題是，

如果在既定的時間內并沒有返回數據，就會導致測試失敗。

正確的寫法應該是給請求一個別名，并等待請求成功后，再做接下來的操作。

// 錯誤的寫法
cy.intercept('GET', '/users', [{ name: 'Maggy' }, { name: 'Joan' }])
cy.get('#fetch').click()
cy.wait(4000) // 不要自己預計寫死等待時間
cy.get('table tr').should('have.length', 2)
// 正確的寫法
cy.intercept('GET', '/users', [{ name: 'Maggy' }, { name: 'Joan' }]).as('getUsers')
cy.get('#fetch').click()
cy.wait('@getUsers') // 正確等待數據請求回來
cy.get('table tr').should('have.length', 2)

關于“cypress e2e測試編寫要注意什么”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。