# 端到端测试(E2E)

端到端测试是一种自动化测试方式，用于测试一个系统的完整流程，从用户界面到后端系统，确保所有组件和系统都能够正确地协同工作。它模拟用户的真实行为，包括用户输入和系统响应，测试整个系统的交互、一致性和可靠性。

端到端测试的目的是确保系统在用户层面上的功能和可用性。它通常包括以下步骤：

模拟用户操作：通过模拟用户的操作，测试系统在用户界面上的响应和交互是否正确。
测试系统功能：测试系统的各项功能是否按照预期运作，包括输入数据、处理逻辑和输出结果。
验证数据一致性：测试数据在不同组件和系统之间的传输和存储是否一致。
测试系统可靠性：测试系统的鲁棒性和稳定性，例如测试系统在负载高峰时的表现。
环境模拟：测试系统在不同环境下的表现，例如测试系统在生产环境和开发环境的表现是否一致。
监控和报告：监控测试结果，及时发现和报告问题，并跟踪问题的解决情况。

前端端到端测试使用的库有很多，以下是几个比较流行的：

Cypress：一个基于 Electron 构建的自动化端到端测试框架，它使用了最新的 Web 技术，提供了简单易用的 API，支持跨浏览器自动化测试。
Puppeteer：Google 出品的基于 Node.js 的端到端测试库，提供了一个高级的 API，可以让你控制 Chrome 或 Chromium 浏览器的行为，支持各种自定义操作。
TestCafe：另一个基于 Node.js 的自动化测试框架，使用了无头浏览器和真实浏览器结合的方式来执行测试，支持并行测试和分布式测试。
Nightwatch.js：一个使用 Node.js 编写的端到端测试框架，基于 Selenium WebDriver，并且提供了易于使用的 API 和内置的断言库。
Playwright：一个由 Microsoft 开发的自动化测试库，支持 Chromium、Firefox 和 WebKit 三种浏览器，提供了简单易用的 API 和一些方便的工具。

# Cypress 实例

接下来我们使用Cypress来测试一个简单的计算器应用程序。

首先，在你的项目中安装 Cypress，可以使用以下命令：

npm install cypress --save-dev
成功

然后在你的项目根目录下创建 cypress/integration 目录，并创建一个新的测试文件 calculator.spec.js，添加以下代码：

describe('Calculator App', () => {
  it('performs addition', () => {
    cy.visit('http://localhost:3000')

    cy.get('button[value="1"]').click()
    cy.get('button[value="+"]').click()
    cy.get('button[value="2"]').click()
    cy.get('button[value="="]').click()

    cy.get('.result').should('have.text', '3')
  })

  it('performs subtraction', () => {
    cy.visit('http://localhost:3000')

    cy.get('button[value="5"]').click()
    cy.get('button[value="-"]').click()
    cy.get('button[value="3"]').click()
    cy.get('button[value="="]').click()

    cy.get('.result').should('have.text', '2')
  })
})

成功

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

以上测试用例包含两个测试，一个测试加法，一个测试减法。在每个测试中，我们使用 cy.visit 命令访问我们的应用程序，并使用 cy.get 命令选择按钮并模拟单击。然后，我们使用 cy.get 命令获取结果元素，并使用 should 断言结果是否正确。

在你的项目中启动你的应用程序，并使用以下命令运行 Cypress 测试：

npx cypress run
成功

或者在 GUI 模式下运行：

npx cypress open
成功

这将打开 Cypress GUI，你可以在其中运行测试并查看测试结果。

当然，这只是一个简单的示例。在实际项目中，测试用例可能会更加复杂，并涉及到许多其他的测试场景。

← 集成测试简介 →