JavaScript 应用的端到端测试：从混乱到自信

为什么“手动点击”不再有效？

想象一下：你完成了一个功能，在编辑器中点击“运行”，浏览器中一切看起来完美。你发布到生产环境。一小时后——恐慌：注册表单崩溃了，因为有人不小心修改了 CSS 类，而你的同事没有注意到。熟悉吗？如果你用 JavaScript 编写代码，并在后端使用 Python，你很可能遇到过这样的情况：JavaScript 应用的端到端测试本可以拯救你的夜晚。

端到端 (E2E) 测试不是奢侈品，而是任何严肃项目的基本卫生习惯。它们模拟真实用户的操作：点击、数据输入、滚动、检查服务器响应。是的，它们适用于你的技术栈——无论是 React、Vue、Angular 还是纯 JS。

在本文中，我们将探讨如何无痛地实施Web 应用的端到端测试，使用现代工具。你将看到 JavaScript 的真实代码示例，了解如何让 E2E 测试与 Python 后端协同工作，并获得一份实施清单。我们开始吧！

什么是 E2E 测试，为什么你需要它？

E2E 测试（端到端测试）是从头到尾检查整个用户路径的过程。例如：打开网站 → 查找商品 → 加入购物车 → 下订单 → 检查邮箱是否收到邮件。

与单元测试（检查单个函数）或集成测试（检查两个模块的连接）不同，JavaScript 端到端测试检查整个系统——前端、后端、数据库、外部 API。

何时特别需要 E2E 测试

\n
• 你正在将旧代码重写为新框架。
\n
• 你拥有微服务架构 + Python 后端。
\n
• 你频繁发布版本，担心回归问题。
\n
• 客户抱怨“故障”，但本地无法重现。
\n

没有 E2E 测试，你可能会从用户那里得知 Bug。有了 E2E 测试，你会在部署前一分钟发现它。

选择工具：Playwright vs Cypress

市场上用于JavaScript 测试自动化的两个主要工具：Playwright（来自 Microsoft）和 Cypress（来自同名公司）。两者都很强大，但各有特点。

Playwright

\n
• 支持所有浏览器：Chromium、Firefox、WebKit (Safari)。
\n
• 支持 iframe、标签页、多页面操作。
\n
• 可用 JS/TS、Python、C#、Java 编写。
\n
• 非常适合复杂场景：文件上传、网络请求拦截、移动设备模拟。
\n

Cypress

\n
• 语法更简单，内置仪表板。
\n
• 仅支持 Chromium（Firefox 为实验性）。
\n
• 不支持打开多个标签页。
\n
• 适合小型项目和快速入门。
\n

本文我们选择 Playwright，因为它更接近 Python 开发者（有官方 Python API），并且覆盖 99% 的场景。但我们也会展示 Cypress 的示例。

用 Playwright (JavaScript) 编写第一个 E2E 测试

安装很简单：

npm init -y\nnpm install @playwright/test\nnpx playwright install

现在创建一个文件 tests/example.spec.js。假设我们测试网站 pythonlib.ru 的登录页面（是的，这是一个虚构的例子，但逻辑是真实的）。

const { test, expect } = require('@playwright/test');\n\ntest('用户能够登录系统', async ({ page }) => {\n  // 1. 打开登录页面\n  await page.goto('https://pythonlib.ru/login');\n\n  // 2. 填写字段\n  await page.fill('#email', 'test@example.com');\n  await page.fill('#password', 'securePassword123');\n\n  // 3. 点击“登录”按钮\n  await page.click('button[type="submit"]');\n\n  // 4. 等待重定向到仪表板\n  await page.waitForURL('**/dashboard');\n\n  // 5. 检查