賽普拉斯斷言:您應該知道的 9 個事實

Cypress 斷言幫助我們斷言特定的斷言是驗證步驟,確保預期結果是否等於實際結果。 在測試自動化中,我們斷言一個語句來驗證測試是否生成了預期的結果。 如果斷言失敗,則測試用例失敗,確保存在錯誤。 在這篇文章中,我們將討論關於 Cypress 斷言與 Handson 實現和示例.

表中的內容

賽普拉斯斷言

什麼是賽普拉斯斷言?

Cypress 使用並封裝了 Chai 斷言庫和擴展,如 Sinon 和 JQuery。 賽普拉斯會自動等待並重試,直到斷言得到解決。 斷言可用於描述應用程序的外觀。 我們可以使用 Cypress 斷言與等待、重試、阻塞的組合,直到它達到所需的狀態。

賽普拉斯斷言文本

在一般英語中,我們會描述一個斷言,例如, 我希望按鈕有登錄文本. 相同的斷言可以在 Cypress 中編寫為

cy.get('button').should('have.value', 'login')

如果按鈕具有“登錄”值,則上述斷言將通過。

賽普拉斯常見斷言

我們在測試用例中使用了一組常見的 Cypress 斷言。 我們將使用它們 .should() . 讓我們看看用例和示例。

下面列出了一些常見的 Cypress 斷言

  1. 總長:
  2. 文本上下文
  3. 課程
  4. 存在
  5. 的CSS
  6. 能見度
  7. 殘疾人財產

Cypress 長度斷言

length() 將檢查特定元素是否具有長度

cy.get('dropdown').should('have.length', 5)

賽普拉斯價值斷言

如果特定元素具有預期值,則 Cypress 值將斷言

cy.get('textfield').should('have.value', 'first name')

Cypress 文本上下文斷言

如果元素具有特定文本,則文本上下文將斷言

cy.get('#user-name').should('have.text', 'John Doe')

賽普拉斯類斷言

斷言類是否存在或特定元素是否應具有類

cy.get('form').find('input').should('have.class', 'disabled')

賽普拉斯存在斷言

Existence 命令檢查特定元素是否存在或存在於 DOM 中

cy.get('#button').should('exist')

賽普拉斯 CSS 斷言

CSS 斷言檢查特定元素是否具有特定屬性

cy.get('.completed').should('have.css', 'text-decoration', 'line-through')

賽普拉斯可見性斷言

Cypress Visibility Assertion 斷言 DOM 元素在 UI 中是否可見

cy.get('#form-submit').should('be.visible')

賽普拉斯狀態斷言

斷言 DOM 元素的狀態

cy.get(':radio').should('be.checked')

賽普拉斯禁用屬性聲明

Cypress Disabled 屬性斷言斷言元素是否被禁用

cy.get('#example-input').should('be.disabled')

賽普拉斯重試斷言

帶有斷言的單個命令將按順序執行。 最初,命令執行,然後斷言將被執行。 一個命令後跟多個斷言也將按順序執行——分別是第一個和第二個斷言。 因此,當第一個斷言通過時,第一個和第二個斷言將與命令一起再次執行。

例如,下面的命令同時包含 .should().and() 斷言命令,其中 .and() 也稱為 .should()

cy.get('.todo-list li') // 命令 .should('have.length', 2) // 斷言 .and(($li) => { // 還有 2 個斷言 expect($li.get (0).textContent, '第一項').to.equal('todo A') expect($li.get(1).textContent, '第二項').to.equal('todo B') })

賽普拉斯斷言示例

在本節中,我們將討論 Cypress 中不同類型的斷言,例如

  • 隱式斷言
  • 顯式斷言

我們將通過示例詳細了解這兩種類型

Cypress 中的隱式斷言

在隱式斷言中,我們使用 .should() or .and() 命令。 這些斷言命令適用於命令鏈中當前產生的主題。 它們依賴於先前產生的主題。

我們將研究如何使用的示例 .should() or .and() 命令

cy.get('button').should('have.class', 'enabled')

這款獨特的敏感免洗唇膜採用 Moisture WrapTM 技術和 Berry Mix ComplexTM 成分, .and() 這是一個別名 .should() ,我們可以鏈接多個斷言。 這些命令更具可讀性。

cy.get('#title') .should('have.class', 'active') .and('have.attr', 'href', '/post')

上面的例子與 .should() 聲明它應該具有“活動”類,然後是 .and() 針對相同的命令執行。 當我們想要斷言多個命令時,這非常有用。

Cypress 中的顯式斷言

在斷言中傳遞顯式主題屬於賽普拉斯斷言的顯式類型。 在這裡,我們將使用 expectassert 命令作為斷言。 當我們想對同一主題使用多個斷言時,使用顯式斷言。 我們還使用顯式斷言 賽普拉斯當我們想做定制時 做出斷言之前的邏輯。

我們將調查 顯式賽普拉斯的示例 斷言

expect(true).to.be.true //檢查布爾值 expect(object).to.equal(object)

否定 Cypress 斷言

與肯定斷言類似,Cypress 中也有否定斷言。 我們將使用“not”關鍵字添加到斷言語句的前綴。 讓我們看一個否定斷言的例子

cy.get('#loading').should('not.be.visible')

僅在驗證特定條件在應用程序執行特定操作後不再可用的情況下才建議使用否定斷言。

例如,讓我們考慮檢查一個切換並驗證它已被刪除

// 首先項目被標記為完成 cy.contains('li.todo', 'Write tests') .should('have.class', 'completed') .find('.toggle') .click() / / CSS 類已被刪除 cy.contains('li.todo', 'Write tests').should('not.have.class', 'completed')

賽普拉斯自定義斷言消息

借助賽普拉斯,我們可以使用匹配器庫為斷言提供附加信息或自定義消息。 匹配器由區分值的小函數組成,並會拋出詳細的錯誤消息。 灣仔 斷言庫將幫助我們的代碼看起來更具可讀性和測試失敗非常有用

const expect = require('chai').expect it('檢查一個數字', () => { const value = 10 const expected = 3 expect(value).to.equal(expected) })
賽普拉斯自定義錯誤消息

賽普拉斯斷言最佳實踐

我們可以使用一系列命令在單個塊中編寫多個斷言。 沒有必要像在單元測試中那樣編寫單個斷言。 許多人寫斷言如下。 以這種方式編寫是可以的,但它增加了代碼行和冗餘。

describe('my form', () => { before(() => { cy.visit('/users/new') cy.get('#first').type('ashok') }) it( 'has validation attribute', () => { cy.get('#first').should('have.attr', 'data-validation', 'required') // 斷言#first 是否有必填字段 } ) it('has active class', () => { cy.get('#first').should('have.class', 'active') // 斷言#first 是否有活動類 }) it( 'has formatted first name', () => { cy.get('#first').should('have.value', 'Ashok') // 斷言 #first 是否將首字母大寫 }) })

正如您在上面看到的,相同的選擇器和斷言類型正在重複。 相反,我們可以將這些命令鏈接到一個斷言中,該斷言以線性方式執行所有檢查。

describe('my form', () => { before(() => { cy.visit('/users/new') }) it('驗證並格式化名字', () => { cy.get ('#first') .type('ashok') .should('have.attr', 'data-validation', 'required') .and('have.class', 'active') .and('have .value', 'Ashok') }) })

如上所述,我們可以將單個選擇器與多個斷言鏈接起來! 這是在 Cypress 中編寫斷言的推薦最佳實踐之一。

要了解 Cypress 中的頁面對像模型,請單擊 這裡.

回到頁首