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()/get_by_test_id() 替代 CSS/XPath

动态加载超时

组合 wait_for_selector() + networkidle 事件

文件上传卡顿

用 set_input_files() 代替模拟点击选择文件

跨页面下载丢失

确保下载按钮在当前上下文,非新开标签页

实战总结

🔹 优先语义化定位get_by_role() 兼顾稳定性与可读性
🔹 文件操作走APIset_input_files() 和 expect_download() 替代人工模拟
🔹 调试必用Trace:失败时分析 trace.zip 定位根因
🔹 复杂交互拆步骤:拖拽/悬停等操作分段验证

掌握上述技能,可覆盖 登录、表单提交、文件管理、动态组件操作 等 90% 的 Web 自动化场景!下一步可进阶学习 网络拦截 与 移动端模拟


推荐阅读

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值