Playwright自动化测试系列课（3） | 第二阶段：核心技能与调试 ​​交互操作大全

一、交互操作核心：从基础到高级

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  # 启动调试 

• 悬停元素查看推荐定位器
• 编辑定位器字段即时验证效果

四、高级场景：复杂交互的解决方案

1. iframe 嵌套操作 frame = page.frame_locator('iframe#payment')   frame.get_by_role('button', name='Pay').click()  
2. Shadow DOM 穿透 # 通过 >> 穿透Shadow边界 page.locator('div#shadow-host input').fill('data')  
3. 动态列表交互 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 自动化场景！下一步可进阶学习 网络拦截 与 移动端模拟。