写点什么

Playwright 极速 UI 自动化实战指南

作者:测试人
  • 2025-09-22
    北京
  • 本文字数:3000 字

    阅读完需:约 10 分钟

如果你曾受困于 Selenium 中各种不可预测的等待、脆弱的选择器和跨浏览器兼容的噩梦,那么 Playwright 将是带你脱离苦海、让自动化脚本执行速度和精神愉悦度双双“起飞”的终极利器。本文将通过实战代码,带你领略 Playwright 的四大提速秘籍。

一、 为何选择 Playwright?速度与智能的融合

Playwright 不是一个简单的 Selenium 替代品,它是一个为现代 Web 应用量身定制的自动化核武器。其核心优势在于:

  • 跨浏览器王者:原生支持 Chromium、Firefox 和 WebKit(Safari),确保你的应用在所有核心引擎上表现一致。

  • 自动等待智能:内置智能等待机制,自动等待元素可操作、网络请求完成,彻底告别 time.sleep()和不可靠的隐式等待。

  • 多上下文隔离:轻松模拟多标签页、多用户场景,互不干扰。

  • 强大的选择器引擎:支持文本选择、React/Vue 组件选择等,编写选择器更直观、更健壮。

  • 网络拦截与 Mock:直接拦截和修改网络请求,无需修改生产代码即可测试各种场景。

二、 极速起飞:四大实战提速秘籍

让我们通过代码来看看 Playwright 如何解决传统自动化中的痛点。

秘籍一:智能等待 - 告别 time.sleep

传统脚本需要手动添加等待,否则元素未加载就会报错。Playwright 的几乎所有操作(如 click, fill)都内置了智能等待。

# ✅ Playwright 方式 (正确)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://demoqa.com/login") # 以下操作会自动等待元素出现、可见、可操作(如未被遮挡、可点击) page.fill("#userName", "testuser") # 自动等待输入框 page.fill("#password", "Password123") page.click("#login") # 自动等待按钮可点击 # 无需手动等待页面跳转,可直接断言新页面的元素 assert page.is_visible("text=Profile") # 等待并断言“Profile”文本出现 browser.close()
# ❌ 传统方式 (错误示范)# from selenium import webdriver# from selenium.webdriver.common.by import By# from selenium.webdriver.support.ui import WebDriverWait# ... 需要大量 try-catch 和显式等待,代码冗长易失败
复制代码

秘籍二:无敌选择器 - 精准定位元素

Playwright 的选择器引擎极其强大,支持 CSS、文本内容、甚至 XPath 和自定义引擎组合。

# 1. 文本选择器 - 点击文本为"Login"的按钮page.click("text=Login")
# 2. CSS选择器 + 文本组合 - 选择class为`btn`且文本为`Submit`的按钮page.click(".btn:has-text('Submit')")
# 3. React/Vue组件选择器 (需配合playwright实验性功能)# page.click("_react=SubmitButton[value='OK']")# page.click("_vue=my-component[value='OK']")
# 4. 选择第N个元素page.click("li >> nth=2") # 选择第三个li元素
# 5. 过滤:选择包含特定文本的div下的按钮page.click("div:has-text('Welcome') >> .btn")
复制代码

秘籍三:网络操纵 - 模拟任意 API 响应

无需启动后端服务,直接拦截和修改 API 请求,测试极端场景快如闪电。

# 拦截所有JSON请求并修改响应def handle_route(route):    if"/api/user"in route.request.url:        # 模拟返回一个自定义的JSON响应        route.fulfill(            status=200,            content_type="application/json",            body='{"name": "mocked_user", "isAdmin": true}'        )    else:        # 其他请求继续正常处理        route.continue_()
# 启用请求拦截page.route("**/*", handle_route)
# 现在执行的操作,所有对 `/api/user` 的请求都会返回我们自定义的数据page.goto("https://example.com/dashboard")# 页面会显示 mocked_user 的信息,从而测试UI逻辑
复制代码

秘籍四:移动端模拟(Device Emulation) - 一键测试响应式

轻松模拟手机浏览器、GPS、触摸等设备特性。

from playwright.sync_api import sync_playwright
# 1. 使用Playwright自带的设备模拟预设(如iPhone 13)iphone_13 = playwright.devices["iPhone 13"]browser = p.chromium.launch()# 在上下文中直接模拟设备context = browser.new_context(**iphone_13)page = context.new_page()page.goto("https://m.example.com")
# 2. 自定义视口、User-Agent等context = browser.new_context( viewport={"width": 375, "height": 812}, user_agent="Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X) ...", is_mobile=True)
复制代码

三、 实战:编写一个“抢购”脚本

假设我们要编写一个秒杀脚本,结合上述秘籍,代码将非常清晰和健壮。

from playwright.sync_api import sync_playwrightimport time
TARGET_URL = "https://example-limited-sale.com"USERNAME = "your_email@example.com"PASSWORD = "your_password"
with sync_playwright() as p: # 启动浏览器 browser = p.chromium.launch(headless=False) # 调试时设为False,查看运行过程 context = browser.new_context() page = context.new_page()
try: # 1. 导航到目标页面 page.goto(TARGET_URL) # 2. 自动等待并点击登录按钮,然后填写表单 page.click("text=Login") page.fill("#email", USERNAME) page.fill("#password", PASSWORD) page.click("#login-btn") # 3. 智能等待登录成功,跳转到商品页 page.wait_for_url("**/product/**") # 4. (可选) 拦截可能影响速度的图片请求,加速页面加载 page.route("**/*.{png,jpg,jpeg}", lambda route: route.abort()) # 5. 核心:循环检查“立即购买”按钮是否可点击 buy_btn = page.locator("text=立即购买") buy_btn.wait_for(state="visible") # 等待按钮出现 whileTrue: if buy_btn.is_enabled(): buy_btn.click() print("✅ 成功点击购买按钮!") break else: print("⏳ 按钮还未可用,半秒后重试...") page.wait_for_timeout(500) # 微小间隔,避免频繁检查 # 6. 提交订单 page.click("text=提交订单") print(" 抢购成功!") except Exception as e: print(f"❌ 脚本运行失败: {e}") # 出错截图,便于调试 page.screenshot(path="error_screenshot.png") finally: browser.close()
复制代码

四、 总结:让你的测试飞起来

通过以上实战示例,我们可以看到 Playwright 如何通过:

  1. 智能等待:根除了 Flaky Tests(不稳定的测试),让脚本无比可靠。

  2. 强大选择器:让元素定位变得直观而健壮,减少了脚本的维护成本。

  3. 网络操纵:实现了前端能力的极限测试,速度极快且覆盖场景全面。

  4. 设备模拟:一站式解决移动端测试需求。

行动建议

  1. 安装尝试:pip install playwright && playwright install

  2. 录制起步:使用 playwright codegen <url>命令打开录制工具,快速生成初始脚本。

  3. 改造旧脚本:尝试用 Playwright 的思维重写一个你以前觉得很难维护的 Selenium 脚本,体验其中的差异。

告别等待与彷徨,拥抱 Playwright,让你的 UI 自动化测试真正实现“速度与激情”!

用户头像

测试人

关注

专注于软件测试开发 2022-08-29 加入

霍格沃兹测试开发学社,测试人社区:https://ceshiren.com/t/topic/22284

评论

发布
暂无评论
Playwright极速UI自动化实战指南_人工智能_测试人_InfoQ写作社区