在這篇博客中，我們將探索更多關(guān)于在不同場(chǎng)景下使用 Angular 中的 cypress 進(jìn)行自動(dòng)化測(cè)試的信息。在繼續(xù)學(xué)習(xí)本教程之前，了解測(cè)試 Angular 應(yīng)用程序的基礎(chǔ)知識(shí)會(huì)對(duì)您有所幫助。為此，您可以訪(fǎng)問(wèn)Angular Cypress 示例教程第 1 部分。

上一個(gè)教程涵蓋了基本設(shè)置和一些測(cè)試場(chǎng)景。今天我們將學(xué)習(xí)一些高級(jí)測(cè)試示例。

那么，讓我們開(kāi)始我們的博客吧。

教程目標(biāo)：Angular Cypress 示例

基本設(shè)置

克隆存儲(chǔ)庫(kù)：angular-cypress-example并按照這些命令在您的系統(tǒng)中設(shè)置項(xiàng)目。

打開(kāi)終端并運(yùn)行以下命令。

git 克隆 https://github.com/bacancy-parthsardhara/cypress-testing-angular.gitcd cypress-testing-angulargit checkout 柏樹(shù)測(cè)試npm 安裝ng s -onpm run cypress:open // chrome 自動(dòng)瀏覽器
            或者npm run cypress:run // 終端

完成后，系統(tǒng)會(huì)提示您，如下所示。

我們完成了設(shè)置。讓我們繼續(xù)探索角柏示例。

Angular App 中的自動(dòng)化測(cè)試入門(mén)

我們將為注冊(cè)頁(yè)面編寫(xiě)自動(dòng)化測(cè)試用例。在這種情況下，我們將創(chuàng)建一個(gè)名為 registration.ts 的文件，位于路徑cypress-testing\cypress\integration中，它也是spec.ts文件的同級(jí)文件。

創(chuàng)建注冊(cè)文件后，您將在 cypress 中看到該文件，如下所示。

第一個(gè)測(cè)試用例

截至目前，我們?cè)?registration.ts 文件中沒(méi)有任何內(nèi)容，所以讓我們按照我們?yōu)樵撐募械牡卿涰?yè)面所做的方式編寫(xiě)一個(gè)測(cè)試用例，如下面的代碼。

我們的第一個(gè)測(cè)試用例是“'應(yīng)該訪(fǎng)問(wèn)注冊(cè)頁(yè)面'”

describe('注冊(cè)頁(yè)面測(cè)試用例', () => {
    it('應(yīng)該訪(fǎng)問(wèn)注冊(cè)頁(yè)面', () => {
      cy.visit('/注冊(cè)');
      cy.url().should('包含', '注冊(cè)');
      cy.get('#registrationFormTitle').should('be.visible');
      cy.get('#registrationFormTitle').should('have.text', 'Registration Form');
      cy.get('#registrationFormEmailInputValue').should('not.exist');
      cy.get('#registrationFormPasswordInputValue').should('not.exist');
    })
  })

輸出
現(xiàn)在，如果您在 cypress runner 中單擊注冊(cè)，您將看到如下圖所示的輸出。

首先，我們使用visit()方法訪(fǎng)問(wèn)特定的 URL，然后使用url()和should()方法檢查 cypress 斷言。后來(lái)，我們檢查了表單標(biāo)題的值。

您是否正在為您的項(xiàng)目尋找精通 Angular 的開(kāi)發(fā)人員？
Bacancy 在這里等你！立即聯(lián)系我們并聘請(qǐng)Angular 開(kāi)發(fā)人員來(lái)構(gòu)建、優(yōu)化和部署您的應(yīng)用程序。

第二個(gè)測(cè)試用例

接下來(lái)，我們將檢查電子郵件 ID，確保它是必需的，并闡明正確的驗(yàn)證錯(cuò)誤消息。

首先，我們需要為每個(gè)地方提供一個(gè) ID 以獲取特定元素。例如，我們?cè)陔娮余]件輸入字段的registration.html文件中有以下代碼。

要訪(fǎng)問(wèn)“需要電子郵件”，我們將需要該特定標(biāo)簽的 ID。因此，為這兩個(gè)錯(cuò)誤定義一個(gè) ID，如下所示。我們將使用這些 ID。

• id=”registrationFormEmailInputErrorRequired”

• id=”registrationFormEmailInputErrorInvalid”

現(xiàn)在讓我們編寫(xiě)測(cè)試用例，它首先關(guān)注電子郵件輸入字段，然后在不輸入任何值的情況下關(guān)注密碼選項(xiàng)卡，由于我們的代碼，它應(yīng)該在瀏覽器上顯示下面的錯(cuò)誤消息。

為此，我們?cè)?cypress 中有一個(gè)focus()方法來(lái)關(guān)注任何領(lǐng)域。在這里，我們的首要任務(wù)是專(zhuān)注于電子郵件，其次是密碼，這將顯示一條錯(cuò)誤消息。

it('應(yīng)該輸入有效的電子郵件和密碼并重定向到儀表板', () => {
    cy.visit('/注冊(cè)');
    cy.url().should('包含', '注冊(cè)');
    cy.get('#registrationFormEmailInput').focus();
    cy.get('#registrationFormPasswordInput').focus();
    cy.get('#registrationFormEmailInputErrorRequired').should('be.visible');
    cy.get('#registrationFormEmailInputErrorInvalid').should('be.visible');})

它看起來(lái)像這樣。

輸出
使用上面的代碼，如果我們檢查 chrome automation cypress，我們將看到下面的輸出，它清楚地顯示了錯(cuò)誤。

第三個(gè)測(cè)試用例

如果我們給出正確的輸入會(huì)發(fā)生什么？賽普拉斯會(huì)消除那些紅色錯(cuò)誤嗎？讓我們來(lái)看看

確保您已使用 .skip 跳過(guò)前兩個(gè)測(cè)試用例以繼續(xù)執(zhí)行第三個(gè)測(cè)試用例。

it('應(yīng)該輸入有效的電子郵件并隱藏錯(cuò)誤行', () => {
    cy.visit('/注冊(cè)');
    cy.url().should('包含', '注冊(cè)');
    cy.get('#registrationFormEmailInput').focus();
    cy.get('#registrationFormPasswordInput').focus();
    cy.get('#registrationFormEmailInput').type( 'parth@gmail.com ');
    cy.get('#registrationFormEmailInputErrorRequired').should('not.exist');
    cy.get('#registrationFormEmailInputErrorInvalid').should('not.exist');})

完成后，文件將如下所示。

輸出
您可以在輸出中看到電子郵件字段的驗(yàn)證錯(cuò)誤已被刪除，因?yàn)檩斎胛谋九c驗(yàn)證模式匹配。

第四個(gè)測(cè)試用例

在我們編寫(xiě)第四個(gè)測(cè)試用例之前，讓我向您介紹一個(gè)名為 cy.wait() 的 cypress 方法，它將等待一段時(shí)間并執(zhí)行下一件事。

cy.wait(毫秒值);

例子：-等待（2000）; // 它將等待 2 秒。

讓我們看看如何從下拉列表中選擇值。

同樣的方法可以使用 click() 方法選擇下拉值，然后從中選擇任意值。

使用下面的代碼片段編寫(xiě)用于選擇下拉值的測(cè)試用例。

it('應(yīng)該輸入有效的電子郵件并隱藏錯(cuò)誤行', () => {
    cy.visit('/注冊(cè)');
    cy.url().should('包含', '注冊(cè)');
    cy.get('#registrationFormLanguageSelect').select('英語(yǔ)');
    cy.wait(2000);
    cy.get('#registrationFormLanguageSelect').select('法語(yǔ)');})

注意：我們使用了 cy.wait() 方法很容易看到結(jié)果，首先選擇英語(yǔ)然后等待兩秒鐘，然后它會(huì)選擇法語(yǔ)。

最后一個(gè)測(cè)試用例

現(xiàn)在讓我們編寫(xiě)最后一個(gè)測(cè)試用例。這將輸入所有值，提交注冊(cè)頁(yè)面，并重定向到儀表板頁(yè)面。

it('應(yīng)該注冊(cè)記錄并重定向到儀表板頁(yè)面', () => {
    cy.visit('/注冊(cè)');
    cy.url().should('包含', '注冊(cè)');
    cy.get('#registrationFormNameInput').type('Parth Sardhara');
    cy.get('#registrationFormMobileNoInput').type('9876543211');
    cy.get('#registrationFormEmailInput').type( 'parth@gmail.com ');
    cy.get('#registrationFormPasswordInput').type(' Parth@123 ');
    cy.get('#registrationFormLanguageSelect').select('英語(yǔ)');
    cy.get('#registrationFormGenderMaleRadio').click();
    cy.get('#registrationFormSubmitButton').click();})

輸出
輸出將是這樣的。

其他提示和技巧

• 如果我們想跳過(guò)一個(gè)特定的測(cè)試用例，我們需要在它后面使用.skip，如下所示。

it('應(yīng)該訪(fǎng)問(wèn)注冊(cè)頁(yè)面', () => { ... }到it.skip('應(yīng)該訪(fǎng)問(wèn)注冊(cè)頁(yè)面', () => { ... }

• 如果我們只想運(yùn)行一個(gè)特定的測(cè)試用例，那么我們需要在它之后使用 .only ，如下圖所示。

it('應(yīng)該訪(fǎng)問(wèn)注冊(cè)頁(yè)面', () => { ... }到it.only('應(yīng)該訪(fǎng)問(wèn)注冊(cè)頁(yè)面', () => { ... }

結(jié)論

（言鼎科技）專(zhuān)做軟件開(kāi)發(fā),微信小程序,網(wǎng)站開(kāi)發(fā),軟件外包,手機(jī)APP開(kāi)發(fā)，歡迎資訊！