初學者的端到端測試簡介-js教程-PHP中文網

Introduction to End-to-End Testing for Beginners

介紹

端到端 (E2E) 測試是軟體開發生命週期的重要方面，可確保您的應用程式從開始到結束都正常運作。對於初學者來說，了解端到端測試的基礎知識可能會讓人不知所措，但這是交付高品質、可靠的軟體的基本技能。在這篇文章中，我們將探討什麼是端到端測試、為什麼它很重要，以及如何使用流行的工具和最佳實踐來開始使用它。

什麼是端到端測試？

端到端測試是一種模擬真實使用者場景來驗證應用程式功能和效能的測試。它涉及測試整個應用程式流程，從使用者介面 (UI) 到後端服務，確保所有元件無縫協作。

為什麼端對端測試很重要？

全面覆蓋：端到端測試涵蓋整個應用程式工作流程，發現其他類型的測試（單元或整合）可能遺漏的問題。
使用者體驗：確保應用程式從使用者的角度來看按照預期運行，提供流暢且無錯誤的體驗。
防止迴歸：識別新程式碼變更引入的迴歸或錯誤，確保現有功能保持不變。
對發布的信心：確保應用程式按預期工作，從而實現更頻繁、更可靠的發布

端對端測試的關鍵概念

測試場景：使用者執行的一系列操作，例如登入、將商品加入購物車以及結帳。
測試案例：具有定義的輸入和預期輸出的測試場景的特定實例。
測試套件：驗證應用程式不同方面的測試案例集合。
測試自動化：使用工具自動化執行測試案例，提高效率和可重複性。

開始進行端對端測試

要開始進行端到端測試，您需要選擇適合您需求的測試框架和工具。受歡迎的 E2E 測試工具包括 Cypress、Selenium 和 Playwright。在本指南中，我們將重點放在 Cypress，因為它簡單且功能強大。

第 1 步：安裝 Cypress
首先，在您的專案中安裝 Cypress 作為開發依賴項：

npm install cypress --save-dev

登入後複製

第 2 步：設定 Cypress
透過執行以下命令開啟 Cypress Test Runner：

npx cypress open

登入後複製

這將在您的專案中建立一個帶有預設配置和範例測試的 cypress 資料夾。如果需要，您可以在 cypress.json 檔案中自訂配置。

第 3 步：建立測試檔案
在 cypress/e2e 目錄中，建立一個新的測試文件，例如 e2e-test.spec.js。該文件將包含您的 E2E 測試。

編寫您的第一個端對端測試

讓我們寫一個簡單的 E2E 測試來驗證應用程式的登入功能。

範例：測試登入功能

假設我們有一個包含使用者名稱和密碼輸入的登入頁面。以下是我們如何使用 Cypress 進行測試：

describe('Login Functionality', () => {
    beforeEach(() => {
        cy.visit('/login');
    });

    it('should display the login form', () => {
        cy.get('input[name="username"]').should('be.visible');
        cy.get('input[name="password"]').should('be.visible');
        cy.get('button[type="submit"]').should('be.visible');
    });

    it('should login successfully with valid credentials', () => {
        cy.get('input[name="username"]').type('testuser');
        cy.get('input[name="password"]').type('password123');
        cy.get('button[type="submit"]').click();
        cy.url().should('include', '/dashboard');
    });

    it('should show an error message for invalid credentials', () => {
        cy.get('input[name="username"]').type('invaliduser');
        cy.get('input[name="password"]').type('wrongpassword');
        cy.get('button[type="submit"]').click();
        cy.get('.error-message').should('be.visible').and('contain', 'Invalid credentials');
    });
});

登入後複製

在這些測試中：

cy.visit('/login'): 導覽至登入頁面。
cy.get(): 透過屬性或文字內容選擇元素。
cy.should('be.visible'): 斷言元素可見。
cy.type(): 模擬在輸入欄位中輸入內容。
cy.click(): 模擬點選按鈕。
cy.url().should('include', '/dashboard'): 成功登入後斷言 URL 包含 /dashboard。
cy.get('.error-message').should('be.visible'): 斷言無效憑證的錯誤訊息可見。

進階測試場景

測試完整的使用者流程
讓我們測試一個完整的使用者流程，例如將商品加入購物車並結帳。

describe('E-Commerce User Flow', () => {
    beforeEach(() => {
        cy.visit('/');
    });

    it('should allow a user to add an item to the cart and checkout', () => {
        cy.get('.product-list').find('.product').first().click();
        cy.get('button.add-to-cart').click();
        cy.get('.cart').click();
        cy.get('button.checkout').click();
        cy.url().should('include', '/checkout');
        cy.get('input[name="address"]').type('123 Main St');
        cy.get('button.place-order').click();
        cy.url().should('include', '/order-confirmation');
        cy.get('.order-summary').should('be.visible');
    });
});

登入後複製

在此測試中：