面向初学者的端到端测试简介-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');
    });
});

登录后复制

在此测试中：