理解 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); }); });
廣告