端到端测试
使用端到端测试验证完整的用户流程
端到端测试 是 CoddyKit 上的免费 Vue Academy 课时。 这是第 3 节课，共 3 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 3 节课。
像用户一样进行测试
端到端测试会在真实浏览器中驱动真实应用，完全按照用户的操作方式点击按钮和填写表单。它可以验证从用户界面到后端的一切是否协同工作。
为什么要进行端到端测试
单元测试会隔离检查各个部分，但只有端到端测试才能确认完整流程：用户可以登录、导航、提交表单并看到结果。它们能够发现其他测试都无法发现的集成缺口。
安装 Cypress
Cypress 是一种常用的端到端测试框架，带有交互式测试运行器。请将它安装为开发依赖，然后打开其运行器。
npm install -D cypress
npx cypress openCypress 测试结构
Cypress 测试使用 describe 将测试分组，并使用 it 表示每个场景，这与熟悉的测试语法相似。
describe("Login flow", () => {
it("logs in a user", () => {
// steps go here
})
})访问页面
使用 cy.visit 在浏览器中加载 URL，这是大多数测试的起点。
cy.visit("http://localhost:5173/login")查找元素
cy.get 使用 CSS 选择器选择元素。Cypress 会自动等待元素出现，从而减少不稳定的测试。
cy.get("input[name=email]")
cy.get("button[type=submit]")在输入框中输入
在选中的输入框上链式调用 type，模拟键盘输入。
cy.get("input[name=email]").type("user@example.com")
cy.get("input[name=password]").type("secret123")点击元素
使用 click 与按钮和链接交互，就像用户操作一样。
cy.get("button[type=submit]").click()断言结果
交互之后，使用 should 断言用户此时应看到的内容。Cypress 会不断重试断言，直到通过或超时。
cy.url().should("include", "/dashboard")
cy.contains("Welcome back").should("be.visible")完整的端到端测试
将这些步骤组合起来，就能对真实用户流程进行清晰易读的测试。
describe("Login flow", () => {
it("logs in successfully", () => {
cy.visit("/login")
cy.get("input[name=email]").type("user@example.com")
cy.get("input[name=password]").type("secret123")
cy.get("button[type=submit]").click()
cy.url().should("include", "/dashboard")
})
})Playwright 替代方案
Playwright 是另一个功能强大的端到端工具，具有相似的概念：它会启动浏览器、进行导航、执行交互并进行断言。虽然接口有所不同，但测试思路是相同的。
// Playwright style
// await page.goto("/login")
// await page.fill("input[name=email]", "user@example.com")
// await page.click("button[type=submit]")
// await expect(page).toHaveURL(/dashboard/)快速检查
检验您对端到端测试的掌握情况。
回顾
端到端测试会在浏览器中驱动真实应用。借助 Cypress，使用 describe/it 组织测试，通过 cy.visit 加载页面，使用 cy.get 查找元素，通过 type 和 click 进行交互，并使用 should 验证结果。Playwright 遵循相同的理念。接下来您将优化并发布构建产物。
常见问题解答
「端到端测试」课时是免费的吗？
是的 — 「端到端测试」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 3 节课。
「端到端测试」这节课中我会学到什么？
使用端到端测试验证完整的用户流程 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Vue Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 3 节。
「端到端测试」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Vue Academy 课中编写并运行代码吗？
能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。