TypeScript E2E测试：开发者完整指南

您的应用能正常工作吗？用TypeScript E2E测试来证明

您是否听过这样的话：“我们一切正常，都是手动测试的”？然后第二天，生产环境就崩溃了？很熟悉，对吧？手动测试就像用咖啡渣占卜。您永远不知道，是否会按到那个破坏用户完整流程的按钮。

基于TypeScript的E2E（端到端）测试就像是您的数字QA工程师，它不睡觉、不喝咖啡，并且24/7检查每一个按钮。在本文中，我们不仅会告诉您什么是E2E测试。我们将一起编写它们：从安装到实际的CI/CD流水线。系好安全带，这将既刺激又实用！

为什么选择TypeScript进行E2E测试？

乍一看，E2E测试可以用任何语言编写：JavaScript、Python，甚至Java（但我们还是别谈伤心事了）。然而，TypeScript为您提供了超能力——静态类型检查。您将不再在运行时遇到像Cannot read property 'click' of undefined这样的错误。您的IDE会在测试运行之前就高亮显示错误。

另外，如果您的应用是用TypeScript编写的（如今90%的团队都这样做），那么用同一种语言编写测试是合乎逻辑的。您使用相同的类型、相同的接口、相同的工具。这降低了认知负荷并加快了开发速度。

选择工具：Playwright vs Cypress

TypeScript的E2E工具市场不大，但有两位明显的领导者：Cypress和Playwright。我们将使用Playwright。为什么？

• 开箱即用的多浏览器支持：Chromium、Firefox、WebKit（Safari）。Cypress目前还不能很好地支持Safari。
• 速度：Playwright通过DevTools协议工作，而不是通过代理服务器，这使得测试更快。
• 处理iframe和标签页：Playwright对处理多个标签页或跨域iframe没有限制。
• TypeScript优先：Playwright本身是用TypeScript编写的，并完全支持它。

但如果您是新手，Cypress可能更容易上手。选择权在您手中。我们将使用Playwright投入战斗。

项目安装与配置

让我们创建一个新项目并安装Playwright。打开终端并执行：

mkdir e2e-typescript-guidecd e2e-typescript-guidenpm init -ynpm install @playwright/testnpx playwright install

最后一条命令将下载浏览器（Chromium、Firefox、WebKit）。这需要几分钟时间——去喝杯咖啡吧。

在项目根目录创建文件playwright.config.ts：

import { defineConfig } from '@playwright/test';

export default defineConfig({  testDir: './tests',  fullyParallel: true,  retries: 1,  use: {    baseURL: 'http://localhost:3000',    trace: 'on-first-retry',  },  projects: [    {      name: 'chromium',      use: { browserName: 'chromium' },    },  ],});

我们配置了基础URL（请替换为您应用的地址），启用了用于调试的追踪功能，并指定测试将放在tests文件夹中。

编写第一个TypeScript E2E测试

创建tests文件夹和文件login.spec.ts。假设我们有一个简单的登录表单。

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

test.describe('用户登录', () => {  test('使用正确凭据成功登录', async ({ page }) => {    // 步骤1：打开登录页面    await page.goto('/login');

    // 步骤2：填写字段    await page.getByLabel('邮箱').fill('user@example.com');    await page.getByLabel('密码').fill('securepassword123');

    // 步骤3：点击“登录”按钮    await page.getByRole('button', { name: '登录' }).click();

    // 步骤4：等待重定向到仪表板    awai