Angular Academy · 课时

端到端测试概览

Q: 「端到端测试概览」这节课中我会学到什么？

了解端到端测试的作用 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

了解端到端测试的作用

端到端测试概览 是 CoddyKit 上的免费 Angular Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Angular Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。

端到端测试的含义

端到端（E2E）测试会按照真实用户的方式操作应用：在真实浏览器中启动应用、浏览页面、点击按钮、在表单中输入内容，并断言页面上可见的内容。它验证整个技术栈是否协同工作，而不只是验证某个单元。

测试金字塔

健康的测试套件应包含大量快速的单元测试、较少的集成测试，以及少量运行缓慢但价值很高的E2E 测试。E2E 位于顶层：每个测试带来的覆盖范围最大，但运行和维护成本也最高。

单元：独立测试一个函数或组件
集成：将多个单元组合起来测试
E2E：端到端测试正在运行的应用

E2E 能捕获而单元测试无法发现的问题

E2E 测试可以发现只有真实部分连接起来时才会出现的问题：路由错误、API 集成失效、部署后 DOM 缺失、CSS 隐藏按钮，或身份验证重定向循环。使用模拟依赖的单元测试可能全部通过，而真实应用却已经损坏。

Angular 与 E2E 的历史

较早版本的 Angular 使用 Protractor 进行 E2E 测试。Protractor 后来被弃用，也不再包含在新项目中。如今，Angular CLI 允许您选择第三方 E2E 运行器；最受欢迎的选择是 Playwright 和 Cypress。

为什么选择 Playwright

Playwright 是 Microsoft 推出的现代快速 E2E 框架。它可以驱动 Chromium、Firefox 和 WebKit，会自动等待元素，在全新的浏览器上下文中隔离测试，并提供出色的调试工具。本课程使用 Playwright。

将 Playwright 添加到 Angular

您可以使用 Playwright 自带的安装程序搭建项目。它会创建 playwright.config.ts 和一个示例测试文件夹。

npm init playwright@latest
# creates playwright.config.ts and tests/ with example specs

E2E 测试的构成

E2E 测试会启动应用，执行用户操作，并对页面进行断言。流程是：准备（导航）、执行（交互）、断言（验证可见结果）。

import { test, expect } from '@playwright/test';

test('home shows title', async ({ page }) => {
  await page.goto('/');
  await expect(page.getByRole('heading')).toHaveText('Welcome');
});

E2E 针对真实服务器运行

E2E 需要实际运行 Angular 应用。通常，配置会启动 ng serve（或提供生产构建），并通过 baseURL 和 webServer 条目，让测试指向该网址。

// playwright.config.ts
export default {
  use: { baseURL: 'http://localhost:4200' },
  webServer: { command: 'ng serve', url: 'http://localhost:4200', reuseExistingServer: true },
};

保持 E2E 测试套件小而关键

由于 E2E 测试运行缓慢且可能不稳定，请只覆盖关键用户流程：登录、结账以及主要的顺利流程。将详细的边界情况交给单元测试和集成测试处理，这些测试运行更快，也更可靠。

不稳定性与确定性

E2E 最大的挑战是不稳定性，即测试间歇性失败。请避免固定的 sleep 延迟，依赖 Playwright 自动等待的断言。请控制测试数据，确保每次运行都从已知状态开始。

E2E 与组件测试

Angular 组件测试（TestBed）会在模拟环境中检查组件。E2E 则在真实浏览器中检查已部署的应用。两者相辅相成：使用 TestBed 快速检查逻辑和 DOM，使用 E2E 确认整个产品能够正常工作。

快速检查

E2E 测试与单元测试有何不同？

回顾

E2E 测试会在真实浏览器中运行整个应用，从而发现单元测试无法捕获的集成和路由错误。它们位于测试金字塔顶层：数量少、运行慢，但价值高。如今 Angular 项目使用 Playwright 等运行器来启动服务器并驱动关键用户流程。

常见问题解答

「端到端测试概览」课时是免费的吗？

是的 — 「端到端测试概览」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。

「端到端测试概览」这节课中我会学到什么？

了解端到端测试的作用你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Angular Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「端到端测试概览」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Angular Academy 课中编写并运行代码吗？

能。每节 Angular Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Angular Academy