一、Playwright 简介与核心优势

Playwright 是微软开源的现代化 Web 自动化工具，支持 Chromium（Chrome/Edge）、Firefox、WebKit（Safari） 三大浏览器引擎，提供跨平台（Windows/macOS/Linux）和跨语言（Python/JS/Java/C#）的统一 API。

核心优势：✅ 自动等待机制：智能等待元素加载，减少因网络延迟导致的失败✅ 录制与调试工具：内置 codegen 实时生成操作脚本✅ 多语言支持：Python/Node.js/Java/C# 灵活选择✅ 真移动端模拟：内置设备描述符（如 iPhone 13/Pixel 5）

二、环境搭建（10分钟搞定！）

1. 安装 Python 环境（需 3.8+）

# 检查 Python 版本python --version# 安装 Playwright 库pip install playwright# 安装浏览器驱动（自动下载 Chromium/Firefox/WebKit）playwright install

避坑提示：国内用户可通过设置镜像加速下载：

set PLAYWRIGHT_DOWNLOAD_HOST=https://npmmirror.com/mirrors/playwrightplaywright install

2. 验证安装

from playwright.sync_api import sync_playwrightwith sync_playwright() as p: browser = p.chromium.launch(headless=False) # 显示浏览器界面 page = browser.new_page() page.goto("https://playwright.dev") print(page.title()) # 输出：Fast and reliable end-to-end testing browser.close()

运行成功即表示环境就绪 ✅

三、首个测试脚本：网页导航与截图（15分钟）

from playwright.sync_api import sync_playwrightdefrun():with sync_playwright() as p:# 启动 Chromium 并访问网页 browser = p.chromium.launch(headless=False) page = browser.new_page() page.goto("https://example.com")# 保存截图（含完整页面） page.screenshot(path="example.png", full_page=True)# 打印页面标题 print("页面标题:", page.title()) browser.close()if __name__ == "__main__": run()

效果说明：

自动打开浏览器并访问 example.com生成全页截图 example.png控制台输出标题 "Example Domain"

四、进阶操作：元素定位与交互（20分钟）

1. 元素定位四大方式

# 文本定位（推荐！）page.locator("text='登录'").click()# CSS 选择器page.locator("#submit-btn").click()# XPathpage.locator("//button[@class='confirm']").click()# 语义化定位（ARIA 角色）page.get_by_role("button", name="提交").click()

最佳实践：优先使用 text 或 get_by_role() 提高可读性和稳定性。

2. 模拟用户登录流程

# 输入用户名密码page.get_by_placeholder("请输入手机号/邮箱").fill("test@example.com")page.get_by_placeholder("请输入密码").fill("mypassword")# 点击登录按钮page.get_by_role("button", name="登录").click()# 等待导航完成page.wait_for_url("**/dashboard")

注：wait_for_url() 确保页面跳转完成再继续操作。

五、调试神器：录制工具与 Trace Viewer

1. 脚本录制（codegen）

# 启动录制器（自动生成 Python 代码）playwright codegen https://example.com

操作浏览器界面即可实时生成代码，适合快速原型设计：!https://example.com/codegen-demo.png

提示：录制后需优化定位器逻辑。

2. 追踪测试过程（Trace Viewer）

context = browser.new_context()context.tracing.start(screenshots=True, snapshots=True) # 开启记录# ...执行操作...context.tracing.stop(path="trace.zip") # 保存日志

查看日志：

npx playwright show-trace trace.zip

可回放操作视频、查看 DOM 快照及网络请求。

六、同步 vs 异步模式选择

异步示例：

import asynciofrom playwright.async_api import async_playwrightasyncdefmain():asyncwith async_playwright() as p: browser = await p.chromium.launch() page = await browser.new_page()await page.goto("https://example.com")await browser.close()asyncio.run(main())

提示：爬虫或批量操作时异步效率提升 3 倍+。

七、实战案例：爬取商品数据

asyncdefscrape_products():asyncwith async_playwright() as p: browser = await p.chromium.launch() page = await browser.new_page()await page.goto("https://shop.example.com")# 获取所有商品标题 titles = await page.eval_on_selector_all(".product-item", "elements => elements.map(e => e.textContent)" ) print(titles) # 输出：['商品A', '商品B', ...]await browser.close()

关键点：eval_on_selector_all() 直接执行 JS 提取数据。

八、总结与学习路径

1 小时成果清单：

✅ 环境搭建与浏览器驱动安装✅ 首个导航+截图脚本✅ 元素定位与表单操作✅ 脚本录制与 Trace 调试

下一步学习：

➡️ 框架集成：结合 Pytest 管理测试用例➡️ 移动端测试：p.devices["iPhone 13"] 模拟真机➡️ CI/CD 流水线：GitHub Actions 自动执行测试

官方资源：https://playwright.dev/pythonhttps://github.com/microsoft/playwright-python

掌握基础操作后，你已具备用 Playwright 实现 自动化测试、数据采集、监控任务 的能力！