Playwright 教程

Playwright 教程（2025 年最新版）

Playwright 是 Microsoft 开源的现代化 Web 自动化测试和爬虫框架，支持 Chromium、Firefox 和 WebKit（Safari）三大浏览器内核，提供跨浏览器、跨语言（JavaScript/TypeScript、Python、Java、.NET）的统一 API。它以自动等待、可靠事件、网络拦截和代码生成等特性著称，比 Selenium 更稳定、更快，尤其适合端到端（E2E）测试和动态网页自动化。

1. 为什么选择 Playwright？（2025 年优势）

• 跨浏览器一致性：一套代码跑所有主流浏览器。
• 自动等待：元素可操作前自动等待，无需手动 sleep。
• 内置测试运行器：Playwright Test 支持并行、报告、追踪。
• 代码生成：playwright codegen 可录制操作自动生成脚本。
• 移动端模拟：内置设备模拟，支持响应式测试。
• 社区活跃：2025 年版本已达 1.57+，新增 AI 代理、MCP 等特性。

2. 安装与环境搭建

推荐使用 Node.js（JavaScript/TypeScript）或 Python 版本，这里以最流行的 Python 和 Node.js 示例。

Python 版（推荐新手）：

# 安装 Playwright
pip install playwright

# 安装浏览器驱动（Chromium、Firefox、WebKit）
playwright install

Node.js 版：

# 初始化项目
npm init playwright@latest

# 或手动安装
npm i -D @playwright/test
npx playwright install

3. 第一个脚本示例

Python 同步版（简单易懂）：

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)  # headless=False 可看到浏览器
    page = browser.new_page()
    page.goto("https://www.baidu.com")
    page.fill("#kw", "Playwright 教程")
    page.click("#su")
    page.wait_for_selector("text=Playwright 中文文档")  # 自动等待
    print(page.title())
    page.screenshot(path="baidu.png")  # 截图
    browser.close()

Node.js/TypeScript 版：

import { chromium } from 'playwright';

(async () => {
  const browser = await chromium.launch({ headless: false });
  const page = await browser.new_page();
  await page.goto('https://www.baidu.com');
  await page.fill('#kw', 'Playwright');
  await page.click('#su');
  await page.waitForSelector('text=Playwright');
  await page.screenshot({ path: 'baidu.png' });
  await browser.close();
})();

运行：python script.py 或 npx playwright test。

4. 核心功能速览

• 定位器（Locators）：page.get_by_role()、page.get_by_text()、page.locator() 等，更智能。
• 断言：expect(page.locator()).to_have_text("xxx")。
• 网络拦截：模拟 API 响应、mock 数据。
• 代码录制：

  npx playwright codegen https://example.com  # 自动生成脚本

• 测试运行：

  npx playwright test          # 运行所有测试
  npx playwright test --ui     # UI 模式可视化运行
  npx playwright show-report   # 查看 HTML 报告

5. 推荐学习资源（中文优先，2025 年最新）

• 官方文档（最权威，必看）：
• 英文：https://playwright.dev/
• Python 中文：https://playwright.net.cn/python/docs/intro
• Node.js 中文：https://playwright.nodejs.cn/
• 菜鸟教程（中文完整系列）：https://www.runoob.com/playwright/playwright-tutorial.html （从安装到高级操作）
• CSDN 详细教程：https://blog.csdn.net/m0_51156601/article/details/126886040 （最详细使用教程）
• 知乎新手篇：https://zhuanlan.zhihu.com/p/669159171 （Java/Python/Node 全覆盖）
• 博客园 Python 系列：https://www.cnblogs.com/longronglang/p/18255415 （环境 + 录制 + 实战）
• Playwright 中文社区：https://playwright.itest.info/ （进阶翻译 + 资源站）
• 视频教程：YouTube “Playwright Beginner Tutorials” 播放列表，或 B 站搜索 “Playwright 教程”。

6. 进阶建议

• 用 Playwright Test 构建框架（支持并行、CI/CD）。
• 结合 Electron 测试桌面应用（参考前文）。
• 常见坑：代理设置、headless 模式下字体问题、动态元素用 auto-wait。
• 2025 新特性：探索 Playwright Agents（AI 驱动测试）和 MCP（多上下文并行）。

从简单脚本开始练习，运行 playwright codegen 录制操作是最快上手方式！如果需要特定语言（Python/JS/Java）或场景（爬虫/测试框架）的详细示例，告诉我，我可以继续展开代码。