TypeScript + Playwright

现代浏览器自动化
从入门到精通

Playwright 是由 Microsoft 开源的下一代浏览器自动化框架。
TypeScript 是 Playwright 的原生语言，拥有最完整的类型提示和 API 支持。

了解核心原理 → 快速开始

// 为什么选择 Playwright + TypeScript

原生 TypeScript 支持的自动化框架

完整类型推导

Playwright 本身用 TypeScript 编写，提供一流的类型定义，编辑器智能提示和编译期错误检查。

⚙

自动等待机制

智能等待元素可操作后再执行动作，告别手动等待，代码更稳定可靠。

★

多浏览器支持

一套 API 同时支持 Chromium、Firefox 和 WebKit (Safari)，无需切换工具。

🔧

内置测试运行器

Playwright Test 是专为 E2E 设计的测试运行器，支持并行、重试、分片和 HTML 报告。

⇄

网络拦截

完整的网络请求拦截与 Mock 能力，轻松模拟任何 API 响应和网络状态。

📷

Trace Viewer

时间线回放调试工具，记录每一步操作的 DOM 快照、网络请求和控制台日志。

// 快速开始

三步上手 Playwright TypeScript

初始化项目

使用官方命令初始化 Playwright 项目，自动生成配置和示例文件。

terminal

npm init playwright@latest
# 或指定使用 TypeScript
npm init playwright@latest -- --lang=TypeScript

编写第一个测试

使用 Playwright Test 编写类型安全的端到端测试。

tests/example.spec.ts

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

test('页面标题验证', async ({ page }) => {
  await page.goto('https://playwright.dev');
  await expect(page).toHaveTitle(/Playwright/);
});

test('点击入门链接', async ({ page }) => {
  await page.goto('https://playwright.dev');
  await page.getByRole('link', { name: 'Get started' }).click();
  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});

运行测试

使用 Playwright Test Runner 运行，默认并行执行。

terminal

npx playwright test
# 带 UI 模式运行
npx playwright test --ui
# 查看 HTML 报告
npx playwright show-report

// 项目配置

playwright.config.ts 配置详解

Playwright Test 的核心配置文件，定义浏览器、超时、重试等运行参数。

playwright.config.ts

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

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,           // 完全并行执行
  forbidOnly: !!process.env.CI,    // CI 中禁止 .only
  retries: process.env.CI ? 2 : 0, // CI 中重试 2 次
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',               // HTML 报告

  use: {
    baseURL: 'http://localhost:3000',
    trace: 'on-first-retry',       // 首次重试时记录追踪
    screenshot: 'only-on-failure', // 失败时截图
  },

  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
    {
      name: 'Mobile Chrome',
      use: { ...devices['Pixel 5'] },
    },
  ],
});