理解 Cypress 斷言


Cypress 有一系列通用的斷言,可以應用於瀏覽器上的任何元素。斷言是檢查點,用於確認自動化測試用例的測試步驟是透過還是失敗。因此,它檢查被測應用程式的預期狀態。

Cypress 整合了 Chai、JQuery 和 Sinon 庫用於斷言。一些斷言與元素及其父命令相關聯,不能用作獨立命令。例如,should()。

但是,也有一些斷言可以直接作用於元素,而不依賴於其他命令。例如,expect()。儘管 Cypress 提供了各種斷言,但在某些情況下,Cypress 會自動使用內建斷言,而無需顯式使用它們。

這些被稱為預設斷言。其中一些列在下面:

  • cy.visit() - 等待頁面顯示文字或 HTML,狀態碼為 200。

  • cy.request() - 等待遠端伺服器出現並給出響應。

  • cy.contains() - 等待 DOM 中出現包含指定內容的元素。

  • cy.get() - 等待 DOM 中出現該元素。

  • .find() - 等待 DOM 中出現該元素。

  • .type() - 等待元素處於可輸入狀態。

  • .click() - 等待元素處於可點選狀態。

  • .its() - 等待元素在當前主題上查詢屬性。

一些非常常見的斷言列在下面:

  • 長度 - 驗證先前鏈式命令返回的元素數量。

cy.get('.product').should('have.length',1);
  • 值 - 驗證元素是否具有特定值。

cy.get('.input-txt').should('have.value', 'Tutorialspoint');
  • 類 - 驗證元素是否包含或不包含指定的類。

cy.get('#tutor').find('a').should('have.class', 'enabled');
  • 文字內容 - 驗證元素是否具有特定文字。

cy.get('.input-txt').parent('div').should('contain', 'Tutorialspoint');
  • 可見性 - 驗證元素是否可見。

cy.get('submit').should('be.visible');
  • 存在性 - 驗證元素是否存在於 DOM 中。

cy.get('#gsc-id').should('not.exist');
  • CSS - 驗證元素的 CSS 屬性。

cy.get('.text-area').should('have.css', 'text-highlight');

示例

包含斷言的程式碼實現。

// test suite
describe('Tutorialspoint Test', function () {
   // test case
   it('Test Case1', function (){
      // test step to launch a URL
      cy.visit("https://tutorialspoint.tw/videotutorials/index.php");
      // enter test in the edit box
      cy.get("#search-strings").type("Java");
      // wait for some time
      cy.wait(3000);
      // assertion to validate the number of search results
      cy.get('.clsHeadQuestion'). should('have.length',19);
   });
});

更新於:2020年8月5日

534 次瀏覽

啟動您的 職業生涯

完成課程獲得認證

開始學習
廣告