一、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/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 异步模式选择

异步示例：

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 实现 自动化测试、数据采集、监控任务 的能力！