Playwright 入门教程：从零掌握现代Web自动化

1. Playwright 简介

是什么
Playwright 是微软开发的跨浏览器自动化工具，支持 Chromium、Firefox、WebKit，提供 JavaScript/TypeScript、Python、Java、.NET 的 SDK。

为什么选择它

• ✅ 单API控制所有主流浏览器
• ✅ 自动等待元素、网络请求拦截等现代特性
• ✅ 比 Selenium 更快的执行速度和更简化的配置

---

2. 环境安装

Python 示例（其他语言类似）

# 安装Playwright
pip install playwright

# 安装浏览器（Chromium/Firefox/WebKit）
playwright install

---

3. 第一个自动化脚本

基础操作：打开页面并截图

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    # 启动浏览器（默认无头模式）
    browser = p.chromium.launch(headless=False)  # 可视化运行
    page = browser.new_page()
    
    # 导航到页面
    page.goto("https://example.com")
    
    # 输入文本并点击按钮
    page.fill("#search-input", "Playwright")
    page.click("#search-button")
    
    # 截图保存
    page.screenshot(path="example.png")
    browser.close()

---

4. 核心功能详解

4.1 元素定位与操作

Playwright 支持多种定位方式：

# CSS选择器
page.click("button#submit")

# XPath
page.click("//button[@id='submit']")

# 文本匹配
page.click("text='Login'")

# 组合定位
page.fill("div.search >> input", "关键词")

4.2 自动等待机制

无需手动等待，Playwright 自动处理：

# 自动等待元素出现并可点击
page.click("#dynamic-button")  # 内置智能等待

# 显式等待（如需超时控制）
page.wait_for_selector("#loading", state="hidden")

4.3 处理弹窗与iframe

# 处理弹窗
page.on("dialog", lambda dialog: dialog.accept())

# 操作iframe
frame = page.frame_locator("iframe#content")
frame.click("button")

4.4 网络请求拦截

Mock API 响应或捕获请求：

# 拦截请求
page.route("**/api/data", lambda route: route.fulfill(
    status=200,
    body='{"mock": "data"}'
))

# 监听请求
page.on("request", lambda request: print(request.url))

---

5. 高级技巧

5.1 并行测试

使用 playwright-pytest 快速并行化：

pip install pytest-playwright

# test_demo.py
def test_example(page):  # 自动注入page对象
    page.goto("https://example.com")
    assert "Example" in page.title()

运行测试：

pytest --browser chromium --browser firefox  # 跨浏览器测试

5.2 录制操作脚本

使用 Codegen 工具自动生成代码：

playwright codegen https://example.com

会启动交互式浏览器窗口，操作后实时生成代码。

---

6. 常见问题解答

Q1: 如何解决元素无法点击的问题？

• 使用 page.wait_for_selector() 确保元素可交互
• 检查是否被其他元素遮挡（用 page.locator().highlight() 调试）

Q2: 如何登录并保存状态？

context = browser.new_context(storage_state="auth.json")
page = context.new_page()
# 登录后保存状态
context.storage_state(path="auth.json")

---

7. 总结

适用场景：

• 快速编写稳定的E2E测试
• 爬取动态渲染的网页数据
• 自动化重复性Web操作

资源推荐：

• 官方文档
• Playwright Python API

---

下一步：尝试用 Playwright 实现你的第一个自动化任务吧！遇到问题欢迎在评论区留言讨论。

---

这篇教程博文的特点：

1. 渐进式学习：从安装到高级功能，适合新手逐步深入
2. 代码驱动：每个功能点配可运行的代码片段
3. 解决痛点：包含常见问题解答和调试技巧
4. SEO友好：关键词（如“自动化测试”、“爬虫”）自然融入

可根据读者反馈扩展“实战案例”章节（如自动化填写表单、抓取电商数据等）。