Playwright 简介 - 技术栈

1、Playwright 是什么

Playwright 是微软 2020 年开源的现代浏览器自动化 / 端到端测试框架 ，用统一 API 控制 Chromium、Firefox、WebKit 三大引擎，无需单独下载驱动，跨平台、跨语言、支持无头 / 有头模式。

核心特点：自动等待、网络拦截、录制生成代码、移动端模拟、截图 / 录屏 / 追踪、上下文隔离、并行执行。
支持语言：TypeScript/JavaScript、Python、Java、.NET。
对比 Selenium：无驱动、更稳定、更快、内置智能等待、API 更简洁。

2、它怎么做自动化测试（原理 + 流程）

核心原理

直接控制浏览器内核 ：通过浏览器原生协议（Chrome DevTools Protocol 等）通信，无中间层，比 Selenium 更稳定、更快。
Browser → Context → Page ：
- Browser：浏览器实例（如 Chromium）。
- Context：隔离会话（类似隐身窗口，独立 Cookie / 缓存），支持多用户并行。
- Page：标签页，所有操作（跳转、点击、输入）都在 Page 上完成。
自动等待机制 ：操作前自动等待元素可见、可点击、可编辑 ，断言自动重试，极少需要 sleep。

自动化测试基本流程（五步）

安装

复制代码

# Node.js
npm init -y
npm i -D @playwright/test
npx playwright install  # 自动装浏览器

# Python
pip install playwright
playwright install

录制生成代码（零代码起步）

复制代码

npx playwright codegen https://example.com

弹出浏览器，手动操作（登录、下单），自动生成脚本，减少手写成本。

编写测试脚本（示例：登录）

复制代码

// JS/TS
import { test, expect } from '@playwright/test';
test('登录成功', async ({ page }) => {
  await page.goto('https://example.com/login'); // 跳转
  await page.fill('#user', 'test'); // 输入
  await page.fill('#pwd', '123456');
  await page.click('button[type="submit"]'); // 点击
  await expect(page.locator('.user-name')).toHaveText('test'); // 断言
});

运行测试

复制代码

npx playwright test               # 运行所有用例
npx playwright test --ui          # UI模式（调试/观察）
npx playwright test --browser=firefox  # 指定浏览器

结果与调试

自动生成HTML 报告、截图、视频、追踪日志（trace.zip）。
用 Trace Viewer 回放每一步，定位失败原因。

零代码自动化测试

Playwright 原生支持 全程录制 + 一键回放 ，零基础、不用手写一行代码，就能完成自动化测试，非常适合不会编码、快速落地 UI 自动化的场景。

1. 录制（自动生成完整脚本）

执行命令：

复制代码

# JS/TS 技术栈
npx playwright codegen 目标网址
# Python 技术栈
playwright codegen 目标网址

弹出可视化浏览器，你只需要手动正常操作 ：点击、输入、下拉、弹窗、分页、登录、表单提交等Playwright 会实时自动记录所有操作、元素定位、等待逻辑，自动生成完整可运行脚本。

示例

复制代码

npx playwright codegen https://www.baidu.com/ -o baidu.test.js

用 -o 参数指定保存路径
文件名：必须以.spec.js 或 .test.js结尾，npx playwright test 这个命令默认只查找文件名以 .spec.js 或 .test.js 结尾的文件。

参数	作用	示例
`-o, --output`	指定保存路径	`-o ./test.js`
`--target`	指定语言	`--target python`
`-b, --browser`	指定浏览器	`-b firefox`
`--save-storage`	保存登录状态	`--save-storage auth.json`

2. 保存脚本

录制完成后关闭浏览器，录制工具会自动输出代码，你直接复制保存为测试文件即可。

3. 一键回放执行

复制代码

# 批量运行所有录制用例
npx playwright test
# 可视化模式回放（看操作步骤、调试）
npx playwright test --ui

全程无需改代码、无需手写定位器、无需加等待时间，自动跑完全流程。

示例

复制代码

# 运行特定文件
npx playwright test baidu.test.js

# 运行所有测试
npx playwright test

# 显示浏览器窗口（非无头模式）
npx playwright test --headed

# 调试模式（慢速执行）
npx playwright test --debug

3、适用哪些场景

1）Web 端到端（E2E）测试（最常用）

验证完整用户流程：登录→浏览→加购→下单→支付→退款。
覆盖多浏览器 / 多设备：Chrome、Firefox、Safari、手机 / 平板模拟。
适合：SPA（React/Vue）、管理后台、电商、SaaS 等。

2）UI 回归测试

迭代中防止界面 / 功能意外改动，自动回归核心用例。
支持视觉对比（screenshot），快速发现样式偏差。

3）网页数据采集（爬虫）

轻松处理动态渲染（JS 加载）、登录态、验证码（可对接打码平台）、IP 代理。
比 requests/beautifulsoup 更适合复杂交互 / 渲染页面。

4）移动端 Web 测试

内置手机设备模拟（iPhone/Android），一键切换视口、UA、触摸事件。
测试H5、小程序 webview、移动端适配。

5）自动化重复操作

自动报表导出、数据批量录入、定时任务、监控页面可用性。

6）CI/CD 集成

无缝接入 GitHub Actions、GitLab CI、Jenkins ，每次提交自动跑测试，快速发现 bug。

4、不适合的场景

重度图形 / 游戏类 Web（WebGL/Canvas，元素定位困难）。
性能测试 / 压力测试（侧重功能与 UI，非高并发压测）。
原生 App 测试（仅支持 Web，不支持 iOS/Android 原生控件）。