【通用智能体】Playwright：跨浏览器自动化工具

news2025/5/19 12:45:32

在这里插入图片描述

Playwright：跨浏览器自动化工具

- - 一、Playwright 是什么？
  - 二、应用场景及案例
  - - 场景 1：端到端（E2E）测试
    - 场景 2：UI 自动化（表单批量提交）
    - 场景 3：页面截图与 PDF 生成
    - 场景 4：动态内容爬虫
    - 场景 5：性能监控（LCP/FCP 指标）
  - 三、核心优势对比
  - 四、总结

一、Playwright 是什么？

Playwright 是微软开发的跨浏览器自动化工具，支持 Chromium、Firefox、WebKit 等浏览器，提供多语言（Python、JavaScript、Java、C#）API。其核心能力包括：

多浏览器支持：统一 API 操作不同浏览器。
自动化操作：模拟点击、输入、导航等用户行为。
网络拦截：捕获和修改 HTTP 请求。
动态内容处理：自动等待元素加载，支持单页应用（SPA）。

二、应用场景及案例

场景 1：端到端（E2E）测试

案例：电商网站下单流程验证

目标：测试用户从登录到下单的全流程是否正常。
步骤：
1. 打开浏览器，导航至电商网站。
2. 输入用户名/密码登录。
3. 搜索商品并添加到购物车。
4. 进入结算页，填写地址并支付。
5. 验证订单状态是否为“支付成功”。

代码片段：

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page()
    page.goto("https://example.com/login")
    page.fill("#username", "test_user")
    page.fill("#password", "pass123")
    page.click("button:has-text('登录')")
    page.goto("https://example.com/search?q=iphone")
    page.click(".add-to-cart")
    page.click("#checkout-button")
    assert page.inner_text(".order-status") == "支付成功"
    browser.close()

流程图：

启动浏览器 → 登录 → 搜索商品 → 下单 → 验证结果 → 关闭浏览器

场景 2：UI 自动化（表单批量提交）

案例：政府网站数据批量填报

目标：自动将 Excel 数据填入多个表单页。
关键点：
- 使用 page.type() 填写输入框。
- 通过 page.select_option() 选择下拉框。
- 循环处理多行数据。

代码逻辑：

import pandas as pd
data = pd.read_excel("data.xlsx")

for index, row in data.iterrows():
    page.goto("https://gov-form-submit.com")
    page.fill("#name", row["姓名"])
    page.select_option("#gender", row["性别"])
    page.click("#submit-button")

场景 3：页面截图与 PDF 生成

案例：生成移动端响应式页面的测试报告

目标：对同一页面在不同设备尺寸下截图，并生成 PDF。

实现：

devices = ["iPhone 11", "Pixel 5", "iPad Pro"]
for device in devices:
    context = browser.new_context(**playwright.devices[device])
    page = context.new_page()
    page.goto("https://responsive-site.com")
    page.screenshot(path=f"screenshot_{device}.png")
    page.pdf(path=f"report_{device}.pdf")

场景 4：动态内容爬虫

案例：抓取社交媒体动态评论

挑战：评论通过 AJAX 动态加载，需滚动触发加载。

解决方案：

page.goto("https://social-media.com/post123")
while page.is_visible("text=加载更多"):
    page.click("text=加载更多")
    page.wait_for_timeout(2000)  # 等待数据加载
comments = page.query_selector_all(".comment")
print([comment.inner_text() for comment in comments])

场景 5：性能监控（LCP/FCP 指标）

案例：检测页面核心性能指标

步骤：
1. 通过 page.route() 拦截网络请求。
2. 使用 page.evaluate() 执行性能统计脚本。

代码：

page.goto("https://target-site.com")
metrics = page.evaluate('''() => {
    return { 
        LCP: performance.getEntriesByName("largest-contentful-paint")[0].startTime,
        FCP: performance.getEntriesByName("first-contentful-paint")[0].startTime
    }
}''')
print(f"LCP: {metrics['LCP']}ms, FCP: {metrics['FCP']}ms")

三、核心优势对比

场景	Playwright 优势
多浏览器测试	单脚本兼容 Chrome、Firefox、Safari
动态内容处理	自动等待元素/网络请求，避免手动添加 `sleep`
移动端模拟	内置设备参数库（如 iPhone、Pixel）
网络拦截	可修改请求头、模拟 API 响应（如 Mock 登录态）
无头模式	支持 Headless 执行，适合 CI/CD 流水线