介紹

我們使用不同的技術(shù)構(gòu)建一個(gè)好的網(wǎng)站，例如 React、Angular 和其他現(xiàn)代技術(shù)。在測(cè)試方面，客戶希望進(jìn)行單元測(cè)試或端到端測(cè)試。因此，在今天的 Angular Cypress 示例中，您將學(xué)習(xí)如何在角度應(yīng)用程序中設(shè)置名為 CYPRESS 的端到端測(cè)試框架，并編寫一些基本測(cè)試用例。

什么是賽普拉斯？

Cypress 是一個(gè)用于網(wǎng)站測(cè)試的端到端自動(dòng)化測(cè)試框架。如果你的項(xiàng)目需要做自動(dòng)化測(cè)試，可以從cypress入手。JavaScript 的使用使賽普拉斯自動(dòng)化對(duì)開(kāi)發(fā)人員特別有吸引力。

教程目標(biāo)：使用 Angular 12 的 Cypress

在開(kāi)發(fā)應(yīng)用程序之前，讓我們看看我們將構(gòu)建什么。觀看下面的視頻以了解我們的演示應(yīng)用程序的外觀。Angular Cypress 示例：項(xiàng)目設(shè)置

在我們開(kāi)始我們的 angular cypress 示例并開(kāi)始編寫測(cè)試用例之前，我們將克隆存儲(chǔ)庫(kù)。存儲(chǔ)庫(kù)包含樣板文件，我們將在其中添加代碼以稍后測(cè)試應(yīng)用程序。如果您愿意，您也可以使用您的項(xiàng)目。

打開(kāi)終端并運(yùn)行以下命令以在本地系統(tǒng)中設(shè)置項(xiàng)目。

在 Angular 項(xiàng)目中安裝 Cypress

首先，我們需要在我們的應(yīng)用程序中添加 cypress，因此使用以下命令在我們的 master 分支中添加 cypress。

上面的命令將使用一些文件設(shè)置基本的必需配置，并創(chuàng)建一個(gè)sepc.ts文件作為樣本 cypress 測(cè)試文件。

檢查賽普拉斯測(cè)試用例

單擊spec.ts文件，它將運(yùn)行該文件的賽普拉斯測(cè)試用例。

共享規(guī)范成功/失敗報(bào)告

它將在終端中運(yùn)行并共享規(guī)范成功和失敗報(bào)告。

使用 Cypress 測(cè)試 Angular 應(yīng)用程序

我們現(xiàn)在將看到如何使用 cypress 及其方法編寫實(shí)際的 cypress 測(cè)試用例。所以我希望現(xiàn)在你對(duì)這個(gè)項(xiàng)目和柏樹的設(shè)置都很好，讓我們?cè)诎貥渖蟿?dòng)手吧。

在 cypress 中有多種方法可以訪問(wèn)應(yīng)用程序的特定 URL。我們可以選擇元素，例如我們?nèi)绾问褂?/span>文檔.getElementById方法并檢查斷言。

這類似于編寫規(guī)范的單元測(cè)試，就像我們需要編寫描述一樣，在其中，我們需要使用其方法編寫規(guī)范，如下所示。

describe('我的第一個(gè)測(cè)試', () =>{
  it('訪問(wèn)初始項(xiàng)目頁(yè)面', () =>{
    cy.visit('/')
    cy.contains（'歡迎'）
    cy.contains（'沙盒應(yīng)用程序正在運(yùn)行！'）
  })})

但是在這里，一件重要的事情是您不需要導(dǎo)入任何東西，例如服務(wù)或任何依賴項(xiàng)，我們通常在單元測(cè)試中這樣做。

Angular 中的單元測(cè)試可以參考之前的博客，對(duì)你很有幫助。使用 Jasmine 和 Karma 在 Angular 中進(jìn)行單元測(cè)試（第 1 部分）和在 Angular 中使用 Jasmine 和 Karma 進(jìn)行單元測(cè)試（第 2 部分）

我們將在我們的 cypress angular 示例中編寫以下兩個(gè)測(cè)試用例：

• 訪問(wèn)登錄頁(yè)面。

• 要輸入有效的電子郵件地址和密碼，稍后重定向到儀表板。

第一個(gè)測(cè)試用例：應(yīng)該訪問(wèn)登錄頁(yè)面

// 規(guī)格.tsdescribe( '我的第一個(gè)測(cè)試', () =>{
  it('應(yīng)該訪問(wèn)登錄頁(yè)面', ()={
    cy.visit('/登錄');
   cy.url().should('包含', '登錄')
    cy.get('#loginFormTitle').should ('be.visible');
    cy.get('#loginFormTitle').should ('have.text', '登錄表單');
  })})

如果我們修改上圖中提到的現(xiàn)有測(cè)試用例，并按照博客前面所述的那樣單擊 spec.ts，它將給出如下圖所示的輸出以及成功的測(cè)試用例。

? 我們?cè)跍y(cè)試用例中所寫的內(nèi)容是什么意思？

cy.visit('/登錄');

? 它將訪問(wèn)/重定向到給定的 URL。例如，cy.visit('/注冊(cè)');會(huì)自動(dòng)訪問(wèn)注冊(cè)頁(yè)面。

cy.url().should('包含', '登錄')

? 它將檢查應(yīng)該重定向該 URL 的頁(yè)面是否包含登錄作為關(guān)鍵字。例如，如果我們將使用cy.url().should('includes', 'login1');而不是提到的內(nèi)容，然后它會(huì)給出如下圖所示的錯(cuò)誤。然后它將停止執(zhí)行該規(guī)范。

cy.get('#loginFormTitle').should('be.visible');

• 使用cy.get()方法，我們可以按照訪問(wèn)它的方式獲取元素“document.getelementbyid(#id)”在 JS 中。

• 我們可以使用類、id 訪問(wèn)特定元素。更好的做法是僅使用 id 獲取元素。

• 我那個(gè)元素將在 DOM 中，然后它將是可見(jiàn)的，我們可以使用 should() 方法檢查它的柏樹斷言.should('be.visible');如果它在 dom 中不存在，那么我們可以使用.should('not.exist');例如，如何為下圖添加 not.exit。// 規(guī)格.tsdescribe('我的第一個(gè)測(cè)試', () =>{

 it('應(yīng)該訪問(wèn)登錄頁(yè)面', () =>{
    cy.visit('/登錄');
    cy.url().should('包括', '登錄');
    cy.get('#loginFormTitle').should('be.visible');
    cy.get('#loginFormTitle').should ('have.text', '登錄表單');
    cy.get('#loginFormEmailInputValue').should('not.exist');
    cy.get('#loginFormPasswordInputValue').should('not.exist');
 })});

第二個(gè)測(cè)試用例：應(yīng)輸入有效的電子郵件和密碼。重定向到儀表板

現(xiàn)在我們將在 angular cypress 示例中編寫我們的第二個(gè)測(cè)試用例，即輸入有效的電子郵件/密碼，然后將用戶重定向到儀表板。

// 規(guī)格.ts它應(yīng)該輸入有效的電子郵件和密碼并重定向到儀表板', ()>{
  cy.visit('/登錄');
  cy.url().should ('包含', '登錄');
  cy.get('#loginFormEmailInput').type('parthagmail.com);
  cy.get('#loginFormPasswordInput').type(' Parth@123 ');
  cy.get('#loginFormSubmitButton').click();
  cy.get('#loginFormEmailInputValue').should 'be.visible');
  cy.get ('#loginFormEmailInputValue').should( 'have.text', 'Email: parth@gmail.com ');
  cy.get ('#loginFormPasswordInputValue').should('be.visible');
  cy.get('#loginFormPasswordInputValue').should('have.text', '密碼: Parth@123 ');});

現(xiàn)在，既然你對(duì)這個(gè) type() 和 click() 方法非常熟悉，我就不需要解釋了，不是嗎？

Github 存儲(chǔ)庫(kù)：Cypress 和 Angular 教程

只需訪問(wèn)存儲(chǔ)庫(kù)下方并設(shè)置項(xiàng)目。

Github 源代碼：angular-cypress-example

git 克隆 https://github.com/bacancy-parthsardhara/cypress-testing-angular.gitcd cypress-testing-angularnpm 安裝ng s -o

結(jié)論

（言鼎科技）