Playwright 测试核心概念入门
什么是 Playwright？本文讲解 Playwright 的适用场景、架构原理（浏览器协议直连）、安装上手、测试文件结构、运行方式、结果查看与调试方法。
本文依据官方文档整理，未执行运行验证或性能基准。代码片段展示局部用法，业务函数、数据和环境需按项目补齐；版本与配置以所引文档为准。
直接回答：Playwright 是微软开源的现代浏览器自动化框架，用一套 API 驱动 Chromium、Firefox、WebKit 三大内核，通过其驱动及浏览器适配层执行自动化，提供定位器、隔离上下文和自动等待。
什么是 Playwright
端到端测试的目标是模拟真实用户操作验证完整流程。Playwright 为此提供：跨浏览器支持、自动等待（元素可操作才执行动作，不用手写 sleep）、强大的选择器引擎、网络拦截、多标签页/多上下文管理，以及一流的调试工具链。
适用场景
- E2E 测试：注册登录、下单支付等核心链路回归；
- 视觉回归：截图对比防止样式漂移；
- 合成监测：定时在真实环境跑关键流程，先于用户发现问题；
- 爬虫与自动化：凡是需要真实浏览器渲染的场景都能胜任。
架构与稳定性的边界
Playwright 对 Chromium、Firefox、WebKit 提供统一API，但并非所有内核都使用Chrome DevTools协议。定位与断言也会在页面中执行脚本；不能把“无脚本注入/直连”当作绝对可靠性的证明。Selenium 支持 WebDriver 及 BiDi 等机制，可靠性还取决于用例设计、等待、数据与环境。
上手
npm init playwright@latest
npx playwright install
测试文件的解剖
import { test, expect } from "@playwright/test";
test.describe("登录流程", () => {
test("正确账号能登录成功", async ({ page }) => {
await page.goto("/login");
await page.getByLabel("邮箱").fill("demo@example.com");
await page.getByLabel("密码").fill("secret");
await page.getByRole("button", { name: "登录" }).click();
await expect(page).toHaveURL("/dashboard");
});
});
示例假设你已有本地登录应用，并在配置中设置 use.baseURL；账号从专用测试环境准备，密码不要用于生产。三段式结构清晰：导航 → 操作 → 断言。page 是 Playwright 注入的隔离页面上下文，每条用例默认拿到新浏览器上下文，但服务端数据库和共享账号不会因此自动隔离。
运行测试
npx playwright test # 全量无头
npx playwright test --headed # 有头模式
npx playwright test --project=chromium # 指定浏览器
npx playwright test -g "登录" # 按名称过滤
npx playwright test --ui # UI 模式
查看结果
配置 HTML reporter 后生成报告（npx playwright show-report）：每条用例的状态、耗时、错误信息齐全；配置了 trace 的失败用例还能完整回放执行现场——截图、DOM、网络瀑布一应俱全。
调试三板斧
--debug：开启 Playwright Inspector，逐步步进；page.pause()：脚本中插断点，停下来交互式探索页面；- Trace Viewer：
npx playwright show-trace trace.zip回放失败现场。
常见问题（FAQ）
Q：Playwright 和 Cypress 怎么选？
A：Cypress 胜在开发者体验与社区插件；Playwright 胜在跨浏览器覆盖（含 WebKit）、多标签/多域支持、并行性能和语言绑定（JS/Python/Java/.NET）。需要 Safari 内核覆盖或高并行时，Playwright 更合适。
Q：自动等待具体等什么？
A：检查随动作而异，如click检查可见、稳定、可接收事件、enabled；fill还要求editable。自动等待不保证业务异步已完成，应另用重试断言验证结果。
Q：必须用 TypeScript 吗？
A：不是。JS、Python、Java、.NET 都有官方绑定；TS 只是默认模板，类型提示体验更好。
官方参考
资料核对日期：2026-09-29。
