一、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/Pixel5）

二、环境搭建（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/playwright
playwright 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()

XPath
page.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 异步模式选择

image.png

异步示例：

import asyncio
from 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 13”] 模拟真机
➡️ CI/CD 流水线：GitHub Actions 自动执行测试

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

Playwright 极速入门：1 小时搞定环境搭建与首个测试脚本