当前位置：首页 > news >正文

Playwright UI自动化实战速成指南

news 2025/9/24 9:36:58

如果你也厌倦了Selenium里没完没了的等待、动不动就失效的选择器，还有各种浏览器兼容的坑，那Playwright绝对是你的救星。用它写脚本不仅跑得快，写起来也更舒心。下面就用实际代码，带你看看Playwright的四个提速绝招。

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

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

跨浏览器王者：原生支持Chromium、Firefox和WebKit（Safari），确保你的应用在所有核心引擎上表现一致。
自动等待智能：内置智能等待机制，自动等待元素可操作、网络请求完成，彻底告别time.sleep()和不可靠的隐式等待。
多上下文隔离：轻松模拟多标签页、多用户场景，互不干扰。
强大的选择器引擎：支持文本选择、React/Vue组件选择等，编写选择器更直观、更健壮。
网络拦截与Mock：直接拦截和修改网络请求，无需修改生产代码即可测试各种场景。

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

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

秘籍一：智能等待（Auto-waiting） - 告别time.sleep

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

# ✅ Playwright 方式 (正确)
from playwright.sync_api import sync_playwrightwith 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 和显式等待，代码冗长易失败

秘籍二：无敌选择器（Powerful Selectors） - 精准定位元素

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")

秘籍三：网络操纵（Network Mocking） - 模拟任意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_playwright
import timeTARGET_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("✅ 成功点击购买按钮！")breakelse: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如何通过：

智能等待：根除了Flaky Tests（不稳定的测试），让脚本无比可靠。
强大选择器：让元素定位变得直观而健壮，减少了脚本的维护成本。
网络操纵：实现了前端能力的极限测试，速度极快且覆盖场景全面。
设备模拟：一站式解决移动端测试需求。

行动建议：

安装尝试：pip install playwright && playwright install
录制起步：使用playwright codegen <url>命令打开录制工具，快速生成初始脚本。
改造旧脚本：尝试用Playwright的思维重写一个你以前觉得很难维护的Selenium脚本，体验其中的差异。

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

测试开发全景图：AI测试、智能驱动、自动化、测试开发、左移右移与DevOps的持续交付

Playwright UI自动化实战速成指南

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

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

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

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

推荐学习

推荐阅读

精选文章

人工智能测试开发学习专区

相关文章：

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

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

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

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

推荐学习

推荐阅读

精选文章

人工智能测试开发学习专区

相关文章：

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

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

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

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