【工程实战】第四篇：UI 自动化 —— Playwright 异步模式深度实战：告别 Selenium 的“脆”与“慢”

专栏进度：04 / 10 (自动化实战专题)

Playwright 的核心优势在于它直接通过浏览器的 CDP（Chrome DevTools Protocol） 协议进行通信，而不是像 Selenium 那样通过中间商 WebDriver，这让它的速度和稳定性有了质的飞跃。

一、 环境准备：三分钟起步

Playwright 的安装非常简单，它会自动下载对应的浏览器内核（Chromium, Firefox, WebKit）。

Bash

#安装 playwright 库和 pytest 插件

pip install playwright pytest-playwright

# 安装浏览器驱动（只需执行一次）
playwright install

二、 核心特性：为什么它是"下一代"？

自动等待 (Auto-waiting)：你不再需要写 time.sleep()。Playwright 会在点击前自动检查元素是否可见、是否可点击。

多上下文隔离 (Browser Contexts)：一个浏览器实例可以开启多个互不干扰的上下文，模拟多个用户同时登录，无需反复启停浏览器。

强大的调试器 (Codegen)：支持录制生成代码，甚至可以录制你的操作并生成 Python 脚本。

网络拦截：可以像 Fiddler 一样拦截、Mock 接口请求，实现 UI 与接口的混合测试。

三、 实战：编写第一个异步 UI 测试脚本

我们将演示如何通过 Playwright 异步模式打开百度并进行搜索。

1. 基础脚本 tests/test_ui_basic.py
   Python

import asyncio
from playwright.async_api import async_playwright

async def run():
    async with async_playwright() as p:
        # 启动浏览器（headless=False 表示看得到界面）
        browser = await p.chromium.launch(headless=False)
        # 开启一个新的上下文
        context = await browser.new_context()
        # 打开页面
        page = await context.new_page()
        
        # 访问百度
        await page.goto("https://www.baidu.com")
        # 输入搜索词（自动等待输入框出现）
        await page.fill("#kw", "Playwright 自动化测试")
        # 点击搜索按钮
        await page.click("#su")
        
        # 等待结果加载
        await page.wait_for_timeout(2000)
        # 截图存证
        await page.screenshot(path="baidu_search.png")
        
        await browser.close()

# 运行异步任务
# asyncio.run(run())

2. 结合 Pytest 运行
   如果你安装了 pytest-playwright 插件，可以直接使用内置的 page 对象，代码会极致精简：

Python

def test_baidu_search(page):
    page.goto("https://www.baidu.com")
    page.fill("#kw", "pytest-playwright")
    page.click("#su")
    assert "pytest-playwright" in page.title()

四、 进阶：录制你的第一段代码

如果你面对复杂的定位符无从下手，可以使用 Playwright 的命令行录制工具：

Bash

playwright codegen https://www.baidu.com

这会弹出一个浏览器和你操作的记录窗口。你在页面上的每一次点击、输入，都会实时生成 Python 代码。

五、 避坑指南：UI 自动化的"生存法则"

拒绝死等：严禁使用 time.sleep()。如果 Playwright 默认等待失效，请使用 page.wait_for_selector() 指定具体元素。

定位符优先序：优先使用 id 或 name，其次是 css selector，最后才是脆弱的 xpath。Playwright 推荐使用 get_by_role 或 get_by_text，这些更符合真实用户行为。

Headless 陷阱：有些网站会检测爬虫。如果无界面模式（Headless）报错，尝试开启 channel="chrome" 使用真实浏览器，或添加 user_agent。