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

一、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+）

bash 复制代码

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

避坑提示：国内用户可通过设置镜像加速下载：
arduino 复制代码
set PLAYWRIGHT_DOWNLOAD_HOST=https://npmmirror.com/mirrors/playwright
playwright install

2. 验证安装

csharp 复制代码

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分钟）

ini 复制代码

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. 元素定位四大方式

ini 复制代码

# 文本定位（推荐！）
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. 模拟用户登录流程

perl 复制代码

# 输入用户名密码
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）

bash 复制代码

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

操作浏览器界面即可实时生成代码，适合快速原型设计：

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

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

ini 复制代码

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

查看日志：

python 复制代码

npx playwright show-trace trace.zip

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

六、同步 vs 异步模式选择

模式

适用场景

代码示例

同步模式

简单脚本/快速调试

from playwright.sync_api import ...

异步模式

高并发/复杂任务

await page.goto(...)

异步示例：

csharp 复制代码

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 倍+。

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

csharp 复制代码

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 自动执行测试

官方资源：

playwright.dev/python

github.com/microsoft/p...