PricingLoginStart free
TypeScript Academy · 课时

端到端类型概览（Playwright/Cypress）

了解 TypeScript 类型如何在 Playwright 和 Cypress 的端到端测试中流动；添加正确的类型支持和安全的选择器。

第 3 / 3 课8 个步骤

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

简介

目标：了解 TypeScript 如何增强端到端测试。我们将为 Playwright 和 Cypress 配置类型，并编写小型的类型安全测试。

安装 Playwright

Playwright 自带测试运行器和类型。请从 @playwright/test 导入，以获得带类型的测试、断言和页面。

npm install --save-dev @playwright/test

Playwright 测试

在 Playwright 中，页面和定位器类型都很完善；错误用法会在编译时被发现。

// example.spec.ts
import { test, expect } from "@playwright/test";

test("home loads", async ({ page }) => {
  await page.goto("/")
  const title = page.getByRole("heading", { name: /welcome/i })
  await expect(title).toBeVisible()
  // page is fully typed: URL, locators, assertions
})

Cypress 类型

对于 Cypress 全局类型，请将 types: ["cypress"] 添加到 tsconfig，或在支持文件中添加引用。

// tsconfig.json (excerpt)
{
  "compilerOptions": {
    "types": ["cypress"]
  }
}

// or in cypress/support/e2e.d.ts
/// <reference types="cypress" />

Cypress 测试

cy 命令链、断言链和插件命令都带有 TS 类型；IDE 建议会更加清晰。

// cypress/e2e/home.cy.ts
describe("home", () => {
  it("loads", () => {
    cy.visit("/")
    cy.findByRole("heading", { name: /welcome/i }).should("be.visible")
  })
})

选择器辅助函数

基于 data-testid 的辅助函数比脆弱的 CSS/XPath 选择器更稳定，并且能借助 TS 提供便捷的自动补全。

// helpers/selectors.ts
export const h = {
  title: (name: string) => `[data-testid="title-${name}"]`,
}

// usage (Playwright)
// await expect(page.locator(h.title("home"))).toBeVisible()

// usage (Cypress)
// cy.get(h.title("home")).should("be.visible")

Cypress 类型检查

快速检查：如何在 TS 中启用 Cypress 全局类型（cy、Cypress）？

在交互式课程中回答

回顾

回顾：Playwright 和 Cypress 通过 TS 提供完善的类型。正确的配置加上安全的选择器，可以让端到端测试更加可靠。

免费开始

用 AI 导师学习 TypeScript — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程
101
课程
352
免费开始学习查看完整课程

常见问题解答

「端到端类型概览（Playwright/Cypress）」课时是免费的吗？

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

「端到端类型概览（Playwright/Cypress）」这节课中我会学到什么？

了解 TypeScript 类型如何在 Playwright 和 Cypress 的端到端测试中流动；添加正确的类型支持和安全的选择器。 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 TypeScript Academy 需要有经验吗？

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

「端到端类型概览（Playwright/Cypress）」课时需要多长时间？

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

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

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

此课程中的所有课时

  1. 为 TS 配置 Vitest/Jest
  2. 测试与模拟的类型；expectTypeOf
  3. 端到端类型概览（Playwright/Cypress）
← 返回 TypeScript Academy