一、Playwright 简介与核心优势
Playwright 是微软开源的现代化 Web 自动化工具，支持 Chromium（Chrome/Edge）、Firefox、WebKit（Safari） 三大浏览器引擎，提供跨平台（Windows/macOS/Linux）和跨语言（Python/JS/Java/C#）的统一 API。
核心优势：
✅ 自动等待机制：智能等待元素加载，减少因网络延迟导致的失败
✅ 录制与调试工具：内置 codegen 实时生成操作脚本
✅ 多语言支持：Python/Node.js/Java/C# 灵活选择
✅ 真移动端模拟：内置设备描述符
二、环境搭建（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_playwright
with 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_playwright
def run(): 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_playwright
async def main(): async with 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 倍+。
七、实战案例：爬取商品数据
async def scrape_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"] 模拟真机
➡️ CI/CD 流水线：GitHub Actions 自动执行测试
掌握基础操作后，你已具备用 Playwright 实现 自动化测试、数据采集、监控任务 的能力！
评论