Playwright 自动化测试框架入门指南

什么是 Playwright？

Playwright 是一个现代化的端到端测试框架，由微软开发并维护。它支持所有主流浏览器引擎，包括 Chromium、WebKit 和 Firefox，能够在 Windows、Linux 和 macOS 系统上运行测试，支持本地执行和持续集成环境，同时提供无头(Headless)和有头(Headed)两种运行模式。

为什么选择 Playwright？

1. 跨浏览器支持：单一 API 即可测试 Chromium、Firefox 和 WebKit
2. 跨平台能力：支持 Windows、Linux 和 macOS 三大操作系统
3. 移动设备模拟：内置 Google Chrome for Android 和 Mobile Safari 模拟
4. 现代化架构：专为现代 Web 应用设计，支持单页应用(SPA)和渐进式 Web 应用(PWA)
5. 强大的工具链：提供代码生成、调试工具和丰富的报告功能

安装 Playwright

Playwright 可以通过多种包管理器安装，下面介绍最常用的几种方式：

使用 npm 安装

npm init playwright@latest

使用 yarn 安装

yarn create playwright

使用 pnpm 安装

pnpm create playwright

安装过程中会提示你进行一些配置选择：

1. 选择 TypeScript 或 JavaScript（默认是 TypeScript）
2. 指定测试文件夹名称（默认是 tests 或 e2e）
3. 是否添加 GitHub Actions 工作流（用于 CI）
4. 是否安装 Playwright 浏览器（默认安装）

安装后的项目结构

安装完成后，Playwright 会创建以下文件和目录：

playwright.config.ts    # Playwright 配置文件
package.json            # 项目依赖配置
package-lock.json       # 依赖锁文件
tests/                  # 测试目录
  example.spec.ts       # 示例测试文件
tests-examples/         # 更复杂的示例测试
  demo-todo-app.spec.ts # 待办应用测试示例

playwright.config.ts 是核心配置文件，你可以在这里修改浏览器设置、测试超时时间等各种参数。

运行示例测试

Playwright 默认会在所有三种浏览器（Chromium、Firefox 和 WebKit）上并行运行测试，且默认使用无头模式（不会打开可见的浏览器窗口）。

运行测试命令

npx playwright test

或使用 yarn：

yarn playwright test

或使用 pnpm：

pnpm exec playwright test

查看测试报告

测试完成后，Playwright 会生成详细的 HTML 报告，展示测试结果：

npx playwright show-report

HTML 报告提供以下功能：

• 按浏览器筛选测试结果
• 查看通过、失败、跳过和不稳定的测试
• 深入查看每个测试的详细步骤和错误信息
• 自动打开（当有测试失败时）

使用 UI 模式运行测试

Playwright 提供了增强的 UI 模式，带来更好的开发体验：

npx playwright test --ui

UI 模式提供以下特性：

• 时间旅行调试（Time Travel Debugging）
• 实时观察模式（Watch Mode）
• 直观的测试结果展示
• 交互式测试运行控制

更新 Playwright

保持 Playwright 最新版本很重要，可以获取最新功能和修复：

npm install -D @playwright/test@latest
npx playwright install --with-deps

检查当前版本：

npx playwright --version

系统要求

确保你的系统满足以下要求：

• Node.js 18、20 或 22 的最新版本
• Windows 10+、Windows Server 2016+ 或 WSL
• macOS 14 Ventura 或更高版本
• Debian 12、Ubuntu 22.04/24.04（x86-64 和 arm64 架构）

下一步学习建议

1. 编写测试：学习使用 Web 优先断言、页面夹具和元素选择器
2. 运行测试：掌握如何运行单个测试、多个测试以及有头模式
3. 代码生成：使用 Codegen 自动生成测试代码
4. 追踪测试：利用 Trace Viewer 分析测试执行过程

Playwright 提供了强大而灵活的工具集，能够满足从简单到复杂的各种测试需求。通过本指南，你已经掌握了基本的安装和运行方法，接下来可以深入探索 Playwright 的各种高级功能来提升你的测试效率和质量。