一、交互操作核心:从基础到高级
1. 点击与输入操作
-
精准点击
-
click()
:基础点击,支持自动等待元素可操作(可见、未禁用)。 - 进阶控制:
# 强制超时(非必要不推荐) page.click('button#submit', timeout=5000) # 点击含特定文本的元素(正则匹配) page.click('text=/Log\s?in/i')
-
-
智能输入
fill()
:快速填充文本(清空后输入):page.fill('input[name="username"]', 'admin')
type()
:模拟逐字符输入(适用于需触发输入事件的场景):page.type('#search', 'Playwright', delay=100) # 延迟100ms/字符
2. 拖拽与悬停
-
拖拽操作
# 元素A拖到元素B page.drag_and_drop('#item', '#dropzone') # 坐标拖拽(像素级控制) page.locator('#slider').drag_to_target(x=100, y=0)
-
悬停触发
page.hover('#menu') # 触发下拉菜单
二、文件操作实战:上传与下载
1. 文件上传
- 单文件上传(直接指定路径):
page.locator('input[type="file"]').set_input_files('data/test.png')
- 多文件上传:
page.locator('input#multi-files').set_input_files(['1.jpg', '2.pdf'])
- 动态文件选择(监听文件选择对话框):
with page.expect_file_chooser() as fc: page.click('text=Upload') file_chooser = fc.value file_chooser.set_files('data.csv')
2. 文件下载
- 监听下载事件(自动保存文件):
with page.expect_download() as download_info: page.click('text=Export Report') download = download_info.value download.save_as(f'downloads/{download.suggested_filename}')
避坑指南:
设置下载路径避免权限问题
验证文件名防覆盖:
if download.suggested_filename.endswith('.csv')
三、调试技巧:解决交互中的疑难杂症
1. 智能等待策略
-
元素状态检测:
# 等待元素可见(超时5秒) page.wait_for_selector('.modal', state='visible', timeout=5000) # 等待加载动画消失 page.wait_for_selector('.spinner', state='hidden')
-
自定义等待条件:
def is_button_enabled(): return page.is_enabled('button#submit') page.wait_for_function(is_button_enabled)
2. 断点调试与录屏分析
- 插入断点:
page.pause() # 暂停测试,手动操作调试
- Trace Viewer 分析:
查看日志:# 记录操作日志(含DOM快照、网络请求) context.tracing.start(screenshots=True, snapshots=True) # 执行操作... context.tracing.stop(path='trace.zip')
npx playwright show-trace trace.zip
3. 实时定位器修复
使用 Playwright Inspector(调试模式)动态调整定位器:
PWDEBUG=1 pytest -s # 启动调试
-
悬停元素查看推荐定位器
-
编辑定位器字段即时验证效果
四、高级场景:复杂交互的解决方案
-
iframe 嵌套操作
frame = page.frame_locator('iframe#payment') frame.get_by_role('button', name='Pay').click()
-
Shadow DOM 穿透
# 通过 >> 穿透Shadow边界 page.locator('div#shadow-host input').fill('data')
-
动态列表交互
items = page.locator('.list > li') await items.filter(has_text='VIP').click() # 点击含"VIP"的项
五、避坑指南:交互操作稳定性提升
问题 | 解决方案 |
---|---|
元素定位失败 | 优先用 |
动态加载超时 | 组合 |
文件上传卡顿 | 用 |
跨页面下载丢失 | 确保下载按钮在当前上下文,非新开标签页 |
实战总结:
🔹 优先语义化定位:
get_by_role()
兼顾稳定性与可读性
🔹 文件操作走API:set_input_files()
和expect_download()
替代人工模拟
🔹 调试必用Trace:失败时分析trace.zip
定位根因
🔹 复杂交互拆步骤:拖拽/悬停等操作分段验证
掌握上述技能,可覆盖 登录、表单提交、文件管理、动态组件操作 等 90% 的 Web 自动化场景!下一步可进阶学习 网络拦截 与 移动端模拟。
推荐阅读