一、交互操作核心：从基础到高级
1. 点击与输入操作
# 强制超时（非必要不推荐）page.click('button#submit', timeout=5000)# 点击含特定文本的元素（正则匹配）page.click('text=/Log\s?in/i')
复制代码
page.fill('input[name="username"]', 'admin')
复制代码
page.type('#search', 'Playwright', delay=100) # 延迟100ms/字符
复制代码
2. 拖拽与悬停
# 元素A拖到元素Bpage.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}')
复制代码
避坑指南：
三、调试技巧：解决交互中的疑难杂症
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() # 暂停测试，手动操作调试
复制代码
# 记录操作日志（含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()/get_by_test_id() 替代 CSS/XPath
动态加载超时：组合 wait_for_selector() + networkidle 事件
文件上传卡顿：用 set_input_files() 代替模拟点击选择文件
跨页面下载丢失：确保下载按钮在当前上下文，非新开标签页
实战总结：
优先语义化定位：get_by_role() 兼顾稳定性与可读性文件操作走 API：set_input_files() 和 expect_download() 替代人工模拟调试必用 Trace：失败时分析 trace.zip 定位根因复杂交互拆步骤：拖拽/悬停等操作分段验证
掌握上述技能，可覆盖 登录、表单提交、文件管理、动态组件操作 等 90% 的 Web 自动化场景！下一步可进阶学习 网络拦截 与 移动端模拟。
评论